CSS 变量是自定义属性，允许您在整个 CSS 程序中存储和重用值。 CSS 变量与其他编程语言中的变量类似。
它们使用 -- 前缀进行设置，并使用 var() 函数进行访问。
要声明 CSS 变量，请使用以下语法:
--variable-name: value; 要使用 CSS 变量 var() 函数，使用以下语法:
var(--variable-name, fallback-value); 自定义属性受 CSS 级联影响，并从其父元素继承其值。
CSS 变量不能在媒体查询或容器查询中使用，但您可以使用 var() 函数替换元素上 CSS 属性中的值。您不能使用它们来设置 CSS 属性或选择器的名称，或定义媒体查询或容器查询。
CSS 变量 - 标准方法
以下示例演示了 CSS对不同类的元素应用相同的颜色 -
<html>
<head>
<style>
.box {
width: 400px;
height: 200px;
text-align: center;
line-height: 35px;
margin: 10px;
background-color: pink;
color: blue;
}
.box1 {
display: inline-block;
background-color: yellow;
width: 100px;
height: 50px;
color: blue;
}
.box2 {
display: inline-block;
background-color: yellow;
width: 100px;
height: 50px;
color: blue;
}
</style>
</head>
<body>
<div class="box">
<h2>yxjc123.com</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 变量 - :root 伪类
CSS 变量使用 :root 选择器，匹配文档的根元素。这意味着使用 :root 选择器声明的 CSS 变量可以由文档中的任何元素使用。
CSS 变量名称区分大小写，这意味着 --pink-color 和 --Pink-color 是两个不同的变量。
第 1 步:定义自定义属性
要使用 :root 伪类声明变量，只需在变量名称中添加 -- 前缀，然后设置其值.
:root {
--pink-color: pink;
--blue-color: blue;
} 第 2 步:在 CSS 中使用自定义属性
然后可以使用 var() 函数。
.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);
} 以下示例演示了 CSS 变量 --pink-color 和 --blue-color 在 :root 元素，这意味着它们是全局自定义属性，可以在 CSS 代码中的任何位置使用 -
<html>
<head>
<style>
:root {
--pink-color: pink;
--blue-color: blue;
}
.box {
width: 400px;
height: 200px;
text-align: center;
line-height: 35px;
margin: 10px;
background-color: var(--pink-color);
color: var(--blue-color);
}
.box1, .box2 {
display: inline-block;
border: 3px solid yellow;
background-color: var(--pink-color);
width: 100px;
height: 50px;
color: var(--blue-color);
}
</style>
</head>
<body>
<div class="box">
<h2>yxjc123.com</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 值。
第 1 步:在 <中声明自定义属性。 a href="/post/fiaz6c" target="_blank">:root 选择器。
这使得该变量成为全局变量并且可供文档中的所有元素访问。
:root {
--pink-color: pink;
} 第 2 步:使用 var() 函数访问 CSS 中的自定义属性。
这允许您在整个 CSS 代码中重用自定义属性。
.box {
--box-background: var(--pink-color);
background-color: var(--box-background);
} 第 3 步:使用 -- 前缀覆盖特定元素的自定义属性值。
这允许您为特定元素自定义自定义属性的值。
.box1, .box2 {
background-color: var(--box-background);
} 以下示例演示如何使用带有继承的 CSS 自定义属性 -
<html>
<head>
<style>
:root {
--pink-color: pink;
}
.box {
--box-background: var(--pink-color);
color: black;
width: 400px;
height: 200px;
text-align: center;
line-height: 35px;
margin: 10px;
background-color: var(--box-background);
}
.box1, .box2 {
color: blue;
display: inline-block;
border: 3px solid yellow;
background-color: var(--box-background);
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div class="box">
<h2>yxjc123.com</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 自定义属性的浏览器中用作备份，以防变量未定义或具有无效值。
CSS 变量回退值可以使用逗号指定。例如，var(--pink-color, blue,pink)函数定义了后备值blue,pink。后备值是出现在第一个逗号和函数末尾之间的文本。
在下面的示例中，如果未定义 --pink-color 或 --blue-color 自定义属性，则将分别使用红色和绿色的后备值。
这是一个示例 -
<html>
<head>
<style>
:root {
--pink-color: pink;
--blue-color: blue;
}
.box {
width: 400px;
height: 200px;
text-align: center;
line-height: 35px;
margin: 10px;
background-color: var(--pink-color, red);
color: var(--blue-color, green );
}
.box1, .box2 {
display: inline-block;
border: 3px solid yellow;
background-color: var(--pink-color, red);
width: 100px;
height: 50px;
color: var(--grey-color, brown);
}
</style>
</head>
<body>
<div class="box">
<h2>yxjc123.com</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 元素中的文本将保持相同的颜色。
这里是一个示例 -
<html>
<head>
<style>
:root {
--red-color: 15px;
}
h2 {
color: red;
}
h2 {
color: var(--red-color);
}
</style>
</head>
<body>
<h2>yxjc123.com CSS Variables.</h2>
</body>
</html> CSS 变量 - 中的值Javascript
以下示例演示如何使用 JavaScript 设置 CSS 自定义属性 -
<html>
<head>
<style>
.box {
width: 400px;
height: 200px;
text-align: center;
line-height: 35px;
margin: 10px;
background-color: var(--pink-color);
color: var(--blue-color);
}
.box1, .box2 {
display: inline-block;
border: 3px solid yellow;
width: 100px;
height: 50px;
color: var(--blue-color);
}
</style>
</head>
<body>
<div class="box">
<h2>yxjc123.com</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 boxElement = document.querySelector('.box');
const jsPinkColor = 'pink';
const jsBlueColor = 'blue';
boxElement.style.setProperty('--pink-color', jsPinkColor);
boxElement.style.setProperty('--blue-color', jsBlueColor);
</script>
</body>
</html>