1. 声明CSS变量
- 首先，在CSS中声明变量，通常在
:root伪类下进行声明，:root表示文档的根元素，在这里声明的变量可以在整个文档中使用。变量的声明使用--前缀来定义变量名，后面跟着变量的值。例如：
:root {
--main-color: blue;
--secondary-color: gray;
}
2. 在HTML元素的内联样式中使用CSS变量
- 在HTML元素的
style属性中，可以像使用普通CSS属性值一样使用声明好的CSS变量。使用var()函数来引用变量，将变量名作为参数传递给var()函数。例如：
<p style="color: var(--main-color); background-color: var(--secondary-color);">
这是一段使用了CSS变量的文字
</p>
在上述代码中，p 元素的文字颜色使用了 --main-color 变量的值蓝色，背景颜色使用了 --secondary-color 变量的值灰色。
3. 动态修改CSS变量
- 可以通过JavaScript来动态修改CSS变量的值，从而实现页面样式的动态变化。首先，通过
document.documentElement.style.setProperty()方法来设置变量的值。例如，以下JavaScript代码可以将--main-color变量的值修改为红色：
document.documentElement.style.setProperty('--main-color', 'red');
当执行这段代码时，页面中所有使用了 --main-color 变量的元素的相应样式都会发生改变。
4. 注意事项
- CSS变量的兼容性：虽然CSS变量在现代浏览器中得到了广泛支持，但在一些较旧的浏览器中可能不被支持。在实际应用中，需要考虑浏览器兼容性问题，可以使用一些CSS预处理器或JavaScript的 polyfill 库来提供对不支持CSS变量的浏览器的兼容性支持。
- 变量的作用域：CSS变量的作用域是基于级联和继承规则的。在元素上设置的内联样式中的变量会覆盖在外部CSS中声明的相同变量，而在更具体的选择器中声明的变量会覆盖在较通用选择器中声明的相同变量。了解变量的作用域规则有助于更好地组织和管理CSS变量，避免意外的样式冲突。
通过以上方法，就可以在内联样式中有效地使用CSS变量，实现更灵活、更易于维护的页面样式设计，并且能够通过JavaScript动态地控制页面的样式变化，增强页面的交互性和用户体验。
