CSS - 自定义属性

自定义属性是 CSS 中的变量，用于在样式表中存储和重用值。它们与其他编程语言中的变量相同。

在 CSS 中声明自定义属性

以下代码展示了如何在 CSS 中声明自定义属性。

:root {
    --primary-color: #3498db;
    --font-size-large: 1.5rem;
}
body{
    background-color: var(--primary-color);
    font-size: var(--font-size-large)
}

在 CSS 中使用自定义属性时，需要考虑以下几点。

您可以在样式表中的任何选择器中定义自定义属性，但如果您在**:root**选择器中定义自定义属性，则它将在整个样式表中具有作用域。
var函数用于将变量值应用于任何元素上的 CSS 属性。
CSS 不允许在媒体查询或容器查询中使用自定义属性，也不能使用它们来设置 CSS 属性或选择器的名称。
自定义属性区分大小写。

CSS 自定义属性示例

以下代码展示了在 CSS 中使用自定义属性的示例。在这里，您可以看到我们将颜色 '#0044cc' 定义为 blue，因此开发人员可以通过使用变量 blue 来重复使用此颜色。

示例

<!DOCTYPE html>
<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 代码仍然有效并在变量未定义的情况下也能工作。

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

示例

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

<!DOCTYPE html>
<html>

<head>
    <style>
        :root {
            --white-color: #f0f0f0;/* Shade for white */
            /* Custom Property for black is 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 中，自定义属性默认从父元素继承到子元素。在父元素上声明的任何变量都将可用于其所有后代，除非被覆盖。

.container {
    --main-bg-color: black;
    --text-color: white;
}

.child {
    /* Use inherited value from parent for background color*/
    background-color: var(--main-bg-color);

    /* Overrides the parent’s value for text color*/
    --text-color: lightgrey; 
    color: var(--main-bg-color); 
}

示例

以下示例演示了使用 CSS 自定义属性以及继承。

<!DOCTYPE html>
<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>

打印页面