CSS - 变量_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”定义为蓝色，因此开发人员可以通过使用变量蓝色来重复使用这种颜色。

例

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

<< CSS - 分页 CSS - 媒体查询 >>