自定义属性（CSS变量）

date
Mar 17, 2023
slug
deepcss-relative-customize
status
Published
tags
深入解析CSS
summary
Custom attribute
type
Post
:root {
 --main-font: Helvetica, Arial, sans-serif;
} 
p {
 font-family: var(--main-font);
}
​ 定义一个名叫–main-font 的变量。变量名前面必须有两个连字符（–），用来跟 CSS 属性区分。调用函数 var()就能使用该变量。利用该函数引用前面定义的变量–main-font。
​ 这里使用了:root 选择器，因此该变量可以在整个网页使用。
提供备用值
​ 在第一个声明里，因为–main-font 被定义为 Helvetica, Arial, sans-serif，所以使用了这个变量的值。在第二个声明里， 因为–secondary-color 是一个未定义的变量，所以使用了备用值 blue。
:root {
 --main-font: Helvetica, Arial, sans-serif;
 --brand-color: #369;
} 
p {
 font-family: var(--main-font, sans-serif);
 color: var(--secondary-color, blue);
}
​ 如果 var()函数算出来的是一个非法值，对应的属性就会设置为其初始值。比 如，如果在 padding: var(–brand-color)中的变量算出来是一个颜色，它就是一 个非法的内边距值。这种情况下，内边距会设置为 0。

© shallrise 2025