使用 CSS 自定义属性

news2024/11/18 7:36:13

我们常见的网站日夜间模式的变化，其实用到了 css 自定义属性。

CSS 自定义属性（也称为 CSS 变量）是一种在 CSS 中预定义和使用的变量。它们提供了一种简洁和灵活的方式来通过多个 CSS 规则共享相同的值，使得样式更易于维护和修改。

:root {
  --main-color: #06D6A;
}

在这个例子中，我们定义了一个名为 --main-color 的 CSS 自定义属性，并将其值设置为 #06D6A。

然后，在任何需要使用这个颜色的地方，你可以使用 var() 函数来使用这个自定义属性，像这样：

body {
  background-color: var(--main-color);
}

在这个例子中，背景颜色会使用在 :root 中定义的 --main-color 属性的值，即 #06D6A。

CSS 自定义属性可以帮助你更有效地组织和复用样式，使你的 CSS 更加简洁和易于维护。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container1,
        .container2 {
            display: flex;
            margin: 0 auto;
            width: 550px;
            height: 300px;
            line-height: 300px;
            text-align: center;
            border: 1px solid #cccccc;
        }

        .container1 div,
        .container2 div {
            flex: 1;
            border: 1px solid #cccccc;
        }

        /* 定义 css变量 选择器定义变量的范围 */
        html {
            --main-color: skyblue;
        }

        .container1 div {
            /* var() 输入css变量 */
            background-color: var(--main-color);
        }

        .container2 div {
            /* var() 输入css变量 */
            color: var(--main-color);
        }
    </style>
</head>

<body>
    <div class="container1">
        <div>box1</div>
        <div>box2</div>
        <div>box3</div>
    </div>
    <div class="container2">
        <div>box4</div>
        <div>box5</div>
        <div>box6</div>
    </div>
</body>

</html>