2.2 CSS常用单位

CSS中常用的单位包括颜色单位与长度单位两种，利用这些单位可以完成网页元素的搭配与网页布局的设定，如网页图片颜色的搭配、网页表格长度的设定等。

2.2.1 颜色单位

在CSS中设置颜色的方法很多，有命名颜色、RGB颜色、十六进制颜色、网络安全色几种，相较以前版本，CSS新增了HSL色彩模式、HSLA色彩模式、RGBA色彩模式。

1. 命名颜色

CSS中可以直接用英文单词命名与之相应的颜色，这种方法的优点是简单、易记、易掌握。此处预设了16种颜色以及这16种颜色的衍生色，这16种颜色是CSS规范推荐的，而且一些主流的浏览器都能够识别它们，如表2-1所示。

表2-1 CSS推荐颜色

这些颜色最初来源于基本的Windows VGA颜色，而且浏览器还可以识别这些颜色。例如，在CSS定义字体颜色时，便可以直接使用这些颜色的名称。

p{color:red}

直接使用颜色的名称，简单易记。但是，除了这16种颜色外，还可以使用其他CSS预定义颜色。多数浏览器都能够识别140多种颜色名，其中包括这16种颜色，例如，orange、PaleGreen等。

提示

在不同的浏览器中，命名颜色种类也是不同的，即使使用了相同的颜色名，它们的颜色也有可能存在差异，所以，虽然每一种浏览器都命名了大量的颜色，但是大多数颜色在其他浏览器上却是不能被识别的，而真正通用的标准颜色只有16种。

2. RGB颜色

如果要使用十进制表示颜色，则需要使用RGB颜色。十进制表示颜色，最大值为255，最小值为0。要使用RGB颜色，必须使用rgb(R,G,B)表示方法，其中R、G、B分别表示红、绿、蓝的十进制值，通过这三个值的变化结合，便可以形成不同的颜色。例如，rgb(255,0,0)表示红色，rgb(0,255,0)表示绿色，rgb(0,0,255)则表示蓝色。黑色表示为rgb(0,0,0)，白色则可以表示为rgb(255,255,255)。

RGB设置方法一般分为两种：百分比设置和直接用数值设置，例如用p标记设置颜色，有两种方法：

p{color:rgb(123,0,25)}
p{color:rgb(45%,0%,25%)}

这两种方法都是用三个值表示“红”“绿”和“蓝”三种颜色。这三种基本色的取值范围都是0~255。通过定义这三种基本色分量，可以定义出各种各样的颜色。

3. 十六进制颜色

除了CSS预定义的颜色外，设计者为了使页面色彩更加丰富，可以使用十六进制颜色。十六进制颜色的基本格式为#RRGGBB，其中R表示红色，G表示绿色，B表示蓝色。而RR、GG、BB最大值为FF，表示十进制中的255，最小值为00，表示十进制中的0。例如，#FF0000表示红色，#00FF00表示绿色，#0000FF表示蓝色。#000000表示黑色，那么白色的表示就是#FFFFFF，而其他颜色分别是通过这三种基本色的结合而形成的。例如，#FFFF00表示黄色，#FF00FF表示紫红色。

对于浏览器不能识别的颜色名称，可以使用所需颜色的十六进制值或RGB值。如表2-2所示，列出了几种常见的预定义颜色值的十六进制值和RGB值。

表2-2 颜色对照表

4. HSL色彩模式

CSS新增加了HSL颜色表现方式。HSL色彩模式是工业界的一种颜色标准，它通过对色调（H）、饱和度（S）、亮度（L）三个颜色通道的改变以及它们相互之间的叠加来获得各种颜色。这个标准几乎包括了人类视力可以感知的所有颜色，在屏幕上可以重现16 777 216种颜色，是目前运用最广泛的颜色系统之一。

在CSS3中，HSL色彩模式的表示语法如下：

hsl(<length> , <percentage> , <percentage>)

hsl()函数的三个参数说明如表2-3所示。

表2-3 HSL函数属性说明表

其使用示例如下所示。

p{color:hsl(0,80%,80%);}
p{color:hsl(80,80%,80%);}

5. HSLA色彩模式

