深入解析CSS第二章自定义属性——读书笔记

自定义属性

• 声明一个变量，为它赋一个值，然后在样式表的其它地方可以引用这个值，这样做可以减少样式表中的重复

---

例：

• 定义一个自定义属性
  变量名前面必须有两个连字符–；
  变量必须在一个声明块内声明，这里使用了：root选择器，因此该变量可以在整个网页使用
  
• 使用自定义属性
  
• 提供备用值
  var()函数接受第二个参数，它指定了备用值。如果第一个参数指定的变量未定义，那么就会使用第二个值。
  
  注意：
  如果var()函数算出来的是一个非法值，对应的属性就会设置为其初始值。比如，如果在padding: var(–brand-color)中的变量算出来是一个颜色，它就是一个非法的内边距值。这种情况下，内边距会设置为0。

---

动态改变自定义属性

• 自定义属性的意义：
  自定义属性的声明能够层叠和继承：可以在多个选择器中定义相同的变量，这个变量在网页的不同地方有不同的值。
• 例：
  可以定义一个变量为黑色，然后在某个容器中重新将其定义为白色
  
  
  

---

使用JavaScript自定义属性

• 使用JavaScript设置一个自定义属性