CSS(Cascading Style Sheet,层叠样式表)是一种格式化网页的标准方式,它扩展了 HTML 的功能,使网页设计者能够以更有效的设置网页格式。
6.1.2 CSS的属性单位
6.1.2.1 长度单位
在CSS中用于描述长度的单位包括:
- cm 厘米
- mm 毫米
- em 当前字体中m字母的宽度
- ex 当前字体中x字母的高度
- in 英寸
- pc 1pc=12点
- pt 点,1pt=1/72英寸
- px 像素
6.1.2.2 百分比单位
在CSS中除了可以使用绝对数来指定单位(如上面所介绍的),还可以用相对数来指定单位。例如:
P{line-height:150%}
表示该段行高是标准行高的1.5倍。
6.1.2.3 颜色
层叠样式表允许网页设计者使用以下方式中的一种指定颜色:
- 颜色名 直接使用标准颜色名称
- #RRGGBB 使用6位十六进制数表示颜色
- #RGB 使用3位十六进制数表示颜色,它是#RRGGBB方式的快捷方式。例如:#00FFEE可以表示为#0FE。
- grb(rrr,ggg,bbb) 使用十进制数表示颜色。
- grb(rrr%,ggg%,bbb%)使用百分数表示颜色。
6.2 CSS样式定义
样式表项的组成如下:
selector{property1:value1;property2:value2;......}
其中selector表示需要应用样式的内容,property表示由CSS标准定义的样式属性,value表示样式属性的值。
Selector 类型:HTML 标记符、用户定义的 class 类样式、自定义的 ID、虚类 等。
6.2.1 HTML标记符selector
HTML标记符是最典型的selector类型,网页设计者可以为某个或某些具体的HTML元素应用样式定义。例如:
H1{text-align:center;font-family:楷体_gb2312}
若将相同的样式应用于不同的selector,可以采用编组的方法简化样式定义。例如:
H1 {color:#ff0000}
H2 {color:#ff0000}
H3 {color:#ff0000}
可以简化为:
H1,H2,H3 {color:#ff0000}
6.2.2 具有上下文关系的HTML标记符selector
如果需要为位于某个标记符内的标记符设置特定的样式规则,则应将selector指定为具有上下文关系的HTML标记符。例如:要使位于P标记符内的CODE标记符内的B元素具有红色属性,则应使用如下格式:
P CODE B {color:red}
6.2.3 用户定义的类 selector
可以使用类(class)来为单一HTML标记符创建多个样式。其语法格式如下:
selector.classname{property:value;...}
例如:H1.rr {color:red}
然后在网页中需要处引用,所下所示:
<H1 class="rr">此标题为红色</H1>
如果要定义应用于所有标记符的类,可以直接用句点后跟类名即可。其语法格式如下:
.classname{property:value;...}
例如:.rr{color:red} , 然后在网页中需要处引用,所下所示:
<p class="rr">本段落文字为红色</P> <H1 class="rr">本标题为红色</H1> |
6.2.4 用户定义ID selector
要将一个ID样式包括在样式定义中,应以一个井号“#”作为ID名称的前缀,其语法格式如下:
#IDname{property:value;...}
定义了ID样式后,在引用该样式的标记符内使用id属性。例如:
#rr {color:red} <P id="rr">本段落文字为红色</P> <H1 id="rr">本标题为红色</H1> |
注意:使用.classname和使用#IDname这两种方式在效果上没有区别,但最好只使用其中之一,以免造成混淆。
6.2.5 虚类 selector
对于A标记符,可以用虚类的方式设置不同类型超链接的显示方式。所谓不同类型超链接,是指访问过的、未访问过的、激活的以及鼠标指针悬停于其上的4种状态的超链接。其虚类的selector如下: