css定义变量

作者：潮起潮落发布日期:2026-05-29 浏览:98

:root {
  --main-bg-color: #4CAF50;
  --main-text-color: #ffffff;
}

body {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
}

h1 {
  color: var(--main-text-color);
}

解释说明：

:root：选择器表示文档的根元素（即 <html> 元素），在其中定义的变量可以在整个文档中使用。
--main-bg-color 和 --main-text-color：这是两个自定义属性（也称为 CSS 变量），分别用于存储背景颜色和文本颜色的值。
var()：函数用于引用这些自定义属性的值。例如，background-color: var(--main-bg-color); 表示将背景颜色设置为 --main-bg-color 的值。

通过这种方式，可以方便地在多个地方重用相同的样式值，并且只需要在一个地方修改变量的值即可全局生效。

上一篇：css background属性

下一篇：css 背景