掌握 CSS 属性:继承、初始、取消设置、恢复
作者:互联网
CSS(层叠样式表)是用于设计 Web 文档样式和格式的强大工具。在本综合指南中,我们将探讨四个特殊关键字:inherit
、initial
、unset
和revert
。
继承:从父元素传播值
该inherit
关键字用于显式指示元素从其父元素继承 CSS 属性的值。当属性设置为 时inherit
,该元素将采用与其父元素相同的值。当您希望整个文档的样式保持一致或希望特定元素从其父元素继承某些样式时,此行为特别有用。
例如,考虑这样一个场景:您有一个<div>
具有指定文本颜色的元素。默认情况下,文本颜色属性 ( color
) 是继承的,这意味着子元素将具有与其父元素相同的文本颜色。但是,您可以使用inherit
关键字显式强制执行此行为,即使未在父元素的 CSS 中显式指定也是如此。
div { 颜色:黑色;/* 父div的文本颜色 */ }
a { 颜色:继承;/* 继承父div的文本颜色 */ }
虽然在某些情况下使用inherit
字体大小或颜色可能是个好主意,但请务必注意,并非所有属性都会默认继承。了解继承属性和非继承属性之间的区别对于inherit
有效使用关键字至关重要。
初始:重置为默认值
该initial
关键字用于将 CSS 属性重置回 CSS 规范中指定的初始值。每个 CSS 属性都有一个由 W3C 规范定义的初始值,该初始值作为默认值。通过使用initial
,您可以覆盖任何以前的样式并将属性设置回其初始状态。
规范中定义的初始值可能会有所不同。一些初始值具有直观意义,而其他值可能看起来任意。例如,float: none
和background-color: transparent
是符合共同期望的初始值的示例。然而,类似的属性display: inline
可能看起来违反直觉,但这些初始值是根据历史原因或建立起点的需要确定的。
按钮{ 颜色:初始;/* 将颜色属性重置为其初始值 */ }
请务必记住,initial
关键字仅重置其所应用的特定属性,并且不会影响其他属性或继承的值。另请注意,规范中定义的初始值可能并不总是与所需或预期的行为一致。
重置:全面重置
关键字unset
是一个强大的工具,可让您全面重置 CSS 属性。inherit
它结合了和关键字的功能initial
,提供了更灵活的重置选项。
对于非继承属性,unset
其工作方式与关键字类似initial
。它将属性重置为其 CSS 规范中定义的初始值。这可确保该属性重新开始,而不会受到任何先前样式的影响。
div { 边距:未设置;/* 将 margin 属性重置为其初始值 */ }
但是,对于继承属性,unset
行为有所不同。不是将属性重置为其初始值,unset
而是恢复属性的自然行为,其中包括从父元素继承值。
p { 颜色:未设置;/* 允许颜色属性从其父级继承 */ }
在此示例中,<p>
元素的color
属性设置为unset
,使其能够从其父级继承颜色。如果父元素上没有定义显式颜色,则继承的默认行为将被保留。
unset
当您想要全面重置属性并考虑继承和非继承属性时,该关键字特别有用。
恢复:返回浏览器样式
该revert
关键字是 CSS 关键字系列中的最新成员。与 类似unset
,它允许您重置 CSS 属性。但是,revert
考虑到样式表的级联性质并尊重浏览器的默认样式。
当应用于属性时,revert
撤消任何先前的样式并将属性恢复为浏览器默认样式表定义的值。它本质上是将属性返回到浏览器确定的原始状态。
h1 { 字体大小:恢复;/* 将 font-size 属性恢复为浏览器的默认值 */ }
在上面的示例中,元素font-size
的属性<h1>
设置为revert
,这允许它采用浏览器默认样式表中定义的字体大小。这确保了与网页整体样式的一致性并尊重用户的偏好。
需要注意的是, 的行为revert
取决于属性是继承还是非继承,类似于关键字unset
。对于继承属性,revert
恢复自然继承行为,而对于非继承属性,则恢复为浏览器的默认值。