了解初始值如何与继承和非继承属性一起使用
Understanding how initial values work with inherited and non-inherited properties
我目前正在学习如何在 CSS 中使用 initial
值。
但是,我对 MDN 中对继承 属性 和非继承属性给出的定义感到非常困惑。
那么 initial
对继承和非继承属性的影响到底是什么?它们有什么区别?
初始值
一个属性的初始值是W3C规范定义中赋给属性的值。
例如:
如果作者或浏览器没有定义此属性,则CSS将引用初始值。
继承属性
For inherited properties, the initial value is used, for the root element only, when no value is specified for the element.
一些 CSS 属性可以继承它们的值。其他人不能。此行为也在 属性 定义中建立(参见上图中的 Inherited)。
如果 属性 可以继承,这意味着 属性 将——在未指定值的情况下——从父级获取 属性 的计算值。
因为可以继承的 属性 在未指定时总是向父级查找值,因此 属性 的初始值不需要出现在文档,除了 根元素 .
文档中任何位置的可继承 属性,无论嵌套有多深,都会不断向上查找一个值的级别,直到它到达根元素。这就是为什么初始值只需要存在于根元素上。
Non-Inherited 属性
For non-inherited properties the initial value is used, for any element, when no value is specified for the element.
不继承的属性不会向其父级寻求指导。因此,如果未指定初始值,则在所有情况下均适用。
我会试着用我的普通英语稍微弄清楚这个问题:
For inherited properties, the initial value is used, for the root element only, when no value is specified for the element.
按照我的理解,initial
对于应用于 HTML 的任何规则,是 HTML 的默认值并且将由 [=54= 继承],除非在 HTML 树的任何级别重置。
每个浏览器使用几乎相同的默认样式sheet(html背景是transparent(浏览器的白色window),颜色是黑色,h1是带有垂直边距的块等等...)
如果您将 color:green
设置为 HTML 并将 color:initial
设置为正文,您将返回到 black
(默认样式 sheet)。
For non-inherited properties the initial value is used, for any element, when no value is specified for the element.
这就是 HTML 或任何没有 parent 的标签所发生的情况,它们可以从中继承已重置的值。
initial
是默认样式的默认值sheet:看懂了https://www.w3.org/TR/CSS2/sample.html.
写的和描述的确实不清楚,我理解的是同义异词
一个可能混淆但也有助于 understang/test 这个值的例子:
p {font-size:initial}
和p {font-size:1rem}
可能不一样,
如果你这样做了 html{font-size:2em}
.
@英文读者,不吝指正我的平均作文
没有。如果您显式地将 initial
指定为 属性 的指定值,则 属性 的任何被指定元素的计算值就是 属性 的初始值] 不管是否继承属性。
例如,font-style
的计算值,当其指定值为 initial
时,是 normal
即使其父 font-style 是其他东西,尽管事实上 font-style 是继承的 属性。参见 https://jsfiddle.net/s3dzh6kw/
当级联没有给一个元素赋值属性时,然后属性的指定值取决于是否属性是否遗传。
我目前正在学习如何在 CSS 中使用 initial
值。
但是,我对 MDN 中对继承 属性 和非继承属性给出的定义感到非常困惑。
那么 initial
对继承和非继承属性的影响到底是什么?它们有什么区别?
初始值
一个属性的初始值是W3C规范定义中赋给属性的值。
例如:
如果作者或浏览器没有定义此属性,则CSS将引用初始值。
继承属性
For inherited properties, the initial value is used, for the root element only, when no value is specified for the element.
一些 CSS 属性可以继承它们的值。其他人不能。此行为也在 属性 定义中建立(参见上图中的 Inherited)。
如果 属性 可以继承,这意味着 属性 将——在未指定值的情况下——从父级获取 属性 的计算值。
因为可以继承的 属性 在未指定时总是向父级查找值,因此 属性 的初始值不需要出现在文档,除了 根元素 .
文档中任何位置的可继承 属性,无论嵌套有多深,都会不断向上查找一个值的级别,直到它到达根元素。这就是为什么初始值只需要存在于根元素上。
Non-Inherited 属性
For non-inherited properties the initial value is used, for any element, when no value is specified for the element.
不继承的属性不会向其父级寻求指导。因此,如果未指定初始值,则在所有情况下均适用。
我会试着用我的普通英语稍微弄清楚这个问题:
For inherited properties, the initial value is used, for the root element only, when no value is specified for the element.
按照我的理解,initial
对于应用于 HTML 的任何规则,是 HTML 的默认值并且将由 [=54= 继承],除非在 HTML 树的任何级别重置。
每个浏览器使用几乎相同的默认样式sheet(html背景是transparent(浏览器的白色window),颜色是黑色,h1是带有垂直边距的块等等...)
如果您将 color:green
设置为 HTML 并将 color:initial
设置为正文,您将返回到 black
(默认样式 sheet)。
For non-inherited properties the initial value is used, for any element, when no value is specified for the element.
这就是 HTML 或任何没有 parent 的标签所发生的情况,它们可以从中继承已重置的值。
initial
是默认样式的默认值sheet:看懂了https://www.w3.org/TR/CSS2/sample.html.
写的和描述的确实不清楚,我理解的是同义异词
一个可能混淆但也有助于 understang/test 这个值的例子:
p {font-size:initial}
和p {font-size:1rem}
可能不一样,
如果你这样做了 html{font-size:2em}
.
@英文读者,不吝指正我的平均作文
没有。如果您显式地将 initial
指定为 属性 的指定值,则 属性 的任何被指定元素的计算值就是 属性 的初始值] 不管是否继承属性。
例如,font-style
的计算值,当其指定值为 initial
时,是 normal
即使其父 font-style 是其他东西,尽管事实上 font-style 是继承的 属性。参见 https://jsfiddle.net/s3dzh6kw/
当级联没有给一个元素赋值属性时,然后属性的指定值取决于是否属性是否遗传。