CSS - 变量

上一页
下一页

CSS 变量是自定义属性，允许您在整个 CSS 程序中存储和重用值。CSS 变量类似于其他编程语言中的变量。

目录


 

如何在 CSS 中声明变量？

CSS 变量通常使用 :root 选择器定义。以下是声明 CSS 变量的语法

:root {
    --variable-name: value;
}

要使用 CSS 变量，请遵循以下语法

selector {
    var(--variable-name, fallback-value);
}

选择器可以是类、ID或标签。在此了解什么是选择器。

我们可以使用var函数替换任何元素上 CSS 属性的值。

CSS 不允许在媒体查询或容器查询中使用变量，也不能使用它们来设置 CSS 属性或选择器的名称。

传统方法

在这个示例中，我们将看到如何在不使用变量的情况下完成颜色和样式。在这里，您可以注意到我们正在重复指定属性值。

示例

<html lang="en">

<head>
    <style>
        body {
            background-color: #f0f0f0;
            color: #333;
            font-family: 'Arial', sans-serif;
            padding: 10px;
        }

        header {
            background-color: #0044cc;
            color: #fff;
            padding: 10px;
        }

        .container {
            background-color: #fff;
            padding: 10px;
        }
    </style>
</head>

<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    <div class="container">
        <p>
            This is a container with a background color 
            defined traditionally. Here we need to specify 
            repeating color values multiple times. 
        </p>
    </div>
</body>

</html>

使用 CSS 变量

以下代码展示了如何使用变量来避免 CSS 中的冗余。在处理现实世界应用程序中的大型代码库时，这变得更加重要。

在这里，您还可以看到我们将颜色 '#0044cc' 定义为蓝色，因此开发人员可以通过使用变量 blue 来重复使用此颜色。

示例

<html lang="en">

<head>
    <style>
        :root {
            --main-bg-color: #f0f0f0;
            --main-text-color: #333;
            --primary-font: 'Arial', sans-serif;
            --padding: 10px;
            --blue: #0044cc;
            --header-text: #fff;
            --container-bg: #fff;
        }
        
        body {
            background-color: var(--main-bg-color);
            color: var(--main-text-color);
            font-family: var(--primary-font);
            padding: var(--padding);
        }
        
        header {
            background-color: var(--blue);
            color: var(--header-text);
            padding: var(--padding);
        }
        
        .container {
            background-color: var(--container-bg);
            padding: var(--padding);
        }
    </style>
</head>

<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    <div class="container">
        <p>
            This is a container with a background color 
            defined using variables.
        </p>
    </div>
</body>

</html>

根伪类

CSS 变量在样式表的顶部使用:root伪类声明，该伪类匹配文档的根元素。这意味着使用:root选择器声明的 CSS 变量可以被文档中的任何元素使用。

CSS 变量名称区分大小写，这意味着 --pink-color 和 --Pink-color 是两个不同的变量。

步骤 1：定义自定义属性

要使用 :root 伪类声明变量，只需在变量名称前添加'--'前缀，然后设置其值。

:root {
   --pink-color: pink;
   --blue-color: blue;
}

步骤 2：在 CSS 中使用自定义属性

然后可以使用var()函数在整个 CSS 代码中使用这些变量。

.box {
   width: 400px;
   height: 200px;
   background-color: var(--pink-color);
   color: var(--blue-color);
}
.box1, .box2 {
   display: inline-block;
   background-color: var(--pink-color);
   width: 100px;
   height: 50px;
   color: var(--blue-color);
}

示例

以下示例展示了如何在十六进制和 RGB 值中定义我们自己的颜色阴影变体，将其存储在变量中并在以后重用。

<html>

