HTML代码中实现CSS变量：自定义属性定义与动态样式管理
在传统的CSS开发过程中，我们经常会遇到重复定义颜色、间距等样式值的情况，一旦需要修改这些值，就需要在多个地方逐一调整，维护成本很高。CSS变量的出现很好地解决了这个问题，它允许我们在样式表中定义可复用的值，并且支持在HTML中通过内联样式动态修改，实现灵活的样式管理。
什么是CSS变量
CSS变量官方名称为“CSS自定义属性”，以--作为前缀定义，通常在:root选择器中声明全局可用的变量，也可以在局部选择器中定义仅当前作用域生效的变量。变量定义后，可以通过var()函数在样式规则中引用，实现值的统一管理和快速修改。
在HTML中定义和使用CSS变量
我们首先来看最基础的全局CSS变量定义方式，通常会把公共的变量放在:root选择器中，这样可以让整个文档的样式都能访问到这些变量。
/* 定义全局CSS变量 */
:root {
--primary-color: #2c3e50; /* 主色调 */
--secondary-color: #3498db; /* 辅助色调 */
--spacing-sm: 8px; /* 小间距 */
--spacing-md: 16px; /* 中间距 */
--border-radius: 4px; /* 圆角大小 */
}
/* 引用CSS变量 */
.header {
background-color: var(--primary-color);
padding: var(--spacing-md);
color: white;
}
.btn {
background-color: var(--secondary-color);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--border-radius);
border: none;
color: white;
cursor: pointer;
}上面的代码中，我们在:root里定义了5个全局CSS变量，然后在.header和.btn的样式规则中通过var()函数引用这些变量。如果后续需要修改主色调，只需要修改--primary-color的值，所有使用这个变量的元素样式都会自动更新，不需要逐个调整。
通过HTML内联样式动态修改变量
CSS变量不仅可以在样式表中修改，还可以直接在HTML元素的style属性中通过内联样式动态重写，这个特性让我们可以实现组件级别的样式定制，不需要额外写大量的覆盖样式。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS变量动态样式示例</title>
<style>
:root {
--card-bg: #f5f5f5;
--card-padding: 20px;
--card-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.card {
background-color: var(--card-bg);
padding: var(--card-padding);
box-shadow: var(--card-shadow);
border-radius: 8px;
max-width: 300px;
margin-bottom: 20px;
}
.card-title {
margin-top: 0;
color: #333;
}
</style>
</head>
<body>
<!-- 使用默认变量值的卡片 -->
<div class="card">
<h3 class="card-title">默认样式卡片</h3>
<p>这个卡片使用全局定义的CSS变量样式</p>
</div>
<!-- 通过内联样式动态修改变量的卡片 -->
<div class="card" style="--card-bg: #e8f4fd; --card-padding: 30px;">
<h3 class="card-title">自定义样式卡片</h3>
<p>这个卡片通过内联样式修改了背景色和内边距变量</p>
</div>
</body>
</html>在这个例子中，第二个卡片通过style属性重新定义了--card-bg和--card-padding两个变量的值，由于CSS变量的作用域是“就近原则”，内联样式中定义的变量会覆盖全局:root中的同名变量，所以第二个卡片会呈现出不同的背景和内边距效果，而其他样式比如阴影、圆角仍然沿用全局变量的定义。
结合JavaScript动态管理CSS变量
我们还可以通过JavaScript操作元素的style属性，动态修改CSS变量的值，实现交互式的样式切换，比如常见的主题切换功能就可以用这种方式实现。
// 获取根元素
const rootElement = document.documentElement;
// 切换到深色主题的函数
function switchToDarkTheme() {
rootElement.style.setProperty('--bg-color', '#1a1a1a');
rootElement.style.setProperty('--text-color', '#ffffff');
rootElement.style.setProperty('--card-bg', '#2d2d2d');
}
// 切换到浅色主题的函数
function switchToLightTheme() {
rootElement.style.setProperty('--bg-color', '#ffffff');
rootElement.style.setProperty('--text-color', '#333333');
rootElement.style.setProperty('--card-bg', '#f5f5f5');
}配合下面的HTML和CSS代码，就可以实现点击按钮切换主题的效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>主题切换示例</title>
<style>
:root {
--bg-color: #ffffff;
--text-color: #333333;
--card-bg: #f5f5f5;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: Arial, sans-serif;
padding: 20px;
transition: background-color 0.3s, color 0.3s;
}
.card {
background-color: var(--card-bg);
padding: 20px;
border-radius: 8px;
max-width: 400px;
}
button {
margin-right: 10px;
padding: 8px 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="card">
<h2>主题切换演示</h2>
<p>点击下方按钮可以切换页面主题</p>
<button onclick="switchToLightTheme()">浅色主题</button>
<button onclick="switchToDarkTheme()">深色主题</button>
</div>
<script>
// 获取根元素
const rootElement = document.documentElement;
// 切换到深色主题的函数
function switchToDarkTheme() {
rootElement.style.setProperty('--bg-color', '#1a1a1a');
rootElement.style.setProperty('--text-color', '#ffffff');
rootElement.style.setProperty('--card-bg', '#2d2d2d');
}
// 切换到浅色主题的函数
function switchToLightTheme() {
rootElement.style.setProperty('--bg-color', '#ffffff');
rootElement.style.setProperty('--text-color', '#333333');
rootElement.style.setProperty('--card-bg', '#f5f5f5');
}
</script>
</body>
</html>CSS变量的使用注意事项
- CSS变量名区分大小写，
--color和--Color是两个不同的变量。 - 变量值可以是任意有效的CSS值，包括颜色、长度、字符串、甚至是另一个变量的引用，比如
--text-color: var(--primary-color);。 - 如果
var()引用的变量未定义，可以设置 fallback 值，语法为var(--undefined-var, #fallback-color)，当变量不存在时会使用 fallback 值。 - CSS变量不能作为CSS属性名使用，只能作为属性值，比如不能写
--prop: color; div { var(--prop): red; }，这种写法是不生效的。
通过合理使用CSS变量，我们可以大幅减少重复样式代码的编写，提升项目的可维护性，同时结合HTML内联样式和JavaScript，还能实现灵活的动态样式管理，非常适应当前组件化、主题化的前端开发需求。