Css 简明教程

CSS - Variables

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

How to declare a Variable in CSS?

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

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

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

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

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

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

The Traditional Way

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

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 中的冗余。在现实世界应用程序中处理大型代码库时，这会变得更有意义。

您还可以在此看到，我们将颜色“#0044cc”定义为蓝色，因此开发人员可以使用变量 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 变量可以被文档中的任何元素使用。

Step-1: 定义自定义属性

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

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

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

Example

以下示例展示了如何在十六进制和 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>

Inheritance of Custom Properties

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

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

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

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

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

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

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

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

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

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

Example

以下示例演示如何使用带有继承功能的 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 Variables Fallback Value

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

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

Example

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

<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 。这是一个无效值，因为红色颜色属性仅接受颜色值。

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

Example

在此示例中，即使使用颜色属性将 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>

CSS Variables in Javascript

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

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