css自定义属性
利用css自定义属性实现设置主题样式,可以将有关主题(颜色、字体大小等)指定给一个变量一次,每次使用时只需将该变量作为CSS属性输入;需要改变主题样式时也只需要修改这个变量即可
- 利用
:root
选择器定义变量
:root {
--global--bgc: #f66;
--global--fz: 20px;
}
- 利用
var
关键字引入声明的变量
p {
background-color: var(--global--bgc);
font-size: var(--global--fz);
}
h1 {
background-color: var(--global--bgc);
font-size: var(--global--fz);
}
- 效果