CSS 变量

CSS里经常出现多个样式属性使用同一个值，可以将值存储在CSS变量，CSS样式里使用变量。以后修改变量值可统一进行修改，非常方便。

1 使用步骤

步骤1：定义变量

:root{
 --变量名:变量值;
}

:root表示根伪类，其中声明的变量，页面任何地方都可以使用。

变量名前需要两个横线。

步骤2：引用变量

选择器{
 属性名:var(--变量名)
}

通过var函数来引用变量；

变量名前也需要两个横线；

变量名要与步骤1里的变量名一致。

2 示例

例：定义网站主颜色为变量，其它地方进行引用。

<head>
    <meta charset="UTF-8" >
    <title>CSS 变量 | 关关教程</title>

    <style>
        :root{
            --primary-color:#f00;
        }

        .class1{
            color:var(--primary-color) ;
            font-size: 16px;
        }

        .class2{
            color:var(--primary-color) ;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="class1">第1段</div>
    <div class="class2">第2段</div>
</body>

3 html的style属性引用变量

<div style="color: var(--primary-color);">第3段</div>

与上述引用方法完全相同。

❮上一节 CSS 通配符选择器下一节 CSS 总结❯

第06章 CSS基础教程

CSS 变量

1 使用步骤

2 示例

3 html的style属性引用变量

html教程