CSS3自定义属性
Less than 1 minute
CSS3自定义属性是一种定义在 :root
参照根元素上的属性,可以被所有后代元素所继承和使用
自定义属性可以用 --
作为前缀来定义,如:--primary-color: #ff0000
定义自定义属性后,可以在任何CSS规则内使用var()
函数来引用自定义属性的值
示例:
定义一个自定义属性:
:root {
--primary-color: #ff0000;
}
使用自定义属性:
body {
background-color: var(--primary-color);
}
在上述代码中,我们定义了一个名为 --primary-color
的自定义属性,并将其值设置为红色。在 body
元素的CSS规则中,我们使用 var()
函数来引用这个自定义属性,并将其值设置为 background-color
的值,这样 body
的背景色会使用 --primary-color
自定义属性的值,即红色
使用自定义属性的好处是代码的可重用性和构建更易于维护的样式库,可以使开发者在整个网站中更容易地应用相同的样式属性