css样式如何设置为全局变量

在CSS中设置全局变量可以使用CSS的变量（Variables）特性，也称为CSS自定义属性（Custom Properties）。使用CSS变量可以将一些常用的样式值设置为全局变量，方便在整个网站中重复使用，同时也方便对全局样式进行集中管理和修改。

以下是设置CSS全局变量的示例代码：

:root {
  --main-color: #007bff;
  --font-size: 16px;
}

body {
  color: var(--main-color);
  font-size: var(--font-size);
}

h1 {
  color: var(--main-color);
  font-size: calc(var(--font-size) * 2);
}

在这个示例中，我们使用:root伪类来定义全局变量，其中--main-color和--font-size是我们自定义的变量名称，值可以是颜色、长度或其他CSS属性值。在body和h1选择器中，我们使用var()函数来引用这些全局变量，这样可以避免在样式中重复定义颜色和字体大小，使得样式更加简洁。整个网站中的其他元素可以通过引用这些全局变量来使用相同的样式，如果需要修改样式，只需要修改全局变量的值即可。