Css 简明教程

CSS - Variables

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

CSS Variables are custom properties that allows you to store and reuse values throughout your CSS program. CSS variables are similar to variables in other programming languages.

How to declare a Variable in CSS?

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

CSS variables are typically defined using :root selector. Following is syntax to declare a CSS variable:

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

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

To use a CSS variable, follow the syntax:

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

选择器可以是 * class* 、 * id* 或 * tag* 。在此了解 * selectors* 是什么。

The selector can be a class, id or tag. Learn what is selectors here.

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

We can use the var function to replace values for CSS properties on any elements.

The Traditional Way

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

In this example we will see how the colors and styling done without using variable. Here you can notice that we are repetitively specifying property values.

Example

<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>

Using CSS Variables

以下代码显示了如何使用变量避免 CSS 中的冗余。在现实世界应用程序中处理大型代码库时，这会变得更有意义。

The following code shows how to use variables to avoid redundancy in CSS. This become more relevant when working on large code bases in real world application.

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

Here you can also see that we defined the color '#0044cc' as blue, So developer can repetitively use this color by using variable blue.

Example

<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>

The Root Pseudo-Class

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

CSS variables are declared at the top of the stylesheet using the :root pseudo-class, which matches the root element of the document. This means that CSS variables declared using the :root selector can be used by any element in the document.

Step-1: 定义自定义属性

Step-1: Define the custom properties

要使用 :root * pseudo-class* 声明变量，只需将 '--' 前缀添加到变量名，然后设置其值。

To declare variables using the :root pseudo-class, you simply add the '--' prefix to the variable name and then set its value.

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

Step-2: 在 CSS 中使用自定义属性

Step-2: Use the custom properties in the CSS

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

These variables can then be used throughout your CSS code using the var() function.

.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);
}

Example

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

The following example shows that how to define our own shade of color variation in hex and rgb value, store in a variable and reuse later.

<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>

Inheritance of Custom Properties

您可以使用 CSS 变量定义可被子元素继承的可重复使用的 CSS 值。

You can use CSS variables to define reusable CSS values that can be inherited by child elements.

Step - 1: 在 :root 选择器中声明自定义属性。

Step - 1: Declare the custom property in the :root selector.

这使该变量成为全局变量，并且文档中的所有元素都可以访问它。

This makes the variable global and accessible to all elements in the document.

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

Step - 2: 使用 * var()* 函数来访问 CSS 中的自定义属性。

Step - 2: Use the var() function to access the custom property in the CSS.

这使您可以在 box 的所有子元素中重复使用该自定义属性。

This allows you to reuse the custom property throughout all the children of box.

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

Step - 3: 在子元素中使用该颜色。

Step - 3: Use the color inside child.

这使您可以自定义特定元素的自定义属性值。

This allows you to customize the value of the custom property for specific elements.

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

Example

以下示例演示如何使用带有继承功能的 CSS 自定义属性。

The following example demonstrates that the use of CSS custom properties with inheritance.

<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 Variables Fallback Value

您可以将 CSS 变量与后备值结合使用，以确保您的 CSS 代码仍然有效，即使变量未定义也可以工作。

You can use CSS variables with fallback values to ensure that your CSS code is still valid and works even if the variable is not defined.

CSS 后备值不用于让旧版浏览器中的 CSS 自定义属性起作用。它们仅在支持 CSS 自定义属性的浏览器中作为后备使用，防范变量未定义或具有无效值的情况。

CSS fallback values are not used to make CSS custom properties work in older browsers. They are only used as a backup in browsers that support CSS custom properties, in case the variable is not defined or has an invalid value.

Example

在以下示例中，我们仅定义了白色颜色色调，但也使用了黑色变量。由于我们为黑色变量定义了后备值，因此没有任何错误。

In below example, we have only defined color shade for white, But are also using black variable. Since we are defining fallback-value for black color variable, there will not be any error.

<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 Variables Invalid Value

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

In below example, the --red-color custom property is defined with a value of 15px. This is an invalid value because the red color property only accepts color values.

然而，由于此值无效，因此浏览器将无法解析自定义属性的值。因此，它将直接忽略 CSS 规则，第二个 h2 元素中的文本仍保持相同的颜色。

However, the browser will not be able to resolve the value of the custom property because it is invalid. As a result, it will simply ignore the CSS rule and the text in the second h2 element will remain the same color.

Example

在此示例中，即使使用颜色属性将 h2 的颜色设置为红色，但由于无效颜色的错误，仍然使用默认的黑色。

In this example even though we are making color of h2 as red using color property, due to error caused by invalid color the default color black is used.

<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>

CSS Variables in Javascript

以下示例演示如何使用 JavaScript 来全局和局部设置 CSS 变量。

The following example demonstrates that how to use JavaScript to set CSS variables globally and locally.

Example

<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>

Css 简明教程

CSS - Variables

Table of Contents

How to declare a Variable in CSS?

The Traditional Way

Example

Using CSS Variables

Example

The Root Pseudo-Class

Example

Inheritance of Custom Properties

Example

CSS Variables Fallback Value

Example

CSS Variables Invalid Value

Example

CSS Variables in Javascript

Example