HSLA也是CSS新增颜色模式，它是HSL色彩模式的扩展，在色相、饱和度、亮度三要素的基础上增加了不透明度参数。使用HSLA色彩模式，设计师能够更灵活地设计不同的透明效果。其语法格式如下。

hsla(<length> , <percentage> , <percentage> , <opacity>)

其中前3个参数与hsl()函数的参数的意义和用法相同，第4个参数<opacity>表示不透明度，取值在0到1之间。

使用示例如下。

p{color:hsla(0,80%,80%,0.9);}

6. RGBA色彩模式

RGBA也是CSS新增颜色模式，它是RGB色彩模式的扩展，在红、绿、蓝三原色的基础上增加了不透明度参数。其语法格式如下。

rgba(r, g , b , <opacity>)

其中r、g、b分别表示红色、绿色和蓝色三种原色所占的比重。r、g、b的值可以是正整数或者百分数，正整数值的取值范围为0~255，百分数值的取值范围为0.0%~100.0%，超出范围的数值将被截至其最接近的取值极限。注意，并非所有浏览器都支持使用百分数值。第四个参数<opacity>表示不透明度，取值在0到1之间。

使用示例如下。

p{color:rgba(0,23,123,0.9);}

7. 网络安全色

网络安全色由216种颜色组成，被认为在任何操作系统和浏览器中都是相对稳定的，也就是说显示的颜色是相同的，因此，这216种颜色被称为网络安全色。这216种颜色都是由红、绿、蓝三种基本色从0、51、102、153、204、255这六个数值中取值，组成的6×6×6种颜色。

2.2.2 长度单位

为保证页面元素能够在浏览器中完全显示，又要布局合理，就需要设定元素间的间距，以及元素本身的边界等，这都离不开长度单位的使用。在CSS中，长度单位可以被分为两类：绝对单位和相对单位。

1. 绝对单位

绝对单位用于设定绝对位置，主要有下列五种绝对单位。

1）英寸（in）

英寸对于中国设计师而言，使用比较少，它是国外常用的量度单位。1in=2.54cm，而1cm=0.394英寸。

2）厘米（cm）

厘米是常用的长度单位。它可以用来设定距离比较大的页面元素框。

3）毫米（mm）

毫米可以用来比较精确地设定页面元素距离或大小。10mm=1cm。

4）磅（pt）

磅一般用来设定文字的大小。它是标准的印刷量度，广泛应用于打印机、文字程序等。72pt=1in，也就是说等于2.54cm。另外，英寸、厘米和毫米也可以用来设定文字的大小。

5）pica（pc）

pica是另一种印刷量度。1pica=12pt，该单位也不被经常使用。

2. 相对单位

相对单位是指在量度时需要参照其他页面元素的单位值。使用相对单位所量度的实际距离可能会随着这些单位值的改变而改变。CSS提供了三种相对单位：em、ex和px。

1）em

在CSS中，em用于给定字体的font-size值，例如，一个元素字体大小为12pt，那么1em就是12pt，如果该元素字体大小改为15pt，则1em就是15pt。简单来说，无论字体大小是多少，1em总是字体的大小值。em的值总是随着字体大小的变化而变化。

例如，分别设定页面元素h1、h2和p的字体大小为20pt、15pt和10pt，各元素的左边距为1em，样式规则如下。

h1{font-size:20pt}
h2{font-size:15pt}
p{font-size:10pt}
h1,h2,p{margin-left:1em}

对于h1，1em=20pt；对于h2，1em=15pt；对于p，1em=10pt，所以em的值会随着相应元素字体大小的变化而变化。

另外，em值有时还相对于其上级元素的字体大小。例如，上级元素字体大小为20pt，设定其子元素字体大小为0.5em，则子元素显示出的字体大小为10pt。

2）ex

ex是以给定字体的小写字母“x”高度作为基准，对于不同的字体来说，小写字母“x”高度是不同的，所以ex单位的基准也不同。

3）px

px也叫像素，这是目前使用最为广泛的一种单位，1px也就是屏幕上的一个小方格，这个通常是看不出来的。由于显示器有多种不同的尺寸，它的每个小方格大小是有所差异的，所以像素单位的标准也不都是一样的。在CSS的规范中假设90px=1in，但是在通常的情况下，浏览器都会使用显示器的像素值来做标准。