10.8　设置颜色

可以修改网页里元素的颜色，如图10.8.1和图10.8.2所示。

图10.8.2　标题是深蓝色的，文本是浅紫色的。链接是深紫色的，但在访问之后会变浅，当鼠标停留时又会变成粉紫色以突出显示

body {
     color: #909;
     font: 100% "Palatino Linotype", Palatino, serif;
}
 
h1,
h2 {
     color: navy;
     font: 1.375em "Arial Black", Arial, sans-serif;
}
 
h2 {
     font-size: .9375em;
}
 
p {
     font-size: .875em;
     line-height: 1.6;
}
 
em {
     font-weight: bold;
}
 
/* 链接 */
a:link {
     color: #74269d;
     font-weight: bold;
}
 
a:visited {
     color: #909;
}
 
a:hover {
     color: #c3f;
     font-weight: bold;
}
 
/* 目录导航 */
.toc a {
     font-size: .75em;
}

图10.8.1　可以使用颜色名、十六进制数或RGB、HSL、RGBA、HSLA值定义颜色。注意，a:visited和a:hover颜色（分别为#909和#c3f）使用了第二条提示里讲到的简称

设置颜色的步骤

• 输入color:。

• 输入colorname，这里的colorname是预定义颜色中的一种（参见7.4节中的“CSS颜色”）。

或者输入#rrggbb，这里的#rrggbb是颜色的十六进制呈现。这是最常用的指定颜色的方法。

或者输入rgb(r, g, b)，其中r、g、b是0～255之间的整数，分别表示所需颜色里红、绿、蓝的量。

或者输入rgb(r%, g%, b%)，其中r、g、b分别是所需颜色里红、绿、蓝的百分数。

或者输入hsl(h, s, l)，其中h是0～360之间的数值，表示所需颜色的色相；s和l均是百分数，分别表示所需颜色的饱和度和亮度。（一般来说，对于不透明颜色，使用十六进制数或RGB值更好。）

或者输入rgba(r, g, b, a)，其中r、g、b是0～255之间的整数，分别表示所需颜色里红、绿、蓝的量；a是0～1之间的小数，表示所需颜色的alpha透明度。

或者输入hsla(h, s, l, a)，其中h是0～360之间的数值，表示所需颜色的色相；s和l均是百分数，分别表示所需颜色的饱和度和亮度；a是0～1之间的小数，表示所需颜色的alpha透明度。

提示　color属性是继承的。

提示　如果输入的r、g或b的值大于255，就会使用255。类似地，高于100%的百分数将被替换为100%。

提示　当十六进制数值由重复的数字组成时，还可以使用#rgb设置颜色。事实上，这是推荐的做法。因此，可以（且应该）将#FF0099写做#F09或#f09。

提示　十六进制数不应该用双引号包围。

提示　记住，Internet Explorer在IE9之前的版本不支持HSL、RGBA和HSLA，因此，如果要在颜色声明中使用这些记法，就需要为IE的旧版本定义备用颜色。详细说明参见7.4节中的“CSS颜色”。