CSS 函数 - var()_CSS 菜鸟教程

CSS 中的 var（） 函数可用于向自定义属性添加值，也称为 CSS 变量。除属性值外，var（） 函数不能用于属性名称、选择器或任何其他属性。这样做可能会导致语法无效或值没意义。

可能的值

var（） 函数可以具有以下值：

<custom-property-name>：表示变量/自定义属性的名称。
- 它是一个以两个破折号（--）开头的标识符。
- CSS 不会向自定义属性添加任何含义，除了声明的内容。
- 自定义属性仅对声明它的作者或用户有用。
<declaration-value>：表示变量/自定义属性的回退值。
- 当自定义属性无效时很有用。
- 回退值可以包含任何字符，但具有特殊含义的字符除外，例如换行符、不匹配的右括号（如）、}、]、顶级分号或感叹号。
- 它也可以是一个自定义属性，已使用 var（） 函数声明。

语法


var( <custom-property-name> <declaration-value>? )

CSS var（） - 在根级别声明自定义属性

以下示例演示了在根级别声明的 var（）函数的使用：


<html>
<head>
<style>
	 	:root {
	 	 	 --body-background-color: peachpuff;
	 	}

	 	div {
	 	 	 background-color: var(--body-background-color);
	 	 	 width: 300px;
	 	 	 height: 300px;
	 	 	 border: 3px solid black;
	 	}
</style>
</head>
<body>
	 	<h1>var() example</h1>
	 	<div></div>
</body>
</html>

在上面的示例中，background-color 是使用 varible （--body-background-color）声明的，并用于 div 元素，以设置 div 的背景颜色。

CSS var（） - 在更高级别声明自定义属性

即使稍后声明自定义属性，也可以获得相同的结果。因此，您可以按以下方式使用相同的示例：


<html>
<head>
<style>
	 	div {
	 	 	 background-color: var(--body-background-color);
	 	 	 width: 300px;
	 	 	 height: 300px;
	 	 	 border: 3px solid black;
	 	}

	 	:root {
	 	 	 --body-background-color: peachpuff;
	 	}
</style>
</head>
<body>
	 	<h1>var() example</h1>
	 	<div></div>
</body>
</html>

CSS var（） - 最初为自定义属性设置值

在给定的示例中，在设置了变量值的地方使用了 var（）函数，因此不使用回退值：


<html>
<head>
<style>
	 	/* title-color is set, and so the fallback value (red) will not be set 	*/
	 	.title {
	 	 	 color: var(--title-color, red);
	 	}

	 	/* text-color is set, and so the fallback value (black) will not be set 	*/
	 	.content-text {
	 	 	 color: var(--text-color,black);
	 	}

	 	div {
	 	 	 --title-color: black;
	 	 	 --text-color: blue;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <h1 class="title">Title</h1>
	 	 	 <p class="content-text">Content</p>
	 	 </div>
</body>
</html>

CSS var（） - 设置自定义属性的回退值

在给定的示例中，在未设置变量值的情况下使用 var（）函数，因此使用回退值：


<html>
<head>
<style>
	 	/* title-color is not set, and so the fallback value (red) will be set 	*/
	 	.title {
	 	 	 color: var(--title-color, red);
	 	}

	 	/* text-color is not set, and so the fallback value (black) will be set 	*/
	 	.content-text {
	 	 	 color: var(--text-color, royalblue);
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <h1 class="title">Title</h1>
	 	 	 <p class="content-text">Content</p>
	 	 </div>
</body>
</html>

CSS var（） - 使用自定义属性作为后备

在给定的示例中，在未设置变量值的情况下使用 var（）函数，因此使用另一个 var（）函数设置回退值：


<html>
<head>
<style>
	 	:root {
	 	 	 --body-background-color: peachpuff;
	 	}

	 	div {
	 	 	 background-color: var(--sample-body-color, var(--body-background-color, pink));
	 	 	 width: 300px;
	 	 	 height: 300px;
	 	 	 border: 3px solid black;
	 	}
</style>
</head>
<body>
	 	<h1>var() example</h1>
	 	<div></div>
</body>
</html>

CSS var（） - 使用在另一个文件中设置的自定义属性

以下示例演示了 var（）函数的使用，其中自定义属性是在另一个文件中设置的。在此示例中，custom1.css 和 custom2.css 是两个文件，其中包含了 CSS 样式，在 html 的 <head> 部分中提供了引用。下面显示了 css 文件以供参考：

显示的代码片段为 custom1.css，其中 var（）函数用于声明变量 --main-bg-color 作为背景颜色。


/* custom1.css */
div {
	 	background-color: var(--main-bg-color);
	 	width: 200px;
	 	height: 200px;
	 	border: 3px solid black;
}

显示的代码片段为 custom2.css，其中变量 --main-bg-color 在根级别被分配了“lightblue”值。


/* custom2.css */
:root {
	 	--main-bg-color: lightblue;
}

在下面给出的示例中，在文件的根级别分配值custom2.css变量将传递给文件中 div 元素custom1.css background-color 属性。这些 css 文件在 html 中链接，因此样式在此处应用于 div 元素。因此，div 的背景颜色是“浅蓝色”。


<html>
<head>
	 	<link rel="stylesheet" href="custom1.css" />
	 	<link rel="stylesheet" href="custom2.css" />
</head>
<body>
	 	<div></div>
</body>
</html>

<< CSS 函数 - rgb() CSS 函数 - url() >>