CSS 自定义属性，css变量使用方法

作者：System 时间：2024年08月15日分类：所有,css 字数：627

CSS 自定义属性（也被称为 CSS 变量）可以让你创建可以在整个文档中重复使用的动态值。这些变量可以用于调整主题、状态或者是简单的布局设置。

CSS 自定义属性的使用方法如下：




:root {
  --main-bg-color: coral;
  --main-text-color: white;
}




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

如果你想要设置一个备用值，以防自定义属性未定义，可以这样做：




body {
  background-color: var(--main-bg-color, #f0f0f0);
  color: var(--main-text-color, #333333);
}

在上面的例子中，如果 --main-bg-color 或 --main-text-color 未定义，则 var() 函数会使用提供的备用值。

自定义属性可以用于创建更灵活的样式表，使得样式的调整和维护变得更加容易。