CSS 变量
var() 函数用于插入 CSS 变量的值。
CSS 变量可以访问 DOM,这意味着您可以创建具有局部或全局范围的变量,使用 JavaScript 来修改变量,以及基于媒体查询来修改变量。
使用 CSS 变量的一种好方法涉及设计的颜色。您可以将它们放在变量中,而不必一遍又一遍地复制和粘贴相同的颜色。
传统方式
以下例子显示了在样式表中定义一些颜色的传统方式(通过为每个特定元素定义要使用的颜色):
实例
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #1e90ff;
}
h2 {
border-bottom: 2px solid #1e90ff;
}
.container {
color: #1e90ff;
background-color: #ffffff;
padding: 15px;
}
button {
background-color: #ffffff;
color: #1e90ff;
border: 1px solid #1e90ff;
padding: 5px;
}
</style>
</head>
<body>
<h1>传统方式</h1>
<div class="container">
<