后端码农谈前端（CSS篇）第八课：继承与层叠_html/css

后端码农谈前端（CSS篇）第八课：继承与层叠_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:47:17

原创

1366人浏览过

一、继承

继承：所谓css样式继承，就是子元素应用父元素的规则声明。（由这一特性，可将css属性分为可继承属性和非可继承属性。）
可继承属性：属性值可由父元素继承给子元素的属性称之为可继承属性。

哪些属性是可继承属性？

text-indent、text-align、word-spacing、letter-spacing、text-transform、text-decoration、direction、white-space

font、font-family、font-size、font-style、font-variant、font-weight

list-style、list-style-image、list-style-position、list-style-type

注：这里特别解释:font-size属性(继承性比较特殊)
不同于有准确的值被继承,font-size继承的是计算的值。

虎课网

虎课网是超过1800万用户信赖的自学平台，拥有海量设计、绘画、摄影、办公软件、职业技能等优质的高清教程视频，用户可以根据行业和兴趣爱好，自主选择学习内容，每天免费学习一个...

例如：

<!DOCTYPE html>

登录后复制

<html lang=“utf8”>

登录后复制

    <head>

登录后复制

        <meta charset="utf-8">

登录后复制

        <title>Demo</title>

登录后复制

    </head>

登录后复制

    <body style="font-size:85%">

登录后复制

        body字体大小

登录后复制

        <h1 style="font-size:200%">h1字体大小</h1>

登录后复制

        <h2 style="font-size:150%">h2字体大小</h2>

登录后复制

        <p>p字体大小<em>em字体大小</em></p>

登录后复制

    </body>

登录后复制

</html>

登录后复制

即:除非font-size值被重新赋值,否则就按照上一次的尺寸大小值继续.比如上图中设置body字体为默认字体(通常为16px=1em)的85%(13.6px),那么下面的字体均为13.6px.而不是继续继承85%,让13.6再次乘以85%。

层叠：所谓CSS样式层叠就是DOM元素应用样式表中的规则覆盖继承样式的过程。