Div+CSS3.0网页布局案例精粹(升级版)
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

2.4 CSS中的单位和值

每个CSS属性的值均有两种指定形式:一种为指定值范围,如float属性,只可能应用left、right、none三种值;另一种为指定数值,如width能够使用0~9999px或其他数学单位来指定,除像素(px)之外,CSS还提供了许多其他类型的单位帮助进行值的定义,如表2-1所示。

表2-1 CSS中的单位

对于设计者而言,为了便于统一与修改,建议在某一类型的单位上使用同一种单位,如字体大小,在某一个网站中,根据国家习惯及设计者的习惯,统一使用px或pt;颜色也同样,在颜色设计中,建议使用十六进制颜色单位,以保证各浏览器均能解析。

2.4.1 定义颜色值

CSS提供四种方法表示RGB(三原色)值,第一种方法是使用简单的十六进制数表示,表示为6位数字:

这表示所定义的颜色应该具有红色值CC(204,80%),绿色值66(102,40%)和蓝色值FF(255,100%),这是一种较浅的淡紫色,越接近白色(#FFFFFF),颜色越淡,当混合大量蓝色和红色时,得到紫色效果。

提示

所有RGB值是基于0~255的标度进行度量的,它们通常使用十六进制计数,即使用以16为基数的数字系统,包括0、1、2、3、4、5、6、7、8、9、A、B、C、D、E和F,数字32写作20(2个16和0个1),数字111是6F(6个16和15个1)。

第二种方法是采用短十六进制表示法,即使用3位十六进制数表示,要将6位RGB代码转换为3位代码,只需将2个连续重复的字母简写为1个,代码如下:

第三种方法是提供三元RGB数字,范围为0~255,用逗号隔开。第四种方法是用百分比表示。淡紫色的写法如下:

当在CSS中设置任何颜色时(不只是color属性),可以使用这些颜色值。例如,可以用任何一种类型值设置background-color或border。

提示

要使用颜色有效地设计,需要颜色图,否则要频繁试验RGB值,可以在计算机旁边放置颜色图打印件,也可以参考电子文件,或者两者都配备。

2.4.2 定义字体

CSS所支持的字体属体主要包含字体、字号、颜色等,CSS所支持的字体属性如表2-2所示。

表2-2 CSS所支持的字体属性

由于某些原因,CSS所支持的字体属性中并不是所有属性都对中文文字产生作用,但绝大部分都可以应用到中文文字上。CSS属性的释义如下。

· color:用于设置文字的颜色。

· font-family:用于设置文字名称,使用多个名称时用逗号分隔,浏览器按照先后顺序依次使用可用字体。

· font-size:用于设置文字的尺寸。

· font-size-adjust:设置或检索用于对象中文本的字体名称序列是否强制使用同一个尺寸。

· font-style:用于设置文字样式。

· font-weight:用于设置文字的加粗样式。

· font-variant:用于设置英文文本为小型的大写字母字体。

· text-transform:用于设置英文文本的大小写方式。

· text-decoration:用于设置文本的下画线、顶画线和删除线。