<head>
    <style>
        :root {
            --white-color: #f0f0f0;
            --black-color: rgb(0, 0, 21);
        }
        .box {
            text-align: center;
            padding: 20px;
            background-color: var(--white-color);
            color: var(--black-color);
        }
        .box1, .box2 {
            display: inline-block;
            background-color: var(--black-color);
            color: var(--white-color);
            width: 100px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h2>Tutorialspoint</h2>
        <p> How to code a website using HTML and CSS </p>
        <div class="box1"> HTML </div>
        <div class="box2"> CSS </div>
    </div>
</body>

</html>

自定义属性的继承

您可以使用 CSS 变量定义可重用的 CSS 值，这些值可以由子元素继承。

步骤 1：在:root选择器中声明自定义属性。

这使变量全局化，并可供文档中的所有元素访问。

:root {
   --pink-color: pink;
}

步骤 2：使用var()函数在 CSS 中访问自定义属性。

这允许您在 box 的所有子元素中重用自定义属性。

.box {
   --box-background: var(--pink-color);
   background-color: var(--box-background);
}

步骤 3：在子元素中使用颜色。

这允许您为特定元素自定义自定义属性的值。

.box1, .box2 {
   background-color: var(--box-background);
}

示例

以下示例演示了如何将 CSS 自定义属性与继承一起使用。

<html>

<head>
    <style>
        :root {
            --white-color: #f0f0f0;
            --black-color: rgb(0, 0, 21);
        }
        .box {
            --box-background: var(--white-color);
            background-color: var(--box-background);
            text-align: center;
            padding: 20px;
        }
        .box1, .box2 {
            display: inline-block;
            background-color: var(--black-color);
            /* Box Background is defined at parent box */
            color: var(--box-background);
            width: 100px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h2>Tutorialspoint</h2>
        <p> How to code a website using HTML and CSS </p>
        <div class="box1"> HTML </div>
        <div class="box2"> CSS </div>
    </div>
</body>

</html>

CSS 变量回退值

您可以将 CSS 变量与回退值一起使用，以确保您的 CSS 代码仍然有效并在变量未定义的情况下也能工作。

CSS 回退值不用于使 CSS 自定义属性在旧版浏览器中工作。它们仅在支持 CSS 自定义属性的浏览器中用作备份，以防变量未定义或具有无效值。

示例

在下面的示例中，我们只为白色定义了颜色阴影，但也在使用黑色变量。由于我们为黑色变量定义了回退值，因此不会出现任何错误。

<html>

<head>
    <style>
        :root {
            --white-color: #f0f0f0;/* Shade for white */
            /* variable for black not defined */
        }
        .box {
            text-align: center;
            padding: 20px;
            background-color: var(--white-color, white);
            color: var(--black-color, black);
        }
        .box1, .box2 {
            display: inline-block;
            background-color: var(--black-color, black);
            color: var(--white-color, white);
            width: 100px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h2>Tutorialspoint</h2>
        <p> How to code a website using HTML and CSS </p>
        <div class="box1"> HTML </div>
        <div class="box2"> CSS </div>
    </div>
</body>

</html>

CSS 变量无效值

在下面的示例中，--red-color自定义属性的值定义为15px。这是一个无效的值，因为红色属性仅接受颜色值。

但是，浏览器将无法解析自定义属性的值，因为它无效。结果，它将简单地忽略 CSS 规则，第二个 h2 元素中的文本将保持相同的颜色。

示例

在这个示例中，即使我们使用 color 属性将 h2 的颜色设置为红色，但由于无效颜色引起的错误，使用了默认颜色黑色。

<html>

<head>
    <style>
    :root {
        /* define a invalid value for c0lor */
        --red-color: 15px;
    }
    h2 {
        /* Make color of h2 as red */
        color: red;
    }
    h2 {
        /* Use invalid color for h2, this will cause error
          and default color value (black) is used */
        color: var(--red-color);
    }
    </style>
</head>

<body>
    <h2>
        Tutorialspoint CSS Variables.
    </h2>
</body>

</html>

JavaScript 中的 CSS 变量

以下示例演示了如何使用 JavaScript 全局和本地设置 CSS 变量。

示例

<html>
<head>
    <style>
        .box {
            text-align: center;
            padding: var(--padding);
            background-color: var(--white-color);
            color: var(--black-color);
        }
        .box1, .box2 {
            display: inline-block;
            background-color: var(--black-color);
            color: var(--white-color);
            width: 100px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>Tutorialspoint</h2>
        <p>How to code a website using HTML and CSS</p>
        <div class="box1">HTML</div>
        <div class="box2">CSS</div>
    </div>

    <script>
        const root = document.documentElement;
        const boxElement = document.querySelector('.box');

        // Define a global variable
        root.style.setProperty('--padding', '20px');

        // Define variables specific to the box element
        boxElement.style.setProperty('--white-color', '#f0f0f0');
        boxElement.style.setProperty('--black-color', 'rgb(0, 0, 21)');
    </script>
</body>
</html>
打印页面
上一页
下一页
广告