BG电子首页BG电子首页。这个规范给CSS引进了变量的概念开启了一种全新的基于上下文的动态样式。你可以声明一个变量为它赋一个值然后在样式表的其他地方引用这个值除了IE自定义属性已经得到各大主流浏览器的支持。

　　要定义一个自定义属性只需要像其他CSS属性那样声明即可如代码清单2-23所示。创建一个新的网页和样式表将代码清单2-23添加到样式表中。

　　这个代码清单定义了一个名叫–main-font的变量。将其值设置为一些常见的sans-serif字体。变量名前面必须有两个连字符–用来跟CSS属性区分剩下的部分可以随意命名。

　　变量必须在一个声明块内声明。这里使用了:root选择器因此该变量可以在整个网页使用稍后会解释这一点。

　　变量声明本身什么也没做我们使用时才能看到效果。将这个变量用到一个段落上就会产生如图2-13所示的结果。

　　调用函数var()就能使用该变量。利用该函数引用前面定义的变量–main-font。将代码清单2-24里的规则集添加到你的样式表中。

　　在样式表某处为自定义属性定义一个值作为“单一数据源”然后在其他地方复用它。这种方式特别适合反复出现的值比如颜色值。代码清单2-25添加了一个叫brand-color的自定义属性。在样式表中可以多次使用这个变量当你想要改变这个颜色值时只需要在一个地方修改即可。

　　var()函数接受第二个参数它指定了备用值。如果第一个参数指定的变量未定义那么就会使用第二个值。

　　说明如果var()函数算出来的是一个非法值对应的属性就会设置为其初始值。比如如果在padding:

　　var(–brand-color)中的变量算出来是一个颜色它就是一个非法的内边距值。这种情况下内边距会设置为0。

　　在前面的示例中自定义属性只不过为减少重复代码提供了一种便捷方式但是它真正的意义在于自定义属性的声明能够层叠和继承可以在多个选择器中定义相同的变量这个变量在网页的不同地方有不同的值。

　　例如可以定义一个变量为黑色然后在某个容器中重新将其定义为白色。那么基于该变量的任何样式在容器外部会动态解析为黑色在容器内部会动态解析为白色。接下来用这种特性来实现如图

　　图2-14自定义属性基于当前变量值产生了两种不同颜色的面板

　　这个面板跟之前的面板如图2-7所示类似。它的HTML标记如代码清单2-27所示。代码里的面板有两个实例一个面板在body里还有一个面板在深色的区域中。按照代码清单2-27更新HTML。

　　接下来用变量定义文字和背景颜色进而重新定义这个面板。将代码清单2-28加入你的样式表。这会将背景色设置为白色将文字设置为黑色。在实现深色面板之前我先解释一下它的工作原理。

　　首先还是在:root选择器的规则集中定义变量。这很重要如此一来这些值就可以提供给根元素整个网页下的任何元素。当根元素的后代元素使用这个变量时就会解析这里的值。

　　我们有两个面板它们看起来一样。接下来在另一个选择器中重新定义这两个变量BG电子首页。代码清单2-29定义了深色容器的样式为该容器设置了深灰色背景还有一些内边距和外边距同时也重新定义了两个变量。将代码清单2-29添加到样式表中。

　　重新加载网页会看到第二个面板有深色背景和白色文字。这是因为面板使用了这些变量它们会解析成深色容器内定义的值而不是根元素内定义的值。注意这里并没有重新定义面板样式或者给面板加上额外的类BG电子首页。

　　还可以使用JavaScript在浏览器中实时访问和修改自定义属性。本书并不是介绍JavaScript的所以只会简单介绍概念BG动态。需要你自己在JavaScript项目中实现剩下的功能。

　　代码清单2-30展示了如何访问一个元素上的属性。在网页中插入一个脚本该脚本记录了根元素的–main-bg属性值。

　　因为你可以实时改变自定义属性的值所以可以用JavaScript为–main-bg动态设置一个新值。如果将其设置为浅蓝色效果会如图2-15所示。

　　代码清单2-31给根元素上的–main-bg设置了一个新值。将这个代码清单放到

　　如果运行以上脚本所有继承了–main-bg属性的元素都会更新使用新的值。在网页中第一个面板的背景色会改为浅蓝色。第二个面板保持不变因为它依然继承了深色容器里的属性。

　　利用这种技术就可以用JavaScript实时切换网站主题或者在网页中突出显示某些元素或者实时改变任意多个元素。只需要几行JavaScript代码就可以进行更改从而影响网页上的大量元素。