正文

样式表组成(20)

CSS入门经典(第3版) 作者:(美)Ian Pouncey


2. 十六进制颜色 

十六进制是一种数制,以16个字符作为基数,用字母和数字的组合来表示。十六进制系统使用0~9表示前10个数字,用字母A~F表示后6个数字。字母A表示数字10,B表示11,C表示12,直到15,由F表示。因此,十六进制中的10相当于十进制中的16,十六进制中的FFF相当于十进制中的255。

十六进制值是表示RGB值的另一种方法。例如,#FFFFFF表示白色,用RGB表示就是255,255,255。

在CSS中,十六进制和RGB或颜色关键字一样获得支持,如下例所示: 

div {

color: #000000;

background-color: #FF0000;

border: thin solid #FFA500;

}

#000000是以十六进制表示的黑色,与RGB(0,0,0)或颜色关键字black表示的颜色一样。#FF0000是以十六进制表示的红色,在RGB中为255,0,0,颜色关键字就是red。最后,#FFA500是以十六进制表示的橙色,在RGB中为255,165,0,其颜色关键字是orange。 

3. 简写十六进制和Web安全色 

当十六进制值由3对重复的值组成时,就可以采用简写表示法,使用一个值来表示一对值。例如,表示白色的十六进制值是#FFFFFF,其中包含3对FF,所以可以简写为#FFF。

div {

background-color: #FAB;

}

在本例中,#FAB等效于#FFAABB,表示粉红色。

4. RGB颜色 

RGB表示红(Red)、绿(Green)、蓝(Blue)这3种颜色,它们是计算机显示器显示像素颜色时所使用的基本颜色。当对这3种颜色进行不同组合时,就能够创造出彩虹中的任何一种颜色。事实上,许多计算机显示器能够显示上千万种颜色,具体来说是16 777 216种颜色。CSS的RGB颜色用一种特殊的三数字语法来指定颜色,每个数字代表一个颜色通道。第一个数字是红色,第二个数字是绿色,第三个数字是蓝色。 

body {

background-color: rgb(128, 128, 128);

}

上例会生成与CSS颜色关键字gray一样的颜色。3个通道使用相同数值会形成不同的灰色,3个数值为0、0、0时是黑色,为255、255、255时是白色。 

也可以使用百分比表示RGB值:

body {

background-color: rgb(50%, 50%, 50%);

}

这样也会得到与CSS颜色关键字gray相同的颜色。


上一章目录下一章

Copyright © 读书网 www.dushu.com 2005-2020, All Rights Reserved.
鄂ICP备15019699号 鄂公网安备 42010302001612号