30.2　颜色单位

在前面学习的内容中，也常涉及颜色值的表示，本书最常用的表示边框的颜色为red（红色），是通过颜色名来表示的。类似的，还有其他表示方式一样可以表示颜色值。在计算机中用来表示颜色单位的有：RGB表示法rgb（RGB）、颜色名称表示法和#RRGGBB十六进制正整数表示法，以下是各表示法的说明。

RGB表示法如下。

R：红色值。正整数|百分数

G：绿色值。正整数|百分数

B：蓝色值。正整数|百分数

以上三个参数，正整数值的取值范围为：0～255，百分数值的取值范围为：0.0%～100.0%，超出范围的数值将被截取其最接近的取值极限。如rgb（10，20%，30%）表示一种颜色。

颜色名称表示法是直接用颜色表示，很直观，但表示的颜色有限。如红色用red，白色用white，绿色用green。下面是能用颜色名称表示的颜色。

Black, White, Red, Yellow, Lime, Aqua, Blue, Fuchsia, Gray, Silver, Maroon，

Olive, Green, Teal, Navy Purple。

RRGGBB十六进制正整数表示法如下。

❑RR：红色值。十六进制正整数

❑GG：绿色值。十六进制正整数

❑BB：蓝色值。十六进制正整数

以上三个参数，取值范围为：00～FF，参数必须是两位数。对于只有一位的，应在前面补零。代码30.2表示颜色单位在网页中的应用。

代码30.2　源代码\第30章\颜色单位.html

———————————————文件名：颜色单位.html——————————————-

01 ＜html＞

02 ＜head＞

03 ＜title＞颜色单位＜/title＞

04 ＜style type="text/css"＞

05 div

06 {

07 /设置层标签的宽、高和漂移/

08 /所有层宽为100像素/

09 width：100px；

10 /所有层高为100像素/

11 height：100px；

12 /外补丁为5像素/

13 margin：5px；

14 /向左漂移/

15 float：left；

16 }

17 #color1

18 {

19 /用rgb来表示颜色值/

20 background：rgb（12%，120，120）；

21 border：1px solid rgb（152，50%，20%）；

22 }

23 #color2

24 {

25 /用颜色名称来表示颜色值/

26 background：blue；

27 border：1px solid red；

28 }

29 #color3

30 {

31 /用16进制表示颜色值/

32 background：#cccccc；

33 border：1px solid#bb00dd；

34 }

35 ＜/style＞

36 ＜/head＞

37 ＜body＞

38 ＜div id="color1"＞

39 这里背景的颜色为rgb（12%，120，120），边框为rgb（152，50%，20%）。

40 ＜/div＞

41 ＜div id="color2"＞

42 这里背景颜色为blue，边框颜色为red。

43 ＜/div＞

44 ＜div id="color3"＞

45 这里背景为#cccccc，边框为#bb00dd。

46 ＜/div＞

47 ＜/body＞

48 ＜/html＞

【代码解析】代码第38～46行用3个大小相同的层表示不同的颜色单位用法，设置参数不同所表达的颜色也不一样。代码第17～22行为第1层，用rgb表示法，背景颜色设置为（12%，120，120），而边框也用rgb表示，其值为（152，50%，20%）；在代码第29～34行的第2层中，用颜色值表示法，背景颜色用blue，而边框颜色设置为红色；最后，代码第23～28为第3层，设置的背景颜色为#cccccc，而边框颜色值为#BB00DD，这些层的效果如图30.2所示。

图　30.2　颜色单位

注意　用#RRGGBB表示时，前面有“#”，而用颜色名称表示时，没有前面的“#”，同时用RGB表示时，别忘了写rgb。