数字

一些属性的值可以是数字,包括整数小数,这些值既可以是正数,也可以是复数,也可以为0。不过属性可能(而且通常会)先知所允许的数字范围

百分数

与数字类似,其值是一个可以计算出的实数,后面跟上一个%

颜色

命名颜色

一些常用的颜色有其自己的名字,例如red, blue, white, yellow等等。在CSS2.1中,CSS规范定义了17个颜色名。这包括HTML 4.01中定义的16个颜色,并外加一个橙色。

而事实上,大多数Web浏览器能识别多大140个颜色名,除了CSS2.1中定义的17个颜色名,其他的颜色名都在CSS3颜色规范中定义了。

函数式RGB颜色

用RGB来表示颜色是一种很常见的方法,而CSS也支持RGB颜色,其用法为rgb(),括号内用一个百分数或者是整数的三元组表示。百分数的范围在0%~100%,而整数位0~255。例如: rgb(100%, 100%,100%), rgb(255,255,255)

当三元组中的值不在允许范围内时,将按照最大值或者最小值取值,例如101%被应用为100%,而-1%被应用为0%。同理整数的应用。

无论百分数还是整数,一般都在数字部分写整数,当写的是小数的时候,浏览器一般都会进行取整运算。将对应部分的百分数乘以255再进行四舍五入,即可将百分数转换为对应的整数。

十六进制RGB颜色

另一种较为常用的技法是使用十六进制的RGB颜色,例如#FF0000(red)等等。其原理也很容易理解:将三个介于00~FF的十六进制数连起来,就可以设置一种颜色,一般语法为#RRGGBB。中间没有任何分隔符。

还有一种简便记法为三位#RGB,浏览器会自动将其转变为#RRGGBB,即每一位都会自动复制一份。

Web安全色

所谓“Web安全”颜色,是指在256色计算机系统上总能避免抖动的颜色。如果用百分数表示,每一位都是被20整除的数,如rgb(0%, 20%, 60%)。如果用0~255的整数表示,每一位要么是0,要么是被51整除的数,例如rgb(0, 51, 204)。如果采用十六进制,颜色肯定可以简写,并且每一位取值只能是0、3、6、9、C、F中的一个,例如#693等等。

长度单位

长度单位都可以是正数或者负数,有些可以用实数,有些只能是整数。其后跟着单位,如果是0则不用带单位。

这些长度单位可以被划归为两类: 绝对长度单位和相对长度单位。

绝对长度单位

与现实中类似,比较好理解。尽管在web设计中几乎很少使用绝对长度单位。有5种绝对长度单位:

  • 英寸(in)
  • 厘米(cm)
  • 毫米(mm)
  • 点(pt):标准印刷度量单位
  • 派卡(pc):印刷术语

在Web浏览器上,显示会受显示器的尺寸和分辨率影像,所以几乎不会在考虑显示在浏览器时使用绝对单位。而在考虑打印时,是可以考虑使用这种单位的。

相对长度单位

相对长度是根据与其他事物的关系来度量的。共有3中相对长度单位: em、 ex和px。px即为像素。

em和ex单位

1个“em”定义为一种给定字体的font-size值,如果一个元素的font-size为14像素,那么对于该元素,1em就等于14像素。

显然,这个值可能随元素的不同而不同。例如如果一个h1有{font-size:24px},那么当设置h1 {margin-left:1em}时,h1的左边距的值为24px。

另一方面,在设置字体大小时,em的值会相对于父元素的字体大小改变。如果在上面的h1标签内有一个small标签,设置small {font-size: 0.8em},那么这个small标签的字体大小实际为24*0.8即19.2px。

与此不同,ex是指所用字体中小写x的高度,因为不同的字体导致小写x的高度不一样,所以即使font-size相同,小写x的高度其实是不同的。

而实际上计算ex值是十分困难的,因为浏览器并不会内置字体中小写x的高度,所以一些浏览器的做法是1ex=0.5em。

像素长度

这个值与浏览器息息相关,因为放大观察浏览器的表面,你会看到它被划分成一个个由小框组成的网格,每个框就是一个像素。

那为什么像素定义为相对长度呢?在讨论像素时,CSS规范建议如果一个显示类型和设置与96ppi截然不同,浏览器应把像速度量缩放为一种“参考像素”。CSS2建议90ppi,而CSS2.1建议为96ppi,这是Windows机器常用的度量且被Safari等线代Macintosh浏览器所采纳。

一般来说,如果你声明font-size:18px,Web浏览器几乎总会在显示器上使用实际像素,不过如果采用打印机等其他输出设备,用户代理就必须将像素长度重新缩放为更合理的度量。

那么如何取舍呢?

最好的度量显然是相对度量,特别是em,因为他是最灵活的,随字体大小缩放。其次也可以使用px,它们可以更好的支持不同的显示效果。

URL

还有一些CSS效果涉及到引用其他文件,例如@import语句,background-image等,在引用时,一般格式为:url(path)。

注意,url和开始括号之间不能有空格!

关键字

某些属性要用到一些关键字来表示属性的值,例如去除下划线:text-decoration: none。这里none便是关键词。不同的属性的关键词可能会重复,但显然的,即使是相同的关键词表示的含义很可能就是不同的。

CSS2.1中有一个关键词是所有属性共有的,它就是inherit(继承),这个值的意思表示该属性与父元素的同名属性的值保持相同。

CSS2单位

有一些单位在CSS2中包含,但并没有在CSS2.1中包含。它们可能在将来版本的CSS中包含。

  • 角度值
  • 时间值
  • 频率值

小结

单位和值是非常重要的,其覆盖面很广,各种属性都在具有正确的值的情况下才能表现出相应的意义。这些单位都各有优缺点,这取决于他们在什么情况下使用。