css的自定义属性

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;
}

我说的比较的简单，有兴趣的前端小伙可以关注公众号来看看。