目录

CSS变量语法

CSS变量注意事项

CSS变量默认值的使用

CSS变量特性

如何在HTML和JS中应用CSS var变量

CSS变量语法

定义：

         --变量名

使用：

         var(<--变量名>[, <默认值>]?)

命名规则：

         字母a-z、A-Z，数字0-9，连字符-，下划线_

         还可以是中文、日文、韩文...

         大小写敏感，可以是纯数字

CSS变量注意事项

注意：与Sass/Less/Stylus等预编译工具不同，变量的定义和使用只能在声明块{}里面！

CSS变量跟随CSS选择器走，因此CSS变量又称CSS自定义属性

      如果想设置CSS变量全局使用，可以设置在:root根元素        选择器上

       当存在多个同名CSS变量的时候，CSS变量的覆盖规则         由CSS选择器的权重决定

       CSS变量没有!important这种用法

       CSS属性名不支持使用变量

CSS变量默认值的使用

1、变量已定义

2、变量未定义

3、变量不合法

结论：仅限于变量未定义的时候才会使用默认值

CSS变量特性

变量相互传递特性

变量空格尾随特性

如何在HTML和JS中

应用CSS var变量

1、HTML：在style属性中设置即可

2、JS：

             设置 setProperty()

             读取 getPropertyValue()

             删除 removeProperty()

CSS Color Level 4色值新语法

#RRGGBBAA颜色表示

      其中R，G，B还是原来的十六进制表示的RGB色值，范围是00-FF；新增的AA，则表示透明度，范围也是00-FF

由于透明度范围是0%-100%，而00-FF的十进制范围是0-255，对不上，需要转换，公式如下：

#RRGGBBAA颜色也支持缩写，例如#f00f等同于#ff0000ff

百分比透明度和十六进制值对应关系表

CSS3新增色彩模式

CSS2中色彩模式有：

      RGB色彩模式（即Red、Green、BLue）

      十六进制色彩模式（简称HEX）

CSS3新增色彩模式：

      RGBA色彩模式（即RED、Green、BLue、Alpha）

      HSL色彩模式（即色调(Hue)、饱和度(Saturation)、亮度(Lightness)）

      HSLA色彩模式（即色调(Hue)、饱和度(Saturation)、亮度(Lightness)、Alpha）

         tips：色调(Hue)取值0-360，饱和度、亮度百分比0-100%表示

极致自由的新语法

1. rgb()和rgba()语法互通
2. hsl()和hsla()语法互通
3. 透明度可以使用百分比表示
4. rgb()中的数值可以是小数
5. rgb()和hsl()语法中的逗号可以忽略
6. rgba()和hsla()支持空格加斜杠语法
7. hsl()中的色调可以使用任意角度单位

but

尽管有如此多的颜色写法

却还是不支持最便捷的、无需转换的

关键字+透明度

或者

十六进制+透明度

的写法

比如：设置50%透明度的红色

我们最想要如下方式实现

background-color: red, 50%;

或者background-color: #ff0000 50%;

这个时候，CSS变量 var就可以用来造轮子了！

感谢聆听