摘要：的继承是由所使用的样式属性定义的。如何使用继承最简单的方法就是知道所有属性中那些是默认被继承的，如果这个属性被继承，就会知道它会在元素所有子元素中生效。被继承查看属性，会看到它的继承性是，也就是默认不被继承的。
CSS的继承是由所使用的样式属性定义的。换句话说，当你查看CSS属性backgruound-color，你会看到一栏「继承性」，也许你几乎没有在意过它，但是它还是十分有用的。
什么是CSS继承每一个元素都是文档树的一部分，除了最顶级的HTML元素，每个元素都有其对应的父级元素，每一个父级元素的CSS属性值都可以被应用到它的子元素中去。
举个栗子，H1标签包含着一个EM标签：
这是一个很大的标题
EM就是H1标签的子元素，任何H1中继承的CSS属性值会自动在EM标签中生效，比如：
h1{font-size: 120%;}
由于font-size是默认继承的CSS属性，"很大的"字体也会和H1一样，被放大到120%。
如何使用CSS继承最简单的方法就是知道CSS所有属性中那些是默认被继承的，如果这个属性被继承，就会知道它会在元素所有子元素中生效。
我们经常在非常顶级的元素上定义基础样式，比如BODY标签，如果在body中设置字体，因为继承，文档中所有元素都会应用这个字体：
body {font-family: Arial, sans-serif; }
使用「inherit」值
每个CSS属性的值都包括inherit，属性被定义这个值后，即使这个属性不是默认继承，也会应用父级元素这个CSS属性的值，比如：
body { margin: 1em; }
p { margin: inherit; }
继承使用计算值（Computed Values）
计算值指的是这个值相对于网页中其他值来定义，这个对于继承属性尤其重要。如果在body中定义font-size:1em，文档中所有元素字体大小并不都是1em，这是因为像H1-H6这类元素的font-size的值是相对大小。H1默认是网页中字体最大的元素，当设置body元素字体大小时，H1-H6会根据这个「平均」大小的字体计算实际的字体大小。
再举一个例子：
这是普通文本
按照之前所述，font-size是默认被继承的CSS属性，然而span字体的大小并不是p的80%，而是和p一样大，正是因为继承使用的是计算值，如果p的父级元素的字体大小为30px，p的字体大小计算值为24px，span继承的则是24px，而不是80%。
更多关于计算值可以阅读CSS Computed Value。
background被「继承」查看backgruound属性，会看到它的继承性是no，也就是默认不被继承的。但是浏览器依旧默认「继承」了这个属性，比如写这么一段：
这是一个很大的标题
“很大的”依旧有了黄色的背景，这是因为background属性的初始值（initial value）是transparent（透明），所以看到的黄色背景其实是h1标签的背景。
更多关于初始值可以阅读CSS Initial Value。
本文翻译自CSS Inheritance,How CSS Inheritance Works in Web Documents。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/110847.html
摘要：计算属性的计算值通常包括将相对值转换成绝对值如单位或百分比。返回的解析值可能是计算值或应用值。最后，计算布局尺寸比如或百分数换算为像素值，结果即应用值。继承当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值。 css属性 我觉得大部分学习前端的人应该都没有按照教科书一般的来学习css，可能是类似搭积木一样，需要什么拿什么，所以可能最对一些基本的概念没有很好的理解，这里列出的是...
摘要：在中，你可以像俄罗斯套娃那样在规则块中嵌套规则块。这个过程中，用了两步，每一步都是像打开俄罗斯套娃那样把里边的嵌套规则块一个个打开。与此类似，会命中元素和类名为的元素。这种选择器称为群组选择器。1. 使用变量; sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一 次的属...
摘要：一样式的继承性作用给父元素设置一些属性，子元素也可以使用应用场景一般用于设置网页上的一些共性信息，例如网页的文字颜色，字体，文字大小等内容。一、css样式的继承性: 作用：给父元素设置一些属性，子元素也可以使用 应用场景： 一般用于设置网页上的一些共性信息，例如网页的文字颜色，字体，文字大小等内容。优化代码，降低工作量 注意点： 1.并不是所有的属性都可以继承，、 只有color/font-...
摘要：中的继承实际上是父级元素对子元素的影响。如果使用的属性为继承属性，则将其视为，否则则视为。张载名言警句人若志趣不远，心不在焉，虽学不成。张载效果如下代码在我中，大家可以随时查看。 作者：陈大鱼头 github： KRISACHAN 继承 继承（英语：inheritance） 是面向对象软件技术当中的一个概念。在 CSS 中与 层叠（英语：Cascade） 一起描述了如何设置样...
摘要：中的继承实际上是父级元素对子元素的影响。特殊的通用属性值为处理继承提供了四种特殊的通用属性值，其值如下值意义继承的值。如果使用的属性为继承属性，则将其视为，否则则视为。 作者：陈大鱼头 github： KRISACHAN 继承 继承（英语：inheritance） 是面向对象软件技术当中的一个概念。在 CSS 中与 层叠（英语：Cascade） 一起描述了如何设置样式规则，并为所有...
阅读 2949·2023-04-26 02:29
阅读 565·2019-08-30 15:54
阅读 1639·2019-08-29 13:13
阅读 536·2019-08-28 17:51
阅读 2699·2019-08-26 13:58
阅读 1514·2019-08-26 13:27
阅读 2804·2019-08-26 11:39
阅读 3422·2019-08-26 10:46
