美文网首页IT修真院-前端
【郑州-125期】CSS中的关键字inherit、initial

【郑州-125期】CSS中的关键字inherit、initial

作者: 月如春秋 | 来源:发表于2017-05-30 11:49 被阅读0次

    1.背景介绍

    在做任务的过程中,假如我们要在一个父级元素中的多个子集元素设置一些相同的属性,这些属性恰好也是父级也使用到的,那么我们就可以使用继承的方法来实现。有时候,我们并不想使用继承,那就重新设置,或者还原到其默认状态。这时候就用到了标题中提到的三个关键字。

    2.知识剖析

    CSS关键字:inherit、initial、unset。

    2.1 inherit

    inherit 关键字指定一个属性应从父元素继承它的值。

    inherit 关键字可用于任何 HTML 元素上的任何 CSS 属性

    该属性值支持IE8及以上。

    demo:http://www.runoob.com/cssref/css-inherit.html

    2.2 initial

    initial 关键字用于设置 CSS 属性为它的默认值。

    initial 关键字可用于任何 HTML 元素上的任何 CSS 属性。

    该属性值支持IE不支持。

    demo:http://www.runoob.com/cssref/css-initial.html

    2.3 unset

    unset 关键字,可以简单按其字面意思,理解为不设置。

    unset 关键字既然是不设置,那属性值应该如何取值呢?

    unset 是关键字 initial 和 inherit 的组合。也就是说,如果该属性是默认继承属性,该值等同于 inherit 如果该属性是非继承属性,该值等同于 initial。

    demo:https://codepen.io/Chokcoco/pen/eWJOqB

    2.4 inherit、initial、unset 的区别

    这里我们引入一个张鑫旭大神的demo来直观地区分一下其中的区别。

    demo:http://www.zhangxinxu.com/study/201603/css3-all.html

    3.常见问题

    问题: 哪些属性可以继承?

    4.解决方案

    内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。

    块状元素可继承:text-indent和text-align。

    列表元素可继承:list-style、list-style-type、list-style-position、list-style-image

    表格元素可继承:border-collapse

    5.编码实战

    参看前边引用的demo演示。

    6.扩展思考

    问题:标题标签H系列和段落标签的initial效果?

    demo:https://ptteng.github.io/PPT/PPT/css-06-inheritance%20of%20css%20attribute.html

    7.参考文献

    参考一:谈谈一些有趣的CSS题目(十五)-- 谈谈 CSS 关键字 initial、inherit 和 unset :http://www.cnblogs.com/coco1s/p/6733022.html

    参考二:张鑫旭大神的博客:简单了解CSS3的all属性:http://www.zhangxinxu.com/wordpress/2016/03/know-about-css3-all/

    参考三:【CSS】initial、inherit、unset、revert:http://www.jianshu.com/p/e8e6f251aeee

    8.更多讨论

    讨论点:大家有没有使用到过以上的关键字,遇到过哪些有意思的问题?

    PPT链接:https://ptteng.github.io/PPT/PPT/css-06-inheritance%20of%20css%20attribute.html#/

    视频链接:https://v.qq.com/x/page/j0508dvjw57.html


    css关键字:initial、inherit、unset_腾讯视频

    文本链接:http://www.jnshu.com/daily/24463

    ------------------------------------------------------------------------------------------------------------------------

    技能树.IT修真院

    “我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。

    这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。快来与我一起学习吧~

    你可以直接点击此链接:http://jnshu.com/login/1/84959420

    相关文章

      网友评论

        本文标题:【郑州-125期】CSS中的关键字inherit、initial

        本文链接:https://www.haomeiwen.com/subject/rdcrfxtx.html