§ ITPOW >> 文档 >> CSS

ITPOW教程-CSS(4)

作者:ITPOW 来源:ITPOW 日期:2006-5-17

ITPOW教程 从用出发


前一节讲了样式表的具体应用,这一节,我们先停下来说一说样式属性值中的单位,一方面利于巩固前面的讲解,一方面更利于以后内容的理解。

在 CSS2 里规定了:长度、颜色、角度、时间、频率这几个方面的单位,但目前所有的浏览器都不支持角度、时间和频率,所以我们只讲解长度和颜色单位。

长度
长度单位分绝对长度单位、相对长度单位和百分数表示方法,绝对长度单位并不是一种好的表示方法,所以我们不推荐使用,也不作过多的介绍。请参见:

绝对长度单位
pt(point-点)、pc(pica-派卡)、in(inch-英寸)、cm(centimeter-厘米)、mm(millimeter-毫米)

相对长度单位
em、ex、px
em 常用于字体,表示相对于父级样式或对象内文本的字体尺寸。不容易理解可以先跳过。
ex 常用于字体,表示相对于字符“x”的高度,此高度通常为字体尺寸的一半。不容易理解可以先跳过。
px 常用于字体和 HTML 对象(如:table、div),表示相对于显示器屏幕分辨率而言的像素,比如 table {width:760px;},指定表格的宽度为 760 像素。

百分数表示
百分数表示字体或字体相关时意思是:当前字体大小为父级样式或对象指定的字体大小的百分之几。
百分数表示 HTML 对象的宽度和高度时意思是:当前对象相对父级对象指定的宽度和高度的百分之几。

有这么一个等值公式,当然这个公式只是一个近似值:1em = 2ex = 100%
看如下例子,可以看到三个“中国人”字体近似一样大小,这样有助于您理解 em、ex了吧。


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

颜色
颜色有三种表示方法,我们推荐第二种表示方法,所以对于第一种和第三种表示方法,您只需要作了解,知道有这么一回事即可:

1、rgb(R,G,B)
R : 红色值。正整数 或 百分数,正整数取值范围为:0-255,百分数取值范围为 :0.0%-100.0%。
G : 绿色值。正整数 或 百分数,正整数取值范围为:0-255,百分数取值范围为 :0.0%-100.0%。
B : 蓝色值。正整数 或 百分数,正整数取值范围为:0-255,百分数取值范围为 :0.0%-100.0%。
比如 div {rgb(255, 0, 0);} 表示 div 内文字颜色为 红色。
请注意,并不是所有的浏览器都支持用百分数表示。

2、#RRGGBB
这种方法是我们推荐的,也是最通用的。
RR : 红色值。十六进制正整数,取值范围为:00-FF
GG : 绿色值。十六进制正整数,取值范围为:00-FF
BB : 蓝色值。十六进制正整数,取值范围为:00-FF
比如 div {color:#FF0000;} 表示 div 内文字颜色为 红色。
如果每个颜色值的两个数字都相同,那么也可以省略为一位,比如上述的红色也可以表示为 div{color:#F00;}。

3、颜色名称
浏览器都预定有一些颜色名称,比如 div {color:red;} 表示 div 内文字颜色为 red(红色)。

相关文章