css的自定义属性(基础篇)
今天早上坐车的时候看的微信公众号看到的文章 有需要的可以关注一下 前端早读课
设定一个值,任何值都可以使用。
** css自定义属性:简单来说是开发者可以自主命名和使用css样式。**
1.自定义属性以 --为空头
.foo{
--theme-color:gray;
}
2.使用 var()
.button{
background-color:var(--theme-color);
}
//但是如果这样写会无效
.foo{
color:yellow;
--theme-color:gray;
}
.button{
background-color:var(--theme-color);
}
//.foo的字体颜色是由color来决定的,但是--theme-color 对.foo是无效的
3.缺省值
如果开发者没有定义–theme-color这个变量,那么 var ()可以接受第二个参数作为缺省值。(保持一个写缺省值的好习惯)
//把red作为一个缺省值。
.button{
background-color:var(--theme-color,red);
}
4.设置为全局变量 (伪元素的使用)
//把red作为一个缺省值。
:root{
--theme-color:gray;
}