定义CSS属性值的难点在于单位的选用。它覆盖范围很广，从长度单位到颜色单位，再到URL地址等。单位的取舍很大程度上依赖用户的显示器和浏览器，不恰当的使用单位会给页面布局带来很多麻烦，因此属性值的设置需要网页设计师认真对待。
颜色值
颜色值包括：颜色名、百分比、数字和十六进制数值。
- 使用颜色名是最简单的方法。虽然目前已经命名的颜色约有184种，但真正被各种浏览器支持，并且作为CSS规范推荐的颜色名称只有16种，如表2.1所示。
表1 CSS规范推荐的颜色名称
| 名称 | 颜色 | 名称 | 颜色 | 名称 | 颜色 |
|---|---|---|---|---|---|
| black | 纯黑 | silver | 浅灰 | navy | 深蓝 |
| blue | 浅蓝 | green | 深绿 | lime | 浅绿 |
| teal | 靛青 | aqua | 天蓝 | maroon | 深红 |
| red | 大红 | purple | 深紫 | fuchsia | 品红 |
| olive | 褐黄 | yellow | 明黄 | gray | 深灰 |
| white | 亮白 |
不建议在网页中使用颜色名，特别是大规模的使用，避免有些颜色名不被浏览器解析，或者不同浏览器对颜色的解释差异。
- 使用百分比。这是一种最常用的方法，例如：
color:rgb(100%,100%,100%);
这个声明将红、蓝、绿三种原色都设置为最大值，结果组合显示为白色。相反，可以设置rgb(0%,0%,0%)为黑色。三个百分值相等将显示灰色，同理哪个百分值大就偏向哪个原色。
- 使用数值。数字范围从0到255，例如：
color:rgb(255,255,255);
上面这个声明将显示白色，相反，可以设置为rgb(0,0,0)将显示黑色。三个数值相等将显示灰色，同理哪个数值大哪个原色的比重就会加大。
- 十六进制颜色。这是最常用的取色方法，例如：
color:#ffffff;
其中要在十六进制前面加一个#颜色符号。上面这个声明将显示白色，相反，可以设置#000000为黑色，用RGB来描述：
color: #RRGGBB;
从0到255，实际上十进制的255正好等于十六进制的FF，一个十六进制的颜色值等于三组这样的十六进制的值，它们按顺序的连接在一起就等于红、蓝、绿三种原色。
CSS 3新增三种颜色模式：RGBA、HSL和HSLA，我们将在后面章节详细说明。
绝对单位
绝对单位在网页中很少使用，一般多用在传统平面印刷中，但在特殊的场合使用绝对单位是很必要的。绝对单位包括：英寸、厘米、毫米、磅和pica。
- 英寸（in）：是使用最广泛的长度单位。
- 厘米（cm）：生活中最常用的长度单位。
- 毫米（mm）：在研究领域使用广泛。
- 磅（pt）：在印刷领域使用广泛，也称点。CSS也常用pt设置字体大小，12磅的字体等于六分之一英寸大小。
- pica（pc）：在印刷领域使用，1pica等于12磅，所有也称12点活字。
相对单位
相对单位与绝对单位相比显示大小不是固定的，它所设置的对象受屏幕分辨率、可视区域、浏览器设置、以及相关元素的大小等多种因素影响。
- em
em单位表示元素的字体高度，它能够根据字体的font-size属性值来确定单位的大小。
【示例1】在下面样式中定义段落文本行高为字体大小的2倍。
p{/*设置段落文本属性*/
font-size:12px;
line-height:2em;/*行高为24px*/
}
从上面样式代码中可以看出：一个em等于font-size的属性值，如果设置font-size:12pt，则line-height:2em就会等于24pt。如果设置font-size属性的单位为em，则em的值将根据父元素的font-size属性值来确定。
<div id="main">
<p>em相对长度单位使用</p>
</div>
#main {font-size:12px;}
p {font-size:2em; } /*字体大小将显示为24px*/
同理，如果父对象的font-size属性的单位也为em，则将依次向上级元素寻找参考的font-size属性值，如果都没有定义，则会根据浏览器默认字体进行换算，默认字体一般为16px。
- ex
ex单位根据所使用的字体中小写字母x的高度作为参考。在实际使用中，浏览器将通过em的值除以2得到ex的值。为什么这样计算呢？
因为x高度计算比较困难，且小写x的高度值是大写x的一半；另一个影响ex单位取值的是字体，由于不同字体的形状差异，这也导致相同大小的两段文本，但由于字体设置不同，ex单位的取值也会存在很大的差异。
- px
px单位是根据屏幕像素点来确定的。这样不同的显示分辨率就会使相同取值的px单位所显示出来的效果截然不同。
实际设计中，建议网页设计师多使用相对长度单位em，且在某一类型的单位上使用统一的单位。如设置字体大小，根据个人使用习惯，在一个网站中，可以统一使用px或em。
百分比
百分比也是一个相对单位值。百分比值总是通过另一个值来计算，一般参考父对象中相同属性的值。例如，如果父元素宽度为500px，子元素的宽度为50%，则子元素的实际宽度为250px。
百分比可以取负值，但在使用中受到很多限制，在第4章中我们会介绍如何应用百分比取负值。
URL
设置URL的值也是读者最容易糊涂的地方，URL包括绝对地址和相对地址。绝对地址一般不会出错，只要完整输入地址即可。在设置相对地址时，很多初学者容易犯错误。
【示例2】下面示例演示了如何正确设置样式表文件的相对路径。
如图1所示是一个简单的站点模拟结构，其中在根目录下存在两个文件夹images和css。在images文件夹中存放着logo.gif图像，在css文件夹中存放着style.css样式文件。想一想，在index.htm网页文件中显示logo.gif图像，该如何设置URL？
图1 站点模拟结构
第1步，把style.css导入index.htm。
<link href="css/style.css" type="text/css" rel="stylesheet" />
第2步，思考：从logo.gif到style.css的参照物是什么？是index.htm，还是style.css。显然是以style.css样式文件本身为参照物，正确的写法如下。
background:url(../images/logo.gif);
这与JavaScript用法可就截然不同了，假设在CSS文件夹中有一个.js文件需要导入到index.htm网页中，而.js文件也引用了logo.gif图像，再使用url(../images/logo.gif)就不对了，正确写法如下。
url(images/logo.gif)
因为它们的参照物不同，在浏览器中被解析地顺序和方式不同。
CSS3新类型值
CSS3新增了很多不同类型的单位值，下面列举几个比较重要和常用的单位，并简单进行说明。
- rem：相对长度单位。相对于根元素(html元素)font-size计算值的倍数。在移动网页设计中会经常用到。
- vh和vw：相对于视口的高度和宽度。例如：
h1 {font-size: 8vw;}
如果视口的宽度是200mm，那么h1元素的字号将为16mm。在移动网页设计中会经常用到。
vmax和vmin：相对于视口的宽度或高度中较大、较小的那个。例如：
h1 { font-size: 8vmin;}
如果视口的宽度是300mm，高度是200mm，那么h1元素的字号将为16mm，因为高度比宽度要小，所以计算的时候相对于高度。在移动网页设计中会经常用到。
- 角度值：角度单位包括 deg、grad、rad、turn，正常范围应在0~360deg内，例如：-10deg与350deg是等价的。角度值在CSS3动画中经常应用。在后面章节中会详细说明。
- transparent：设置为透明色。
- currentColor：根据color颜色来确定当前颜色值。
- inherit：继承祖先设置。
- initial：元素的初始值。如果重置某个属性为浏览器默认设置，那么就可以使用该值。
- unset：擦除属性的声明。
还有更多的单位值，部分比较专业，我们将在后面章节详细讲解，如渐变背景、动态内容等。其他比较偏僻的单位值，读者可以参考CSS3参考手册。