菜鸟教程
教程 css tutorial

CSS 变量

CSS 变量（也叫自定义属性）是一种可以重复使用的值定义方式，语法简单灵活，常用于主题切换、样式统一等场景。

1. 语法说明

定义变量

CSS 变量以 -- 开头，定义在选择器中（通常是 :root）：

css 
:root {
  --primary-color: #4caf50;
  --padding-size: 16px;
}

使用变量

通过 var() 函数调用变量：

css 
button {
  background-color: var(--primary-color);
  padding: var(--padding-size);
}

2. 局部作用域

变量的作用范围受限于其定义的选择器作用域：

css 
.card {
  --card-color: #fff;
  background-color: var(--card-color);
}

3. 设置默认值

可以为变量指定默认值：

css 
color: var(--link-color, #0000ee);

CSS 变量示例

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8" />
<title>CSS 变量示例</title>
<style>
:root {
–main-bg: #e3f2fd;
–main-color: #1565c0;
–main-padding: 20px;
}


.box {
  background-color: var(--main-bg);
  color: var(--main-color);
  padding: var(--main-padding);
  font-size: 18px;
  border-radius: 8px;
  text-align: center;
  margin: 40px auto;
  width: 80%;
}



</style>
</head>


<body>
<div class="box">这是使用 CSS 变量的示例内容</div>
</body>


</html>

相关内容