CSS 自定义属性(Custom Properties),也称为 CSS 变量,是 CSS 中一种能够保存和复用值的机制。它们与常规的 CSS 属性不同,因为它们可以在整个文档中定义一次,然后在需要的任何地方使用。
定义和语法
定义一个自定义属性使用两个连字符(--)开头,后面跟着属性名,类似于下面的示例:
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
}
在这个例子中,:root
伪类选择器表示文档根元素,通常是 <html>
元素。这里定义了两个自定义属性 --primary-color
和 --secondary-color
,分别用于存储主要颜色和次要颜色的值。
使用自定义属性
可以通过 var()
函数在任何 CSS 属性值中引用自定义属性,如下所示:
body {
background-color: var(--primary-color);
color: var(--secondary-color);
}
.button {
background-color: var(--primary-color);
color: white;
border: 2px solid var(--secondary-color);
}
在上面的例子中,var()
函数被用来引用之前定义的 --primary-color
和 --secondary-color
自定义属性。这样,当需要改变主要颜色或次要颜色时,只需要在 :root
伪类中修改定义,所有引用到这些变量的地方都会自动更新。
动态修改自定义属性
通过 JavaScript,可以动态修改自定义属性的值,例如:
document.documentElement.style.setProperty('--primary-color', 'red');
这段 JavaScript 代码会将 --primary-color
自定义属性的值设置为 red
,从而影响到所有依赖于 --primary-color
的 CSS 规则。
兼容性和注意事项
- CSS 自定义属性的兼容性良好,支持现代浏览器,包括 Chrome、Firefox、Safari 和 Edge 等。
- 使用自定义属性时,务必考虑到变量的作用域和继承规则,特别是在嵌套样式中的使用情况。
- 自定义属性的值只能通过
var()
函数引用,无法直接在属性名中使用,例如background: var(--color)
是有效的,但background: --color
是无效的。
通过合理使用 CSS 自定义属性,可以显著提升 CSS 的可维护性和灵活性,尤其是在大型项目中管理颜色、间距、字体等重复使用的值。
标签:自定义,color,primary,--,css,CSS,属性 From: https://www.cnblogs.com/jocongmin/p/18301614