继承 - CSS(层叠样式表) 编辑
在css中,每个CSS 属性定义的概述都指出了这个属性是默认继承的("Inherited: Yes") 还是默认不继承的("Inherited: no")。这决定了当你没有为元素的属性指定值时该如何计算值。
继承属性
当元素的一个继承属性 (inherited property)没有指定值时,则取父元素的同属性的计算值 computed value。只有文档根元素取该属性的概述中给定的初始值(initial value)(这里的意思应该是在该属性本身的定义中的默认值)。
继承属性的一个典型例子就是 color
属性。给出以下样式规则:
p { color: green; }
若将其应用在下面这段 HTML 代码上…
<p>This paragraph has <em>emphasized text</em> in it.</p>
…文本 "emphasized text" 就会呈现为绿色,因为 em
元素继承了 p
元素 color
属性的值,而没有获取 color
属性的初始值(这个 color
值用于页面没有指定 color
时的根元素)。
非继承属性
当元素的一个非继承属性(在Mozilla code 里有时称之为reset property )没有指定值时,则取属性的初始值 initial value(该值在该属性的概述里被指定)。
非继承属性的一个典型例子就是 border
属性。给出以下样式规则:
p { border: medium solid; }
若将其应用在下面这段 HTML 代码上…
<p>This paragraph has <em>emphasized text</em> in it.</p>
…文本 "emphasized text" 就没有边框,因为 border-style
属性的初始值为none
。
inherit
关键字允许显式的声明继承性,它对继承和非继承属性都生效。
可以使用 all
简写属性一次控制所有属性的继承,该属性将其值应用于所有属性,例如:
font {
all: revert;
font-size: 200%;
font-weight: bold;
}
这会将 font
属性的样式恢复为用户代理(浏览器)的默认值,除非存在用户样式表,在这种情况下使用该样式表。然后它将字体大小加倍并应用 font-weight
属性 为"bold"
注意
inherit
关键字允许显式的声明继承性,它对继承和非继承属性都生效。
可以使用 all
简写属性一次控制所有属性的继承,该属性将其值应用于所有属性,例如:
font { all: revert; font-size: 200%; font-weight: bold; }
这会将 font
属性的样式恢复为用户代理(浏览器)的默认值,除非存在用户样式表,在这种情况下使用该样式表。然后它将字体大小加倍并应用 font-weight
属性 为"bold"
参见
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论