第3章CSS基础
本章主要介绍CSS的基础知识，包括CSS样式表的使用、选择器、语法规则、常用取值与单位、常用样式和页面定位功能。在CSS常用样式部分介绍了关于背景、框模型、文本、字体、超链接、列表和表格等样式设置。最后介绍四种在页面上定位HTML元素位置的方式，包括绝对定位、相对定位、层叠效果与浮动。


本章学习目标：


 了解CSS的基本语法规则； 
 了解CSS的常见取值与单位； 
 熟悉CSS样式表的层叠优先级； 
 掌握CSS样式表的三种使用方式； 
 掌握CSS常用选择器的使用； 
 掌握CSS常用样式的使用； 
 掌握CSS的四种定位方法。



 3.1CSS样式表
CSS有三种使用方式，根据声明位置的不同分为内联样式表、内部样式表和外部样式表。
 3.1.1内联样式表
内联样式表又称为行内样式表，通过使用style属性为各种HTML元素标签添加样式，其作用范围只在指定的HTML元素内部。
基本语法格式如下： 



元素名 style="属性名称:属性值"


如果有多个属性需要同时添加，可用分号隔开，显示如下： 



元素名 style="属性名称1:属性值1; 属性名称2:属性值2; ...;属性名称N:属性值N"


例如，为某个标题标签h1设置样式： 



h1 style="color:blue; background-color:yellow"标题一/h1


该声明表示设置当前h1和/h1标签之间的文本字体颜色为蓝色，背景色为黄色。
为方便理解本节例题，表31列出了部分常用CSS属性和参考值。


表31部分常用CSS属性和参考值



CSS属性含义参考值


backgroundcolor背景色颜色名，例如，red表示红色
color前景色同上
fontsize字体大小例如，16px表示16像素大小的字体
border边框例如，3px solid blue表示宽度为3像素的蓝色实线
width宽度例如，20px表示20像素的宽度
height高度例如，100px表示100像素的高度

更多属性样式请参考3.5节。




【例31】内联样式表的用法示例
使用内联样式表可以为多个元素分别设置各自的样式。



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleCSS内联样式表/title

6./head

7.body

8.h3 style="color:red"CSS内联样式表/h3

9.hr style="border:3px dashed blue"

10.p style="font-size:40px; background-color:yellow"

11.这是一段测试文字

12./p

13./body

14./html



运行效果如图31所示。


图31CSS内联样式表的使用效果


【代码说明】
上述代码为h3标题标签设置了字体颜色为红色； 为hr水平线标签设置了线条宽度为3像素的蓝色虚线； 为p段落标签设置了字体大小为40像素，背景颜色为黄色。
内联样式表仅适用于改变少量元素的样式，不易于批量使用和维护。试想如果存在多个元素需要设置同样的样式效果，内联样式表并不能做到批量设置，只能单独为每一个元素进行style声明，这显然不是一个有效率的做法，并且会造成大量重复代码。此时可以考虑使用内部样式表解决内联样式表重复定义的问题。
 3.1.2内部样式表
内部样式表通常位于head和/head标签内部，通过使用style和/style标签标记各类样式规则，其作用范围为当前整个文档。语法格式如下： 



style

选择器{属性名称1:属性值1; 属性名称2:属性值2; ...;属性名称N:属性值N }

/style


这里的选择器可用于指定样式的元素标签，例如body、p、h1h6等均可。例如： 



h1{color:red }


该语句可以作用于整个文档，因此文档中所有的h1标题都将变为红色字体。
注： 在HTML4.01版本中会看到将style首标签写成style type="text/css"的形式，在HTML5中已简化为style。
如果属性内容较多，也可以分行写： 



style

选择器{

属性名称1:属性值1; 

属性名称2:属性值2;

...

属性名称N:属性值N

}

/style


其中最后一个属性值后面是否添加分号为可选内容。一般来说，属性之间的分号用于间隔不同的属性声明，因此最后一个属性值无须添加分号。但是为了方便后续添加新的属性，也可以为最后一个属性值添加分号，这种做法不影响CSS样式表的正常使用。
【例32】内部样式表的用法示例
使用内部样式表可以为多个元素批量设置相同的样式。



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleCSS内部样式表/title

6.style

7.h3 {

8.color: purple

9.}

10.p {

11.background-color: yellow;

12.color: blue;

13.width: 300px;

14.height: 50px

15.}

16./style

17./head

18.body

19.h3CSS内部样式表/h3

20.p

21.内部样式表可以批量改变元素样式

22./p

23.hr

24.

25.h3CSS内部样式表/h3

26.p

27.内部样式表可以批量改变元素样式

28./p

29.hr

30.




31.h3CSS内部样式表/h3

32.p

33.内部样式表可以批量改变元素样式

34./p

35./body

36./html




图32内部样式表的使用效果

运行效果如图32所示。
【代码说明】
上述代码中包含了标题元素h3和段落元素p各三个，因为标签名称相同，使用内部样式表可以为其统一设置样式。在内部样式表中，为h3标签设置了字体颜色为紫色； 为p标签设置了背景颜色为黄色、字体颜色为蓝色，宽度300像素和高度50像素。
由图32可见，内部样式表克服了内联样式表重复定义的弊端，同一种样式声明可以批量被各类元素使用，有利于样式的后期维护和扩展。
 3.1.3外部样式表
外部样式表为独立的CSS文件，其后缀名为.css或.CSS，在网页文档的首部head和/head标签之间使用link标签对其进行引用即可作用于当前整个文档。
在HTML5中，对于独立CSS文件的引用语法格式如下： 



link rel="stylesheet" href="样式文件URL"


例如，引用本地css文件夹中的test.css文件： 



link rel="stylesheet" href="css/test.css"


外部CSS文件中的内容无须使用style/style标签进行标记，其格式和内部样式表style标签内部的内容格式完全一样。
【例33】外部样式表的用法示例
在本地的CSS文件夹中新建一个名称为my.css的样式表文件，将样式要求写在该CSS文件中，并在HTML文档中对其进行引用。
HTML文档完整代码如下： 



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleCSS外部样式表/title

6.link rel="stylesheet" href="css/my.css"

7./head

8.body

9.h3CSS外部样式表/h3

10.p

11.使用了外部样式表规定元素样式




12./p

13./body

14./html


上述代码包含了标题元素h3和段落元素p各一个，并在首部标签head和/head之间使用了引用外部样式表的方式对其进行样式的规范。
外部样式表的CSS文件完整代码如下： 



h3{color:orange}

p{background-color:gray; color:white; width:300px; height:50px}




图33外部样式表的使用效果

在外部样式表中，为h3标签设置字体颜色为橙色； 为p标签设置背景颜色为灰色、字体颜色为白色、宽度300像素和高度50像素。
运行效果如图33所示。
同一个网页文档可以引用多个外部样式表。相反，当多个网页文档需要统一风格时，也可引用同一个外部样式表，该方法能极大地提高工作效率。
 3.1.4样式表层叠优先级
内联样式表、内部样式表和外部样式表可以在同一个网页文档中被引用，它们会被层叠在一起形成一个统一的虚拟样式表。如果其中有样式条件冲突，CSS会选择优先级别高的样式条件渲染在网页上。三种样式表的优先级别排序如表32所示。


表32样式表优先级别一览表



CSS样式表类型优先级别


内联样式表最高
内部样式表次高
外部样式表最低

从表32可以看出，在元素内部使用的内联样式表拥有最高优先级别，在网页文档首部的内部样式表次之，引用的外部样式表优先级别最低。这也就意味着，元素是以就近原则显示离其最近的样式规则的。
注意： 如果三种样式表均不存在，则网页文档会显示当前浏览器的默认效果。
【例34】样式表优先级测试



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleCSS样式表优先级测试/title

6.link rel="stylesheet" href="css/my.css"

7.style

8.p {

9.background-color: cyan

10.}

11./style

12./head




13.body

14.h3CSS样式表优先级测试/h3

15.p

16.该段落字体颜色来自外部样式表；背景颜色来自内部样式表

17./p

18.

19.p style="background-color:yellow"

20.该段落字体颜色来自外部样式表；背景颜色来自内联样式表

21./p

22./body

23./html


外部样式表继续使用例33的my.css文件，其完整代码如下： 



h3{color:orange}

p{background-color:gray; color:white; width:300px; height:50px}




图34样式表优先级测试效果

运行效果如图34所示。
【代码说明】
本示例代码包含了一个标题标签h3和两个段落标签p。在首部标签head和/head中对外部样式表进行了引用，同时也使用了内部样式表规定p标签的背景颜色为青色。在第二个段落标签p中设置了内联样式表规定了其背景颜色为黄色。在段落标签p的背景颜色上刻意使用了与描述有矛盾的规定要求，以便测试样式表的优先级。
在外部样式表中，为h3标签设置了字体颜色为橙色； 为p标签设置了背景颜色为灰色、字体颜色为白色，宽度300像素和高度50像素。
只在外部样式表中声明的内容有： h3标签的字体颜色为橙色； p标签的字体颜色为白色、宽300像素和高50像素。这些样式规定没有与其他声明内容起冲突，因此可以正确显示。在内部样式表中声明的内容是： p标签的背景颜色为青色。该内容与外部样式表中规定的p标签的背景颜色为灰色矛盾，根据优先级规则，会忽略外部样式表中的相关规定，优先考虑内部样式表的内容。因此第一个p元素的背景颜色显示出来的效果是内部样式表规定的颜色。第二个p元素中包含了内联样式表的声明： 规定p标签的背景颜色为黄色，此时与外部样式表、内部样式表的背景颜色要求均不一致，同样根据优先级规则，忽略其他规定直接将其背景颜色显示为黄色。
 3.2CSS选择器
本节介绍了常用的几种CSS选择器： 元素选择器、ID选择器、类选择器、属性选择器。
 3.2.1元素选择器
在CSS中最常见的选择器就是元素选择器，即采用HTML文档中的元素名称进行样式规定。元素选择器又称为类型选择器，可以用于匹配HTML文档中某一个元素类型的所有元素。
例如，匹配所有的段落元素p，并将其背景颜色声明为灰色： 



p{background:gray}


在3.1节中的各例题使用的均为元素选择器。
 3.2.2ID选择器
ID选择器使用指定的id名称匹配元素。如果需要为特定的某个元素进行样式设置，可以为其添加一个自定义的id名称，然后根据id名称进行匹配。ID选择器和元素选择器语法结构类似，但是声明时需要在id名称前面加#号。其语法规则如下： 



#id名称{属性名称1:属性值1; 属性名称2:属性值2; ...; 属性名称N:属性值N }


例如，为某个段落元素p添加id="test"： 



p id="test"这是一个段落/p


然后匹配上述id="test"的段落元素p，并将其字体颜色声明为红色： 



#test{color:red}


【例35】ID选择器的简单应用
为HTML元素设置自定义id名称，并使用ID选择器对其进行CSS样式设置。



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleID选择器的简单应用/title

6.style

7.#test {

8.background-color: cyan; /* 设置背景颜色为青色 */

9.width: 100px; /* 设置元素宽度为100像素 */

10.height: 100px /* 设置元素高度为100像素 */

11.}

12./style

13./head

14.body

15.h3ID选择器的简单应用/h3

16.hr /

17.p

18.该段落没有定义id名称

19./p

20.

21.p id="test"

22.该段落自定义了id名称为test

23./p

24./body

25./html


运行效果如图35所示。


图35ID选择器的应用效果


【代码说明】
本示例代码包含两个段落元素p，并为第二个段落元素规定了id="test"。在首部标签head和/head之间使用了ID选择器对其进行样式的规范： 要求设置背景颜色为青色，段落宽度和高度均为100像素。
由图35可见只有设置了id名称的段落元素p实现了样式效果。这种方式就是ID选择器的匹配方式，一般适用于为指定的某个HTML元素专门设置CSS样式效果。
 3.2.3类选择器
类选择器可以将不同的元素定义为共同的样式。类选择器在声明时需要在前面加“.”号，为了和指定的元素关联使用，需要自定义一个class名称。其语法规则如下： 



.class名称{属性名称1:属性值1; 属性名称2:属性值2; ...; 属性名称N:属性值N }


例如，设置一个类选择器用于设置字体为红色： 



.red{color:red}


将其使用在不同的元素上，可以显示统一的效果： 



h1 class="red"这是标题，字体颜色是红色/h1

p class="red"这是段落，字体颜色也是红色/p


类选择器也可以将相同的元素定义为不同的样式。例如，设置两个类选择器，分别用于设置字体为红色和蓝色： 



.red{color:red}

.blue{color:blue}


将其使用在相同的段落元素p中，可以显示不同的样式效果： 



p class="red"这是段落1，字体颜色是红色/p

p class="blue"这是段落2，字体颜色是蓝色/p


类选择器也可以为同一个元素设置多个样式。
例如，设置两个类选择器，分别用于设置字体为红色和设置背景颜色为蓝色： 



.red{color:red}
.bgblue{background-color:blue}


将其使用在同一个段落元素p中，可以同时应用这两种样式效果：


p class="red bgblue"本段落的字体颜色是红色，背景颜色是蓝色/p


【例36】类选择器的简单应用
为HTML元素设置自定义class名称，并使用类选择器对其进行CSS样式设置。






视频讲解


1.!DOCTYPE html

2.html

3.head

4.meta charset="utf8"

5.title类选择器的简单应用/title

6.style




7..red {

8.color: red /* 设置字体颜色为红色 */

9.}

10..blue {

11.color: blue /* 设置字体颜色为蓝色 */

12.}

13./style

14./head

15.body

16.h3 class="red"类选择器的简单应用/h3

17.hr /

18.p class="blue"

19.该段落字体将设置为蓝色

20./p

21.

22.p class="red"

23.该段落字体将设置为红色

24./p

25./body

26./html




图36类选择器的应用效果

运行效果如图36所示。
【代码说明】
本示例代码包含了一个标题元素h3和两个段落元素p，并为h3元素以及第二个p元素规定了相同的类名称class="red"； 为第一个p元素规定了类名称class="blue"。在首部标签head和/head之间使用类选择器对其进行样式的规范： 类名称为red则要求设置字体颜色为红色； 类名称为blue则要求设置字体颜色为蓝色。
由图36可见使用类选择器的匹配方式可以为设置了相同class名称的标题元素h3和段落元素p实现了相同的样式效果(字体为红色)； 而两个相同的段落元素p也可以因为类名称的不同，实现不一样的样式效果(字体为蓝色和红色)。
 3.2.4属性选择器
从CSS2开始引入了属性选择器，属性选择器允许基于元素所拥有的属性进行匹配。其语法规则如下： 



元素名称［元素属性］{属性名称1:属性值1; 属性名称2:属性值2; ...; 属性名称N:属性值N }


例如，只对带有href属性的超链接元素a设置CSS样式： 



a［href］{

color: red;

}


上述代码表示将所有带有href属性的超链接元素a设置字体颜色为红色。
也可以根据具体的属性值进行CSS样式设置，例如： 



a［href= "http://www.baidu.com"］{

color: red;

}


上述代码表示将href属性值为http://www.baidu.com的超链接设置为红色字体样式。
如果不确定属性值的完整内容，可以使用［attribute~=value］的格式查找元素，表示在属性值中包含value关键词。例如： 



a［href~="baidu"］{

color: red;

}


上述代码表示将所有href属性值中包含baidu字样的超链接设置为红色字体样式。
还可以使用［attribute|=value］的格式查找元素，表示以单词value开头的属性值。例如： 



img［alt|="flower"］{

border:1px solid red;

}


上述代码表示为所有alt属性值以flower字样开头的图像元素设置1像素宽的红色实线边框效果。
【例37】属性选择器的简单应用
使用两个图像元素img作为参照对比，仅为其中一个图像元素设置alt属性，并使用属性选择器对其进行CSS样式设置。



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.title属性选择器的简单应用/title

6.style

7.img［alt="balloon"］ {

8.border: 20px solid red;

9.}

10./style

11./head

12.body

13.h3属性选择器的简单应用/h3

14.hr /

15.h4为设置有alt属性的图像元素设置边框效果/h4

16.img src="image/balloon.jpg" alt="balloon" /

17.img src="image/balloon.jpg" /

18./body

19./html


运行效果如图37所示。


图37属性选择器的应用效果

【代码说明】
本示例HTML5代码中包含了两个图像元素img，并为其中第一个图像元素设置了alt="balloon"属性。由图37可见，使用属性选择器的匹配方式可以为设置了alt属性的图像元素单独实现样式效果： 带有20像素宽的红色实线边框； 而另外一个图像元素img因为没有设置alt属性，因此不受任何影响。
 3.3语法规则
 3.3.1注释语句
在内部样式表和外部样式表文件中均可以使用/*注释内容*/的形式为CSS进行注释，注释内容不会被显示出来。该注释以“/*”开头，以“*/”结尾，支持单行和多行注释。例如： 



p{

color:red; /*字体设置为红色*/

background-color:yellow; /*背景设置为黄色*/

}

/* 

这是一个多行注释

注释可以存在于CSS样式表的任意位置

*/


 3.3.2@charset
该语法在外部样式表文件内使用，用于指定当前样式表使用的字符编码。例如： 



@charset "utf8";


该语句表示外部样式表文件使用了UTF8的编码格式，一般写在外部样式表文件的第一行，并且需要加上分号结束。
 3.3.3!important
!important用于标记CSS样式的使用优先级，其语法规则如下： 



选择器{样式规则 !important;}


例如： 



p{

background-color: red !important;




background-color: blue;

}


上述代码表示优先使用backgroundcolor: red语句，即段落元素的背景颜色设置为红色。
注意： 该规则在同一对大括号内对IE 6.0及以下的浏览器无效。如果需要IE 6.0及以下浏览器兼容，需要将这两句样式代码分开写。修改后如下： 



p{

background-color: blue;

}

p{

background-color: red !important;

}


此时可兼容IE 6.0及以下版本的浏览器。
 3.4CSS取值与单位
 3.4.1数字
数字取值是在CSS2中规定的，有三种取值形式，如表33所示。


表33CSS数字取值类型一览表



数 字 类 型发 布 版 本解释


numberCSS2浮点数值
integerCSS2整数值
percentage
CSS2
百分比，写法为number%的形式。该数值必须有参照物才能换算出具体的数值，是一个相对值


目前所有主流浏览器都支持以上三种取值形式。
 3.4.2长度
长度取值length是在CSS2中规定的，表示方法为数值接长度单位。可用于描述文本、图像或其他各类元素的尺寸。
长度取值的单位可分为相对长度单位和绝对长度单位。相对单位的长度不是固定的，是根据参照物换算出实际长度，又可分为文本相对长度单位和视口相对长度单位。绝对长度单位的取值是固定的，例如厘米、毫米等，该取值不根据浏览器或容器的大小发生改变。
长度单位的具体情况如表34所示。


表34CSS长度单位一览表



文本相对长度单位


长 度 单 位发 布 版 本解释

emCSS1相对于当前对象内文本的字体尺寸
exCSS1相对于字符x的高度。一般为字体正常高度的一半
chCSS3数字0的宽度
rem
CSS3
相对于当前页面的根元素html规定的fontsize字体大小属性值的倍数
续表


视口相对长度单位


长 度 单 位发 布 版 本解释

vwCSS3相对于视口的宽度。视口为均分为100vw
vhCSS3相对于视口的高度。视口为均分为100vh
vmaxCSS3相对于视口的宽度或高度中的较大值。视口为均分为100vmax
vminCSS3相对于视口的宽度或高度中的较小值。视口为均分为100vmin

绝对长度单位


长 度 单 位发 布 版 本解释

cmCSS1厘米（centimeters）
mmCSS1毫米（millimeters）
qCSS3四分之一毫米（quartermillimeters），1q相当于0.25mm
inCSS1英寸（inches），1in相当于2.54cm
ptCSS1点（points），1pt相当于1/72in
pcCSS1派卡（picas），1pc相当于12pt
pxCSS1像素（pixels），1px相当于1/96in

 3.4.3角度
角度取值angle是在CSS3中规定的，可用于描述元素变形时旋转的角度。
角度单位的具体情况如表35所示。


表35CSS角度单位一览表



角 度 单 位发 布 版 本解释


degCSS3度（degrees），圆形环绕一周为360deg
gradCSS3梯度（gradians），圆形环绕一周为400grad
radCSS3弧度（radians），圆形环绕一周为2πrad
turnCSS3转、圈（turns），圆形环绕一周为1turn

 3.4.4时间
时间取值time是在CSS3中规定的，可用于描述时间长短。
时间单位有两种情况，如表36所示。


表36CSS时间单位一览表



时 间 单 位发 布 版 本解释


sCSS3秒（seconds）
msCSS3毫秒（milliseconds），1000毫秒=1秒

 3.4.5文本
文本常见有三种取值形式，如表37所示。


表37CSS文本取值类型一览表



文 本 类 型发 布 版 本解释


stringCSS2字符串
urlCSS2图像、文件或浏览器支持的其他任意资源的地址
identifierCSS2用户自定义的标识名称，例如，为元素自定义id名称等

目前所有主流浏览器都支持以上三种取值形式。
 3.4.6颜色
CSS颜色可以用于设置HTML元素的背景颜色、边框颜色、字体颜色等。本节主要介绍了网页中颜色显示的原理——RGB色彩模式和三种常用的颜色表示方式。
1. RGB色彩模式
RBG色彩模式是一种基于光学原理的颜色标准规范，也是目前运用最广泛的工业界颜色标准之一。颜色是通过对红、绿、蓝光的强弱程度不同组合叠加显示出来的，而RGB三个字母正是由红(Red)、绿(Green)、蓝(Blue)三个英文单词首字母组合而成的，代表了这三种颜色光线叠加在一起形成的各式各样的色彩。
目前的显示器大多采用了RGB色彩模式，是通过屏幕上的红、绿、蓝三色的发光极的亮度组合出不同的色彩。因此网页上的任何一种颜色都可以由一组RGB值来表示。
RGB色彩模式规定了红、绿、蓝三种光的亮度值均用整数表示，其范围是［0, 255］，共有256级，其中0为最暗，255为最亮。因此红、绿、蓝三种颜色通道的取值能组合出256×256×256=16 777 216种不同的颜色。目前主流浏览器能支持其中大约16 000多种色彩。
2. 常见颜色表示方式
在CSS中常用的颜色表示方式有： 
 使用RGB颜色的方式，例如，rgb(0,0,0)表示黑色、rgb(255,255,255)表示白色等； 
 RGB的十六进制表示法，例如，#000000表示黑色、#FFFFFF表示白色等； 
 直接使用英文单词名称，例如，red表示红色、blue表示蓝色等。
1) RGB颜色
所有浏览器都支持RGB颜色表示法，使用RGB色彩模式表示颜色值的格式如下： 



rgb(红色通道值, 绿色通道值, 蓝色通道值)


以上三个参数的取值范围可以是整数或者百分比的形式。取整数值时完全遵照RGB颜色标准为［0,255］的整数，数字越大，该通道的光亮就越强。
例如，希望获得红色，则将红色通道值设置为最大值255，绿色和蓝色通道值均设置为最小值0。写法如下： 



rgb(255, 0, 0) 


如果需要获得绿色或蓝色也是一样的原理，将相关颜色通道值设置为255，其余两个通道值设置为0即可。
因此，如果将其中某个通道颜色值设置的比其他两个值都大，则最终显示出来的颜色就偏向于这种色彩更多。当三个通道的光均为最强时，则显示出白色： rgb(255, 255, 255)。相反，当三个通道的光均为最弱时显示出黑色： rgb(0, 0, 0)。
2) 十六进制颜色
所有浏览器都支持RGB颜色的十六进制表示法，这种方法其实是把原先十进制的RGB取值转换成了十六进制，其格式如下： 



#RRGGBB


以井号(#)开头，后面跟六位数，每两位代表一种颜色通道值，分别是RR(红色)、GG(绿色)和BB(蓝色)的十六进制取值。其中最小值仍然为0，最大值为FF。例如，红色的十六进制码为#FF0000，这表示红色成分被设置为最高值，其他成分为0。
十六进制码中的字母大小写均可，因此红色对应的十六进制码也可以写成#ff0000，是同样的效果。
当每种颜色通道上的两个字符相同时，CSS还支持将#RRGGBB简写成#RGB的形式，即每个通道的十六进制取值只占一个字符。例如，红色是#FF0000，就可以简写为#F00。
3) 颜色名
一些常用的颜色可以使用相应的英文单词表示(例如，red表示红色)，目前所有浏览器均支持这种表示方式。W3C组织在CSS颜色规范中定义了17种Web标准色，如表38所示。


表38CSS颜色规定的17种标准色



颜 色 名 称中文名RGB十六进制RGB十进制


aqua/cyan青色#00FFFF0, 255, 255
black黑色#0000000, 0, 0
blue蓝色#0000FF0, 0, 255
fuchsia洋红色#FF00FF255, 0, 255
gray灰色#808080128, 128, 128
green调和绿#0080000, 128, 0
lime绿色#00FF000, 255, 0
maroon栗色#800000128, 0, 0
navy藏青色#0000800, 0, 128
olive橄榄色#808000128, 128, 0
orange橙色#FFA500255, 165, 0
purple紫色#800080128, 0, 128
red红色#FF0000255, 0, 0
silver银色#C0C0C0192, 192, 192
teal鸭翅绿#0080800, 128, 128
white白色#FFFFFF255, 255, 255
yellow黄色#FFFF00255, 255, 0


CSS3在这17种标准色的基础上又新增了130多种颜色名称，具体内容可查看附录C CSS颜色对照表。目前共计140种颜色名称，由于存在两对组异名同色的情况，实际的颜色共计138种。
【例38】CSS颜色的简单应用
对RGB、十六进制码和颜色名这三种不同的CSS颜色表示方式进行综合应用。



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleCSS颜色的简单应用/title

6.style

7./* 设置字体颜色为红色 */

8..red {

9.color: #FF0000

10.}

11./* 设置字体颜色为蓝色 */




12..blue {

13.color: rgb(0,0,255)

14.}

15./* 设置字体颜色为橙色 */

16..orange {

17.color: orange

18.} 

19./style

20./head

21.body

22.h3CSS颜色的简单应用/h3

23.hr /

24.p class="red"

25.该段落字体将设置为红色

26./p

27.

28.p class="blue"

29.该段落字体将设置为蓝色

30./p

31.

32.p class="orange"

33.该段落字体将设置为橙色

34./p

35./body

36./html




图38CSS颜色的应用效果

运行效果如图38所示。
【代码说明】
本示例代码包含了三个段落元素p，为其规定了不同的类名称分别为red、blue和orange，以便使用类选择器对相同类型的元素实现不一样的样式效果。
在首部标签head和/head之间使用类选择器对其进行样式的规范： 类名称为red则要求设置字体颜色为红色，使用了十六进制的颜色表达方式； 类名称为blue则要求设置字体颜色为蓝色，使用了RGB颜色表达方式； 类名称为orange则要求设置字体颜色为橙色，使用了英文名称的颜色表达方式。
由图38可见，使用不同的颜色表示方法均可以令HTML元素显示指定的CSS颜色。
 3.5CSS常用样式
 3.5.1CSS背景
本节将介绍如何在网页上应用背景颜色和背景图像。
和CSS背景有关的属性如表39所示。


表39CSS背景与颜色属性



属 性 名 称解释


backgroundcolor设置背景颜色
backgroundimage设置背景图像
续表


属 性 名 称解释


backgroundrepeat设置背景图像是否重复平铺
backgroundattachment背景图像是否随页面滚动
backgroundposition放置背景图像的位置
background上述所有属性的综合简写方式


1. 背景颜色backgroundcolor
CSS中的backgroundcolor属性用于为所有HTML元素指定背景颜色。例如： 



p{background-color:gray}/*将段落元素的背景颜色设置为灰色*/


如需要更改整个网页的背景颜色，则对body元素应用backgroundcolor属性。例如： 



body{background-color:cyan}/*将整个网页的背景颜色设置为青色*/


backgroundcolor属性的默认值是transparent(透明的)，因此如果没有特别规定HTML元素的背景颜色，那么该元素就是透明的，以便使其覆盖的元素为可见。关于颜色值的表达方法可参考3.4.6节的相关内容。
【例39】CSS属性backgroundcolor的简单应用
使用backgroundcolor属性为各种HTML元素设置背景颜色。






视频讲解


1.!DOCTYPE html

2.html

3.head

4.meta charset="utf8"

5.titleCSS属性background-color的应用/title

6.style

7.body {

8.background-color: silver/*将整个网页的背景颜色设置为银色*/

9.}

10.h1 {

11.background-color: red/*设置背景色为红色*/

12.}

13.h2 {

14.background-color: orange/*设置背景色为橙色*/

15.}

16.h3 {

17.background-color: yellow/*设置背景色为黄色*/

18.}

19.h4 {

20.background-color: green/*设置背景色为绿色*/

21.}

22.h5 {

23.background-color: blue/*设置背景色为蓝色*/

24.}

25.h6 {

26.background-color: purple/*设置背景色为紫色*/

27.}

28.p {

29.background-color: cyan/*设置背景色为青色*/




30.} 

31./style

32./head

33.body

34.h1CSS属性background-color的应用/h1

35.h2CSS属性background-color的应用/h2

36.h3CSS属性background-color的应用/h3

37.h4CSS属性background-color的应用/h4

38.h5CSS属性background-color的应用/h5

39.h6CSS属性background-color的应用/h6

40.p

41.CSS属性background-color的应用

42./p

43./body

44./html


运行效果如图39所示。


图39CSS颜色的应用效果


【代码说明】
上述代码包含了全部的6种标题元素h1~h6以及一个段落元素p，使用内部样式表为这些元素以及body标签设置了不同的backgroundcolor属性值。
2. 背景图像backgroundimage
CSS中的backgroundimage属性用于为元素设置背景图像。例如： 



p{background-image:url(flower.jpg)} 


上述代码表示flower.jpg图片与HTML文档在同一个目录中。
如果引用本地其他文件夹中的图片，给出对应的文件夹路径即可。例如： 



p{background-image:url(image/flower.jpg)}


上述代码表示flower.jpg图片在本地的image文件夹中，并且image文件夹与HTML文档存放于同一个目录中。
如果需要更改整个网页的背景图像，则对body元素应用backgroundimage属性。例如： 



body{ background-image:url(image/flower.jpg)}


【例310】CSS属性backgroundimage的简单应用
设置网页的背景图片和段落元素p的背景图片。



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleCSS属性background-image的应用/title

6.style

7.body {

8.background-image: url(image/sky.jpg)

9.}

10.p {

11.background-image: url(image/balloon.jpg);

12.width: 210px;

13.height: 250px

14.}

15./style

16./head

17.body

18.h3CSS属性background-image的应用/h3

19.hr /

20.!--段落元素用于显示热气球--

21.p

22.这是一个段落

23./p

24./body

25./html


运行效果如图310所示。


图310CSS颜色的应用效果图


【代码说明】
上述代码为网页设置了背景图像，图像来源于本地image文件夹中的sky.jpg图片； 并且为段落元素p设置了背景图像，图像来源于本地image文件夹中的balloon.jpg图片。
由图310可见，网页的背景图片会自动在水平和垂直两个方向上进行重复平铺的显示效果。实际上所有HTML元素的背景图片都会默认进行重复平铺。因此为达到更好的视觉效果，为段落元素p设置了与背景图片balloon.jpg一样的宽和高，即宽度210像素、高度250像素。
CSS还可以规定是否允许背景图像重复平铺，相关属性会在下一节中进行描述。
3. 背景图像平铺方式backgroundrepeat
CSS中的backgroundrepeat属性用于设置背景图像的平铺方式。如果不设置该属性，则默认背景图像会在水平和垂直方向上同时被重复平铺(如例310的运行效果)。该属性有四种不同的取值，如表310所示。


表310CSS属性backgroundrepeat取值



属性值解释属性值解释


repeatx水平方向平铺repeat水平和垂直方向都平铺
repeaty垂直方向平铺norepeat不平铺，只显示原图


【例311】CSS属性backgroundrepeat的简单应用
沿用例310中的背景图像sky.jpg设置为网页背景图片，并要求不平铺背景图片。






视频讲解


1.!DOCTYPE html

2.html

3.head

4.meta charset="utf8"

5.titleCSS属性background-image的应用/title

6.style

7.body {

8.background-image: url(image/sky.jpg);

9.background-repeat: no-repeat; /* 背景图像不平铺 */

10.}

11./style

12./head

13.body

14.h3CSS属性background-image的应用/h3

15./body

16./html


运行效果如图311所示。


图311CSS属性backgroundrepeat的应用效果


【代码说明】
和例310不同的是，本示例代码修改了内部CSS样式表中的body样式，为其新增了backgroundrepeat属性，并将属性值设置为norepeat表示不平铺图像。
但是这种方式设置的背景图像是固定的宽高，在浏览器窗口尺寸大于图像尺寸时会有多余出来的空白区域。因此可以考虑将CSS属性backgroundimage与backgroundcolor配合使用，这样背景图片无法覆盖到的空白区域将显示与图片相近的背景颜色。
4. 固定/滚动背景图像backgroundattachment
CSS中的backgroundattachment属性用于设置背景图像是固定在屏幕上还是随着页面滚动。该属性有两种取值，如表311所示。


表311CSS属性backgroundattachment取值



属性值解释


scroll背景图像随着页面滚动
fixed背景图像固定在屏幕上


【例312】CSS属性backgroundattachment的简单应用
使用本地image文件夹中的balloon.jpg作为网页背景图片，并设置为不重复平铺图像。



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleCSS属性background-attachment的应用/title

6.style

7.body {

8.background-image: url(image/balloon.jpg);

9.background-repeat: no-repeat; /* 背景图像不平铺 */

10.background-attachment: scroll; /* 背景图像随页面滚动 */

11.}

12./style

13./head

14.body

15.h3CSS属性background-attachment的应用/h3

16.hr /

17.p

18.这是段落元素，用于测试背景图片是否跟随页面滚动。

19./p

20.p

21.这是段落元素，用于测试背景图片是否跟随页面滚动。




22./p

23.p

24.这是段落元素，用于测试背景图片是否跟随页面滚动。

25./p

26.p

27.这是段落元素，用于测试背景图片是否跟随页面滚动。

28./p

29.p

30.这是段落元素，用于测试背景图片是否跟随页面滚动。

31./p

32.p

33.这是段落元素，用于测试背景图片是否跟随页面滚动。

34./p

35.p

36.这是段落元素，用于测试背景图片是否跟随页面滚动。

37./p

38.p

39.这是段落元素，用于测试背景图片是否跟随页面滚动。

40./p

41.p

42.这是段落元素，用于测试背景图片是否跟随页面滚动。

43./p

44.p

45.这是段落元素，用于测试背景图片是否跟随页面滚动。

46./p

47.p

48.这是段落元素，用于测试背景图片是否跟随页面滚动。

49./p

50.p

51.这是段落元素，用于测试背景图片是否跟随页面滚动。

52./p

53./body

54./html


运行效果如图312所示。


图312CSS属性backgroundattachment的应用效果


【代码说明】
本示例在页面上设置足够多的段落元素p以便让浏览器形成滚动条，将背景图片的backgroundattachment属性设置为scroll，测试其运行效果。
由图312可见，当backgroundattachment的属性值为scroll时，背景图像会随着页面一起滚动。可以将该属性值改为fixed重新进行测试，在页面滚动时背景图片不随着文字内容一起移动。
5. 定位背景图像backgroundposition
默认情况下，背景图像会放置在元素的左上角。CSS中的backgroundposition属性用于设置背景图像的位置，可以根据属性值的组合将图像放置到指定位置上。该属性允许使用两个属性值组合的形式对背景图像进行定位。其基本格式如下： 



background-position: 水平方向值垂直方向值


水平和垂直方向的属性值均可使用关键词、长度值或者百分比的形式表示。
1) 关键词定位
在backgroundposition属性值中可以使用的关键词共有5种，如表312所示。


表312CSS属性backgroundposition关键词



属性值解释属性值解释


center水平居中或垂直居中left水平方向左对齐显示
top垂直方向置顶显示right水平方向右对齐显示
bottom垂直方向底部显示


使用关键词组合的方式定位图像，需要从表示水平方向和垂直方向的关键词中各选一个组合使用，例如，backgroundposition:left top表示背景图像在元素左上角的位置。
关键词指示的方向非常明显，例如left和right就是水平方向专用，而top和bottom是垂直方向专用。因此关键词的组合可以不分先后顺序，例如left top和top left就表达完全相同的含义。关键词center既可表示水平居中也可表示垂直居中，组合使用时取决于另一个关键词是水平还是垂直方向，center则用于补充对立方向。
关键词定位的方式也可以简写为单个关键词的形式，这种情况会默认另一个省略的关键词为center。例如，简写形式left就等价于left center或center left，表示水平方向左对齐、垂直方向居中显示。
2) 长度值定位
长度值定位方法是以元素内边距区域左上角的点作为原点，然后解释背景图像左上角的点对原点的偏移量。例如，backgroundposition: 100px 50px指的是背景图像左上角的点距离元素左上角向右100像素同时向下50像素的位置。
3) 百分比定位
百分比数值定位方式更为复杂，是将HTML元素与其背景图像在指定的点上重合对齐，而指定的点是用百分比的方式进行解释的。
例如，backgroundposition: 0% 0%指的是背景图像左上角的点放置在HTML元素左上角原点上。而backgroundposition:66% 33%指的是HTML元素和背景图像水平方向2/3的位置和垂直方向1/3的位置上的点对齐。
一般来说，使用百分比定位方式都是用两个参数值组合定位的，第一个参数值表示水平方向的位置； 第二个参数值表示垂直方向的位置。如果简写为一个参数值，则只表示水平方向的位置，省略的垂直方向位置默认为50%。这种方法类似于关键词定位法简写时使用center补全省略的关键词。
【例313】CSS属性backgroundposition的综合应用
综合应用了关键词、百分比和长度值三种方式进行背景图像的定位。





视频讲解


1.!DOCTYPE html

2.html

3.head

4.meta charset="utf8"

5.titleCSS属性background-position的应用/title

6.style

7.div {

8.width: 660px;

9.}

10.p {

11.width: 200px;

12.height: 200px;

13.background-color: silver;

14.background-image: url(image/football.png);

15.background-repeat: no-repeat;

16.float: left;

17.margin: 10px;

18.text-align: center;

19.}

20.#p1_1 {

21.background-position: left top

22.}/* 图像位于左上角,也可以写作top left */

23.#p1_2 {

24.background-position: top

25.}/* 图像位于顶端居中，也可以写作top center或center top*/

26.#p1_3 {

27.background-position: right top

28.}/* 图像位于右上角，也可以写作top right */

29.

30.#p2_1 {

31.background-position: 0%

32.}/* 图像位于水平方向左对齐并且垂直居中，也可以写作0% 50% */

33.#p2_2 {

34.background-position: 50%

35.}/* 图像位于正中心，也可以写作50% 50% */

36.#p2_3 {

37.background-position: 100%

38.}/* 图像位于水平方向右对齐并且垂直居中，也可以写作100% 50% */

39.

40.#p3_1 {

41.background-position: 0px 100px

42.}/* 图像位于左下角 */

43.#p3_2 {

44.background-position: 50px 100px

45.}/* 图像位于底端并水平居中*/

46.#p3_3 {

47.background-position: 100px 100px

48.}/* 图像位于右下角 */

49./style

50./head

51.body

52.h3CSS属性background-position的应用/h3

53.hr /




54.div

55.p id="p1_1"left top/p

56.p id="p1_2"top/p

57.p id="p1_3"right top/p

58.

59.p id="p2_1"0%/p

60.p id="p2_2"50%/p

61.p id="p2_3"100%/p

62.

63.p id="p3_1"0px 100px/p

64.p id="p3_2"50px 100px/p

65.p id="p3_3"100px 100px/p

66./div

67./body

68./html


运行效果如图313所示。


图313CSS属性backgroundposition的应用效果


【代码说明】
本示例使用区域元素div包含了九个段落元素p，用于测试背景图像的定位。将这些段落元素分为三组，每行三个为一组使用其中一种背景图像定位方式： 第一行使用关键词定位； 第二行为百分比定位； 第三行是长度值定位。
事先为段落元素p设置统一样式： 宽和高均为200像素、背景色为银色、文字内容水平居中显示、背景图像来源于本地image文件夹中的football.png并且不重复显示。然后使用ID选择器分别为每一个段落元素设置不同的背景图像位置。
几种特殊的百分比数值可以与关键词定位法等价使用，具体内容如表313所示。


表313百分比与等价关键词定位一览表



百分比定位等价关键词定位背景图像位置


0% 0%left top或top left元素的左上角
0% 50%或0%left center或left水平方向左对齐，垂直方向居中
0% 100%left bottom或bottom left元素的左下角
50% 0%center top或top水平方向居中，垂直方向置顶
50% 50%或50%center center或center元素的正中心
50% 100%center bottom或bottom水平方向居中，垂直方向底端
100% 0%right top或top right元素的右上角
100% 50%或100%right center或right水平方向右对齐，垂直方向居中
100% 100%right bottom或bottom right元素的右下角



如果已知HTML元素的宽度和高度，可以将表313换算成长度值。由于实际情况下每个HTML元素的尺寸不一样，因此这里不再专门列出。
6. 背景简写background
CSS中的background属性可以用于概括其他五种背景属性，将相关属性值汇总写在同一行。当需要为同一个元素声明多项背景属性时，可以使用background属性进行简写。声明顺序如下： 



［background-color］［background-image］［background-repeat］［background-attachment］

［background-position］


属性值之间用空格隔开，如果其中某个属性没有规定可以省略不写。例如： 



p{

background-color:silver;

background-image:url(image/football.png);

background-repeat:no-repeat;

}


上述代码使用background属性可以简写为： 



p{ background: silver url(image/football.png) no-repeat }




图314CSS框模型的结构

其效果完全相同。
 3.5.2CSS框模型

CSS框模型又称为盒状模型(Box Model)，用于描述HTML元素形成的矩形盒子。每个HTML元素都具有元素内容、内边距、边框和外边距。CSS框模型的结构如图314所示。
图314中最内层的虚线框里面是元素的实际内容； 包围它的一圈称为内边距，内边距的最外层实线边缘称为元素的边框； 边框外层的一圈空白边称为外边距，外边距是该元素与其他元素之间保持的距离。其中最外层的虚线部分是元素外边距的临界线。默认情况下，元素的内边距、边框和外边距均为0。
在CSS中元素的宽度(width)和高度(height)属性指的是元素内容的区域，也就是图314中的最内层虚线框的宽度和高度。增加内外边距或边框的宽度不会影响元素的宽度和高度属性值，但是元素占用的总空间会增大。
1. 内边距padding
1) 设置各边内边距
在CSS中，可以使用padding属性设置HTML元素的内边距。元素的内边距也可以被理解为元素内容周围的填充物，因为内边距不影响当前元素与其他元素之间的距离，它只能用于增加元素内容与元素边框之间的距离。
padding属性值可以是长度值或者百分比值，但是不可以使用负数。
例如，为所有的段落元素p设置各边均为20像素的内边距： 



p{padding:20px}


使用百分比值表示的是该元素的上一级父元素宽度(width)的百分比。例如： 



div style="width:100px"

p style="padding:20%"这是一个段落/p

/div


此时使用了内联样式表为段落元素p设置内边距为父元素宽度的20%。该段落元素p的父元素为块级元素div，因此段落元素p各边的内边距均为是div元素宽度的20%，即20像素。
padding属性也可以为元素的各边分别设置内边距。例如： 



p{padding: 10px 20px 0 20%}


此时规定的属性值按照上右下左的顺时针顺序为各边的内边距进行样式定义。 因此本例表示上边内边距为10像素； 右边内边距为20像素； 下边内边距为0； 左边内边距为其父元素宽度的20%。
2) 单边内边距
如果只需要为HTML元素的某一个边设置内边距，可以使用padding属性的4种单边内边距属性，如表314所示。


表314CSS单边内边距属性



属 性 名 称解释属 性 名 称解释


paddingtop设置元素的上边内边距paddingleft设置元素的左边内边距
paddingbottom设置元素的下边内边距paddingright设置元素的右边内边距

例如，设置段落元素p的上边内边距为20像素： 



p{padding-top: 20px}





视频讲解


【例314】CSS属性padding的应用
测试段落元素p使用内边距属性padding的不同效果。



1.!DOCTYPE html

2.html

3.head

4.meta charset="utf8"

5.titleCSS属性padding的应用/title

6.style

7.p {

8.width: 200px;

9.margin: 10px;

10.background-color: orange;

11.}

12..style01 {

13.padding: 20px

14.}

15..style02 {

16.padding: 10px 50px

17.}

18..style03 {

19.padding-left: 50px

20.}

21./style

22./head

23.body

24.h3CSS属性padding的应用/h3

25.hr /

26.p

27.该段落没有使用内边距，默认值为0

28./p

29.p class="style01"

30.该段落元素的各边内边距均为20像素

31./p

32.p class="style02"

33.该段落元素的上下边内边距均为10像素、左右边内边距均为50像素

34./p

35.p class="style03"

36.该段落元素的左边内边距为50像素

37./p

38./body

39./html




图315CSS属性padding的应用效果


运行效果如图315所示。
【代码说明】
本示例使用了四个段落元素p进行对比试验，其中第一个段落元素没有做CSS样式设置，作为原始参考。其余三个段落元素分别进行了三种不同情况的内边距设置： 
 使用padding属性加单个属性值的形式为各边同时设置相同的内边距。
 使用padding属性加两个属性值的形式分别为上下边和左右边设置不同的内边距。
 使用paddingleft属性设置单边的内边距。
事先为段落元素p设置统一样式： 宽度为200像素、背景色为橙色以及外边距为10像素。然后使用类选择器为段落元素设置不同的padding属性值。
注意： 如果为元素填充背景颜色或背景图像，则其显示范围是边框以内的区域，包括元素实际内容和内边距。
2. 边框border
使用CSS边框的相关属性可以为HTML元素创建不同宽度、样式和颜色的边框。和CSS边框有关的属性如表315所示。
1) 边框宽度borderwidth

CSS中的borderwidth属性用于定义HTML元素边框的宽度。该属性有四种取值，如表316所示。



表315CSS边框属性一览表



属 性 名 称解释


borderwidth设置边框的宽度
borderstyle设置边框的样式
bordercolor设置边框的颜色
border上述所有属性的综合简写方式



表316CSS属性borderwidth取值



属性值解释


thin较窄的边框
medium中等宽度的边框
thick较宽的边框
像素值自定义像素值宽度的边框



注： 该属性必须和边框样式borderstyle属性一起使用方可看出效果。
【例315】CSS属性borderwidth的简单应用
实验CSS属性borderwidth不同取值的显示效果。



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleCSS属性border-width的简单应用/title

6.style

7.p {

8.width: 200px;

9.height: 50px;

10.border-style: solid;

11.}

12..thin {

13.border-width: thin

14.}

15..medium {

16.border-width: medium

17.}

18..thick {

19.border-width: thick

20.}

21..one {

22.border-width: 1px

23.}

24..ten {

25.border-width: 10px

26.}

27./style

28./head




29.body

30.h3CSS属性border-width的简单应用/h3

31.hr /

32.p class="one"

33.边框宽度为1像素

34./p

35.p class="thin"

36.边框宽度为thin

37./p

38.p class="medium"

39.边框宽度为medium

40./p

41.p class="thick"

42.边框宽度为thick

43./p

44.p class="ten"

45.边框宽度为10像素

46./p

47./body

48./html


运行效果如图316所示。


图316CSS属性borderwidth的应用效果


【代码说明】
本例中包含了五个段落元素p，并使用CSS类选择器为其设置不同的borderwidth属性值。为达到更好的显示效果，预先为所有段落元素设置了统一CSS样式： 宽200像素、高50像素，并且设置边框为实线。
2) 边框样式borderstyle
CSS中的borderstyle属性用于定义HTML元素边框的样式。该属性有10种取值，如表317所示。


表317CSS属性borderstyle取值一览表



属性值解释属性值解释


none定义无边框效果groove定义3D凹槽边框效果
dotted定义点状边框效果ridge定义3D脊状边框效果
dashed定义虚线边框效果inset定义3D内嵌边框效果
solid定义实线边框效果outset定义3D外凸边框效果
double定义双线边框效果inherit从父元素继承边框样式

【例316】CSS属性borderstyle的简单应用
实验CSS属性borderstyle不同取值的显示效果。



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleCSS属性border-style的应用/title

6.style

7.p {

8.width: 200px;

9.height: 30px;

10.border-width: 5px;

11.}

12.#p01 {

13.border-style: none

14.}

15.#p02 {

16.border-style: dotted

17.}

18.#p03 {

19.border-style: dashed

20.}

21.#p04 {

22.border-style: solid

23.}

24.#p05 {

25.border-style: double

26.}

27.#p06 {

28.border-style: groove

29.}

30.#p07 {

31.border-style: ridge

32.}

33.#p08 {

34.border-style: inset

35.}

36.#p09 {

37.border-style: outset

38.}

39./style

40./head

41.body

42.h3CSS属性border-style的应用/h3

43.hr /




44.p id="p01"无边框效果/p

45.p id="p02"点状边框效果/p

46.p id="p03"虚线边框效果/p

47.p id="p04"实线边框效果/p

48.p id="p05"双线边框效果/p

49.p id="p06"3D凹槽边框效果/p

50.p id="p07"3D脊状边框效果/p

51.p id="p08"3D内嵌边框效果/p

52.p id="p09"3D外凸边框效果/p

53./body

54./html




图317CSS属性borderstyle的应用效果

运行效果如图317所示。
【代码说明】
本例中包含了九个段落元素p，并使用ID选择器为其设置不同的borderstyle属性值。为达到更好的显示效果，预先为所有段落元素设置了统一的CSS样式： 宽200像素、高30像素，并且设置边框宽度为5像素。由图317可见，根据borderstyle不同的取值，可以获得不同的显示效果。
borderstyle属性也可以单独为元素的各边设置边框样式。例如： 



p{border-style: solid dashed dotted double}


此时规定的属性值按照上右下左的顺时针顺序为各边的边框进行样式定义。因此本例表示上边框为实线； 右边框为虚线； 下边框为点状线； 左边框为双线。
如果各边的边框有部分重复的样式值，可以使用简写的方式。如果简写为三个属性值的样式，则左右边框共用中间的属性值。例如： 



p{border-style: solid dashed double}


本例表示上边框为实线； 左右边框为虚线； 下边框为双线。
如果简写为两个属性值的样式，则上下边框共用第一个属性值，左右边框共用第二个属性值。例如： 



p{border-style: solid dashed }


本例表示上下边框均为实线，左右边框均为虚线。
3) 边框颜色bordercolor
CSS中的bordercolor属性用于定义HTML元素边框的颜色。其属性值为正常的颜色值即可，例如red表示红色边框等。关于颜色的写法可以参考3.4.6节，此处不再赘述。
【例317】CSS属性bordercolor的简单应用
实验CSS属性bordercolor不同取值的显示效果。



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleCSS属性border-color的应用/title

6.style

7.p {

8.width: 200px;

9.height: 30px;

10.border-width: 10px;

11.border-style: solid;

12.}

13.#p01 {

14.border-color: red

15.}

16.#p02 {

17.border-color: rgb(0,255,0)

18.}

19.#p03 {

20.border-color: #00F

21.}

22./style

23./head

24.body

25.h3CSS属性border-color的应用/h3

26.hr /

27.p id="p01"

28.红色边框效果

29./p

30.p id="p02"

31.绿色边框效果

32./p

33.p id="p03"

34.蓝色边框效果

35./p

36./body

37./html




图318CSS属性bordercolor的应用效果

运行效果如图318所示。
【代码说明】
本例中包含了三个段落元素p，并使用ID选择器为其设置不同的bordercolor属性值。为达到更好的显示效果，预先为所有段落元素设置了统一CSS样式： 宽200像素、高30像素，并且设置边框宽度为10像素，边框风格是实线边框。
为了演示颜色的不同表达方式，这三种边框分别使用了关键词、RGB和十六进制码的方式表示红色red、绿色rgb(0,255,0)和蓝色#00F。其中蓝色的十六进制码是简写的形式，完整写法为#0000FF。
4) 边框简写border
CSS中的border属性可以用于概括其他三种边框属性，将相关属性值汇总写在同一行。当需要为同一个元素声明多项边框属性时可以使用border属性进行简写。属性值无规定顺序，彼此之间用空格隔开，如果其中某个属性没有规定可以省略不写。例如： 



p{

border-width: 1px;

border-style: solid;

border-color: red

}


上述代码使用border属性可以简写为： 



p{ border: 1px solid red}


其效果完全相同。
3. 外边距margin
1) 设置各边外边距
在CSS中，可以使用margin属性设置HTML元素的外边距。元素的外边距也可以被理解为元素内容周围的填充物，因为内边距不影响当前元素与其他元素之间的距离，它只能用于增加元素内容与元素边框之间的距离。
margin属性值可以是长度值或百分比，包括可以使用负数。例如，为所有的标题元素h1设置各边均为10像素的外边距： 



h1{margin:10px}


和内边距padding属性类似，使用百分比值表示的也是当前元素上级父元素的宽度(width)百分比。例如： 



div style="width:300px"

p style="margin:10%"这是一个段落/p

/div


此时使用了内联样式表为段落元素p设置外边距为父元素宽度的10%。该段落元素p的父元素为块级元素div，因此段落元素p各边的外边距均为是div元素宽度的10%，即30像素。
margin属性同样也可以为元素的各边分别设置外边距。例如： 



p{margin: 0 10% 20px 30px}


此时规定的属性值按照上右下左的顺时针顺序为各边的外边距进行样式定义。因此本例表示上边外边距为0像素； 右边外边距为其父元素宽度的10%； 下边外边距为20像素； 左边外边距为30像素。
如果在设置外边距时各边有部分重复值，可以写成简写的方式。
简写为三个属性值的样式，则左右边外边距共用中间的属性值。例如： 



p{margin: 10px 0 30px}


本例表示上边外边距为10像素； 左右边外边距为0； 下边外边距为30像素。
简写为两个属性值的样式，则上下边外边距共用第一个属性值、左右边外边距共用第二个属性值。例如： 



p{margin: 20px 30px}


本例表示上下边外边距为20像素； 左右边外边距为30像素。
2) 单边外边距
如果只需要为HTML元素的某一个边设置外边距，可以使用margin属性的4种单边外边距属性，如表318所示。


表318CSS单边外边距属性一览表



属 性 名 称解释属 性 名 称解释


margintop设置元素的上边外边距marginleft设置元素的左边外边距
marginbottom设置元素的下边外边距marginright设置元素的右边外边距

例如，设置段落元素p的左边外边距为10像素： 



p{margin-left: 10px}


注意： 不同的浏览器对于HTML元素的边距设置虽然基本都是默认为8像素，但是有细微的差异。其中IE和Netscape浏览器对body标签定义了默认外边距margin属性为8px； 而Opera浏览器相反是把内边距padding的默认值定义成了8px。为了保证网页的HTML元素兼容各种浏览器，建议自定义body标签中的margin和padding属性值。
【例318】CSS属性margin的应用
测试div元素使用外边距属性margin的不同效果。



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleCSS属性margin的应用/title

6.style

7..box {

8.border: 1px solid;

9.width: 300px;

10.margin: 10px;

11.}

12..yellow {

13.background-color: yellow

14.}

15..style01 {

16.margin: 20px

17.}

18..style02 {

19.margin: 10px 50px

20.}

21..style03 {

22.margin-left: 100px

23.}

24./style

25./head




26.body

27.h3CSS属性margin的应用/h3

28.hr /

29.div class="box"

30.div class="yellow"

31.该段落没有使用外边距，默认值为0

32./div

33./div

34.div class="box"

35.div class="style01 yellow"

36.该段落元素的各边外边距均为20像素

37./div

38./div

39.div class="box"

40.div class="style02 yellow"

41.该段落元素的上下边外边距均为10像素、左右边外边距均为50像素

42./div

43./div

44.div class="box"

45.div class="style03 yellow"

46.该段落元素左外边距为100像素

47./div

48./div

49./body

50./html




图319CSS属性margin的应用效果

运行效果如图319所示。
【代码说明】
本示例使用了四组区域元素div进行对比试验，每组均为一个带有实线外框的div内部嵌套一个具有背景颜色和文字内容的div元素进行位置对照。
事先为作为外框的父元素div定义class="box"，并设置统一样式： 宽度为300像素、边框为宽1像素的实线，并设置了10像素的外边距； 然后为子元素div定义class="yellow"并统一设置背景颜色为黄色。
其中第一组中的子元素div没有做外边距的样式设置，作为原始参考。其余三个段落元素分别进行了三种不同情况的外边距设置： 
 使用margin属性加单个属性值的形式为各边同时设置相同的外边距。
 使用margin属性加两个属性值的形式分别为上下边和左右边设置不同的外边距。
 使用marginleft属性设置单边的外边距。
3) 外边距合并
外边距合并又称为外边距叠加，指的是如果两个元素的垂直外边距相连接会发生重叠合并，其高度是合并前这两个外边距中的较大值。
因此外边距合并主要指的就是上下外边距的合并，存在以下三种可能： 
 当元素B出现在元素A下面时，元素A的下边距会与元素B的上边距发生重叠合并。
 当元素B包含在元素A内部时，如果元素B的上/下内边距均为0，也会发生上/下外边距合并现象。
 当空元素没有边框和内边距时，上下外边距也会发生合并。
注意： 只有普通块级元素的垂直外边距才会发生合并，如果是特殊情况，例如浮动框、行内框或者绝对定位之间的外边距是不会发生合并的。
 3.5.3CSS文本
本节将介绍如何对网页上的文本内容进行修饰。和CSS文本有关的属性如表319所示。


表319CSS文本属性一览表



属 性 名 称解释


textindent设置文本缩进
textalign设置文本对齐方式（左对齐、居中、右对齐）
textdecoration设置文本装饰（下画线、删除线、上画线）
texttransform设置文本大小写的转换
letterspacing设置字符间距


1. 文本缩进textindent
CSS中的textindent属性用于为段落文本设置首行缩进效果。例如，为段落元素p设置20像素的首行缩进： 



p{text-indent: 20px}


【例319】CSS属性textindent的简单应用



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleCSS属性text-indent的应用/title

6.style

7.p {

8.text-indent: 2em;

9.border: 1px solid;

10.width: 200px;

11.padding: 10px;

12.}

13./style

14./head

15.body

16.h3CSS属性text-indent的应用/h3

17.hr /

18.p

19.这是一个用于测试首行缩进效果的段落元素。当前缩进了两个字符的距离。

20./p

21./body

22./html




图320CSS属性textindent的应用效果


运行效果如图320所示。
【代码说明】
本示例包含了一个简单的段落元素p，并设置其样式为： 带有1像素的实线边框，宽200像素，各边内边距为10像素，并使用textindent属性为其设置了2em的首行缩进。em是一个相对长度单位，表示的是原始字体大小的倍数，因此当前的2em表示的正好是两个字符的距离。
2. 文本对齐textalign
CSS中的textalign属性用于为文本设置对齐效果。该属性有四种取值，如表320所示。


表320CSS属性textalign取值



属性值解释属性值解释


left文本内容左对齐center文本内容居中显示
right文本内容右对齐justify文本内容两端对齐


其中justify的取值在多数浏览器上显示会存在问题，因为CSS本身并没有规定如何将文字向两端拉伸，拉伸的依据是各类浏览器本身的规则。并且目前CSS尚未规定连字符的处理方式。因此为了各类浏览器的兼容效果，应慎用该属性值。
【例320】CSS属性textalign的简单应用



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleCSS属性text-align的应用/title

6.style

7.div {

8.border: 1px solid;

9.width: 300px;

10.padding: 10px;

11.}

12..center {text-align: center}/*文本居中对齐*/

13..left {text-align: left}/*文本左对齐*/

14..right {text-align: right}/*文本右对齐*/

15./style

16./head

17.body

18.h3CSS属性text-align的应用/h3

19.hr /

20.div

21.p class="center"

22.文字居中对齐

23./p

24.p class="left"

25.文字左对齐

26./p




27.p class="right"

28.文字右对齐

29./p

30./div

31./body

32./html




图321CSS属性textalign的应用效果


运行效果如图321所示。
【代码说明】
本示例包含了三个段落元素p，分别用于测试文字居中对齐、左对齐和右对齐的显示效果。在三个段落元素的外面使用了一个div元素进行总体嵌套处理，该div元素设置为： 带有1像素实线的边框，宽度为500像素并且内边距为10像素。
以类选择器的方式定义了CSS属性textalign的三种效果，类名称定义为和属性值一样的文字内容，并将其应用于三个不同的段落元素中，获得最终效果。
3. 文本装饰textdecoration
CSS中的textdecoration属性用于为文本添加装饰效果，例如下画线、删除线和上画线等。该属性有四种取值，如表321所示。


表321CSS属性textdecoration取值



属性值解释属性值解释


underline为文本添加下画线overline为文本添加上画线
linethrough为文本添加删除线none正常状态的文本


【例321】CSS属性textdecoration的简单应用






视频讲解


1.!DOCTYPE html

2.html

3.head

4.meta charset="utf8"

5.titleCSS属性text-decoration的应用/title

6.style

7..underline {text-decoration: underline}/*下画线*/

8..line-through {text-decoration: line-through}/*删除线*/

9..overline {text-decoration: overline}/*上画线*/

10./style

11./head

12.body

13.h3CSS属性text-decoration的应用/h3

14.hr /

15.p class="underline"

16.为文字添加下画线

17./p

18.p class="line-through"

19.为文字添加删除线

20./p




21.p class="overline"

22.为文字添加上画线

23./p

24./body

25./html




图322CSS属性texttransform的

应用效果

运行效果如图322所示。
【代码说明】
本示例包含了三个段落元素p，用其测试CSS属性textdecoration不同属性值的效果。以类选择器的方式定义了CSS属性textdecoration的三种效果(上画线、删除线和下画线)，类名称定义为和属性值一样的文字内容，并将其应用于三个不同的段落元素中。
一般来说，文本默认情况下就是textdecoration属性值为none的状态，无须特别声明，因此未在本示例中展示。但是none属性值适用于去掉超链接文本内容的下画线，具体用法请参考3.5.5节。
4. 文本转换texttransform
CSS中的texttransform属性用于设置文本的大小写。该属性有四种取值，如表322所示。


表322CSS属性texttransform取值一览表



属性值解释属性值解释


uppercase将文本中每个字母都转换为大写capitalize将文本中的首字母转换为大写
lowercase将文本中每个字母都转换为小写none将文本保持原状不做任何转换

【例322】CSS属性texttransform的简单应用






视频讲解


1.!DOCTYPE html

2.html

3.head

4.meta charset="utf8"

5.titleCSS属性text-transform的应用/title

6.style

7..uppercase {text-transform: uppercase}/*全大写*/

8..lowercase {text-transform: lowercase}/*全小写*/

9..capitalize {text-transform: capitalize}/*单词首字母大写*/

10./style

11./head

12.body

13.h3CSS属性text-transform的应用/h3

14.hr /

15.p class="uppercase"

16.hello javaScript

17./p

18.p class="lowercase"

19.HELLO JAVASCRIPT

20./p

21.p class="capitalize"




22.hello javaScript

23./p

24./body

25./html




图323CSS属性texttransform的应用效果

运行效果如图323所示。
【代码说明】
本示例包含了三个段落元素p，用其测试CSS属性texttransform不同属性值的效果。以类选择器的方式定义了CSS属性texttransform的三种效果(全大写、全小写和首字母大写)，类名称定义为和属性值一样的文字内容，并将其应用于三个不同的段落元素中。
一般来说，文本默认情况下就是texttransform属性值为none的状态，无须特别声明，因此未在本示例中展示。
5. 字符间距letterspacing
CSS中的letterspacing属性用于设置文本中字符的间距，其属性值为长度值。例如，将标题元素h1设置成字间距为10像素的宽度： 



h1{letter-spacing:10px}


【例323】CSS属性letterspacing的简单应用



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleCSS属性letter-spacing的应用/title

6.style

7..style01 {

8.letter-spacing: 1em

9.}

10..style02 {

11.letter-spacing: 2em

12.}

13..style03 {

14.letter-spacing: -5px

15.}

16./style

17./head

18.body

19.h3CSS属性letter-spacing的应用/h3

20.hr /

21.p class="style01"

22.文字字间距为1em

23./p

24.p class="style02"

25.文字字间距为2em

26./p

27.p class="style03"




28.文字字间距为-5px

29./p

30./body

31./html




图324CSS属性letterspacing的应用效果

运行效果如图324所示。
【代码说明】
本示例包含了三个段落元素p，用其测试CSS属性letterspacing不同属性值的效果。以类选择器的方式定义了CSS属性letterspacing的三种效果(字间距1em、2em和5px的情况)，类名称定义为style01、style02和style03，并将其应用于三个不同的段落元素中。
由图324可见，letterspacing的属性值允许是负数，但是需要适度，否则字符会全部堆积在一起无法识别。
 3.5.4CSS字体
本节将介绍如何对字体进行样式设置。和CSS字体有关的属性如表323所示。


表323CSS字体属性一览表



属 性 名 称解释


fontfamily设置字体系列
fontstyle设置字体风格(正常、斜体、倾斜三种)
fontvariant设置字体变化(小型尺寸的大写字母等)
fontweight设置字体的粗细
fontsize设置字体尺寸
font上述所有属性的综合简写方式


1. 字体系列fontfamily
在CSS中，将字体分为两类： 一类是特定字体系列(familyname)； 另一类是通用字体系列(generic family)。特定字体系列指的是拥有具体名称的某一种字体，比如宋体、楷体、黑体、Times New Roman、Arial等； 而通用字体系列指的是具有相同外观特征的字体系列。
除了常见的各种特定字体外，CSS规定了五种通用字体系列： 
 Serif字体； 
 Sansserif字体； 
 Monospace字体； 
 Cursive字体； 
 Fantasy字体。
【例324】CSS属性fontfamily的简单应用






视频讲解


1.!DOCTYPE html

2.html

3.head

4.meta charset="utf8"

5.titleCSS属性font-family的应用/title

6.style




7..style01 {

8.font-family: "AR DELANEY"

9.}

10..style02 {

11.font-family: "French Script MT"

12.}

13..style03 {

14.font-family: "微软雅黑 Light"

15.}

16./style

17./head

18.body

19.h3CSS属性font-family的应用/h3

20.hr /

21.p class="style01"

22.AR DELANEY

23./p

24.p class="style02"

25.French Script MT

26./p

27.p class="style03"

28.微软雅黑 Light

29./p

30./body

31./html




图325CSS属性fontfamily的应用效果

运行效果如图325所示。
【代码说明】
本示例包含了三个段落元素p，用其测试CSS属性fontfamily不同属性值的效果。在首部标签head和/head之间以类选择器的方式定义了CSS属性fontfamily的三个不同属性值，其中类名称定义为style01、style02和style03，并将其应用于三个不同的段落元素中。
属性值为从系统中任选的三款较有特色的字体： "AR DELANEY""French Script MT"以及"微软雅黑 Light"，分别用于显示描边、花体字和黑体字效果。由于这三款字体的名称都是多个单词组成中间有空格，因此属性值必须加上引号。如果字体名称为单个单词(例如Arial)，引号可以省略不写。
2. 字体风格fontstyle
CSS中的fontstyle属性可以用于设置字体风格是否为斜体字。该属性有三种取值，如表324所示。


表324CSS属性fontstyle取值一览表



属性值解释


normal正常字体
italic斜体字
oblique倾斜字体


【例325】CSS属性fontstyle的简单应用






视频讲解


1.!DOCTYPE html

2.html

3.head

4.meta charset="utf8"

5.titleCSS属性font-style的应用/title

6.style

7..style01 {font-style: normal}/*正常字体*/

8..style02 {font-style: italic}/*斜体字*/

9..style03 {font-style: oblique} /*倾斜字体*/

10./style

11./head

12.body

13.h3CSS属性font-style的应用/h3

14.hr /

15.p class="style01"

16.正常字体

17./p

18.p class="style02"

19.斜体字

20./p

21.p class="style03"

22.倾斜字体

23./p

24./body

25./html




图326CSS属性fontstyle的应用效果

运行效果如图326所示。
【代码说明】
本示例包含了三个段落元素p，用其测试CSS属性fontstyle不同属性值的效果。在首部标签head和/head之间以类选择器的方式定义了CSS属性fontstyle的三个不同属性值(正常字体、斜体字和倾斜字体)，其中类名称定义为style01、style02和style03，并将其应用于三个不同的段落元素中，从而显示最终效果。
3. 字体变化fontvariant
CSS中的fontvariant属性可以用于设置字体变化。该属性有两种取值，如表325所示。


表325CSS属性fontvariant取值一览表



属性值解释


normal正常字体
smallcaps小号字的大写字母


如果当前页面的指定字体不支持smallcaps这种形式，则显示为正常大小字号的大写字母。




视频讲解



【例326】CSS属性fontvariant的简单应用




1.!DOCTYPE html

2.html




3.head

4.meta charset="utf8"

5.titleCSS属性font-variant的应用/title

6.style

7..style01 {font-variant: normal}

8..style02 {font-variant: small-caps}/*全大写，但是比正常大写字母小一号*/

9./style

10./head

11.body

12.h3CSS属性font-variant的应用/h3

13.hr /

14.p class="style01"

15.Normal

16./p

17.p class="style02"

18.Small Caps

19./p

20.p class="style02"

21.small caps

22./p

23./body

24./html




图327CSS属性fontvariant的应用效果

运行效果如图327所示。
【代码说明】
本示例包含了三个段落元素p，用其测试CSS属性fontvariant不同属性值的效果。在首部标签head和/head之间以类选择器的方式定义了CSS属性fontstyle的两个不同属性值(normal和smallcaps)，其中类名称定义为style01和style02，并将其应用于三个不同的段落元素中，从而显示最终效果。
其中，class="style01"的段落元素p显示为正常字体效果，用于作对比案例。第二个和第三个段落元素p使用了相同的class="style02"，但是由图327可见，首字母的显示效果不同。原因是当文本内容中原先就存在大写字母时，使用smallcaps属性值会将这些大写字母的字号显示为正常字体大小，而其他小写字母转换为大写字母后是小一号的字体大小，从而形成了一种特有的风格。
4. 字体粗细fontweight
CSS中的fontweight属性用于控制字体的粗细程度。该属性有五种取值，如表326所示。


表326CSS属性fontweight取值



属性值解释


normal标准正常字体，也是fontweight的默认值
bold加粗字体
bolder更粗的字体
lighter更细的字体
100—900
［100,900］的整数，每个数字相差100。数字越大字体越粗。其中400等同于normal，700等同于bold


【例327】CSS属性fontweight的简单应用



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleCSS属性font-weight的应用/title

6.style

7..style01 {

8.font-weight: normal

9.}

10..style02 {

11.font-weight: bold

12.}

13..style03 {

14.font-weight: 100

15.}

16..style04 {

17.font-weight: 400

18.}

19..style05 {

20.font-weight: 900

21.}

22./style

23./head

24.body

25.h3CSS属性font-weight的应用/h3

26.hr /

27.p class="style01"

28.测试段落(正常字体)

29./p

30.p class="style02"

31.测试段落(粗体字)

32./p

33.p class="style03"

34.测试段落(100)

35./p

36.p class="style04"

37.测试段落(400)

38./p

39.p class="style05"

40.测试段落(900)

41./p

42./body

43./html




图328CSS属性fontweight的应用效果


运行效果如图328所示。
【代码说明】
本示例包含了五个段落元素p，用其测试CSS属性fontweight不同属性值的效果。在首部标签head和/head之间以类选择器的方式定义了CSS属性fontweight的五个不同属性值(normal、bold、100、400和900)，并将其应用于这五个段落元素中。
由图328可见，使用数值的方式可以有更多的选择。就浏览器的实际显示效果而言，100~400的显示效果相似，500~900的显示效果相似。
5. 字体大小fontsize
在CSS中，fontsize属性用于设置字体大小。fontsize的属性值为长度值，可以使用绝对单位或相对单位。绝对单位使用的是固定尺寸，不允许用户在浏览器中更改文本大小，采用了物理度量单位，例如，cm、mm、px等； 相对单位是相对于周围的参照元素进行设置大小，允许用户在浏览器中更改字体大小，字体相对单位有em、ch等。例如： 



p{font-size:30px}

h1{font-size: 2em}

h2{font-size:120%}


关于字体大小的设置，常见用法是使用px、em或百分比(%)来显示字体尺寸。
 px——含义为像素，1px指的是屏幕上显示的一个小点，它是绝对单位。
 em——含义为当前元素的默认字体尺寸，是相对单位。浏览器默认字体大小是16px，因此在用户未作更改的情况下，1em=16px。
 %——含义为相对于父元素的比例，例如，20%指的就是父元素宽度的20%，也是一个相对单位。
【例328】CSS属性fontsize的简单应用



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleCSS属性font-size的应用/title

6.style

7..style01 {

8.font-size: 16px

9.}

10..style02 {

11.font-size: 1em

12.}

13..style03 {

14.font-size: 32px

15.}

16..style04 {

17.font-size: 2em

18.}

19./style

20./head

21.body

22.h3CSS属性font-size的应用/h3

23.hr /

24.p class="style01"

25.测试段落，字体大小为16像素

26./p

27.p class="style02"

28.测试段落，字体大小为1em

29./p

30.p class="style03"

31.测试段落，字体大小为32像素

32./p




33.p class="style04"

34.测试段落，字体大小为2em

35./p

36./body

37./html




图329CSS属性fontsize的应用效果

运行效果如图329所示。
【代码说明】
本示例包含了四个段落元素p，用其测试CSS属性fontsize不同属性值的效果。在首部标签head和/head之间以类选择器的方式定义了CSS属性fontsize的两种不同类型取值： 绝对值px和相对值em，并将其应用于这四个段落元素中。
由图329可见，fontsize属性值声明为1em与16px的前两个段落元素的字体大小显示效果是完全一样的，同样2em与32px也是一样。这是由于浏览器默认的字体大小为16像素，因此在用户未作更改的情况下，1em等同于16px。
6. 字体简写font
CSS中的font属性可以用于概括其他五种字体属性，将相关属性值汇总写在同一行。当需要为同一个元素声明多项字体属性时，可以使用font属性进行简写。声明顺序如下： 



［font-style］［font-variant］［font-weight］［ font-size］［font-family］


属性值之间用空格隔开，如果其中某个属性没有规定可以省略不写。例如： 



p{

font-style:italic;

font-weight:bold;

font-size:20px;

}


上述代码使用font属性可以简写为： 



p{font: italic bold 20px}


其效果完全相同。
 3.5.5CSS超链接
HTML中的超链接元素a和其他元素类似，有一些通用CSS属性可以设置，比如字体大小、字体颜色、背景颜色等。除此之外，超链接元素a还可以根据其所处的四种不同的状态分别设置CSS样式。超链接的四种状态如表327所示。


表327超链接的四种状态一览表



状 态 名 称解释状 态 名 称解释


a:link未被访问的超链接a:hover鼠标悬浮在上面的超链接
a:visited已被访问的超链接a:active正在被点击的超链接


为超链接设置不同状态的CSS样式时必须遵循两条规则： 一是a:hover的声明必须在a:link和a:visited之后； 二是a:active的声明必须在a:hover之后； 否则声明有可能失效。
【例329】超链接不同状态的简单CSS应用



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleCSS属性超链接的应用/title

6.style

7.a:link,a:visited{

8.display:block;/*块级元素*/

9.text-decoration:none; /*取消下画线*/

10.color:white;/*字体为白色*/

11.font-weight:bold;/*字体加粗*/

12.font-size:25px;/*字体大小为25px*/

13.background-color:#7BF;/*设置背景颜色*/

14.width:200px;/*宽度200像素*/

15.height:30px;/*高度30像素*/

16.text-align:center;/*文本居中显示*/

17.line-height:30px;/*行高30像素*/

18.}

19.a:hover,a:active{

20.background-color:#0074E8;/*设置背景颜色*/

21.}

22./style

23./head

24.body

25.h3CSS属性超链接的应用/h3

26.hr /

27.a href="http://www.baidu.com"百度/a

28./body

29./html


运行效果如图330所示。


图330CSS属性fontimage的应用效果


【代码说明】
本示例包含了单一的超链接元素a作为示例。然后使用CSS内部样式表的形式分别为超链接的四种状态设置样式要求。当有多个状态使用同一个样式时，可以在一起进行声明，之间用逗号隔开即可。本例中未访问和已访问状态共用一种样式，鼠标悬浮在上面和正在点击状态共用另一种样式。
为使超链接元素形成仿按钮风格，为其定义display属性为block，使之成为块级元素，从而可以为其设置尺寸。本例设置textdecoration属性值为none，取消了超链接原有的下画线样式，并在鼠标悬浮和点击状态中设置了元素背景颜色的加深，从而实现动态效果。
 3.5.6CSS列表
CSS对于HTML列表元素的样式设置主要在于规定各项列表前面的标志(marker)类型。在之前第2章中提到了三种列表类型： 有序列表、无序列表和定义列表。其中有序列表默认的标记样式为标准阿拉伯数字(1，2，3，4，…)，而无序列表默认的标记样式是实心圆点。和列表有关的属性如表328所示。


表328CSS列表属性一览表



属 性 名 称解释


liststyletype设置列表标志类型
liststyleimage设置列表标志图标
liststyleposition设置列表标志位置
liststyletype上述所有属性的综合简写方式

1. 样式类型liststyletype
CSS中的liststyletype属性可以用于设置列表的标志样式。该属性在CSS2版本已有21种取值内容，如表329所示。


表329CSS属性liststyletype常见取值一览表



属性值解释


none无标记符号
discliststyletype属性的默认值，样式为实心圆点
circle空心圆
square实心方块
decimal阿拉伯数字（1，2，3，4，…）
decimalleadingzero带有0开头的阿拉伯数字（01，02，03，04，…），该属性值不被IE浏览器支持
upperroman大写罗马数字（Ⅰ，Ⅱ，Ⅲ，Ⅳ，…）
lowerroman小写罗马数字（ⅰ，ⅱ，ⅲ，ⅳ，…）
upperalpha大写英文字母（A，B，C，D，…）
loweralpha小写英文字母（a，b，c，d，…）
upperlatin大写拉丁文字母（A，B，C，D，…），该属性值不被IE浏览器支持
lowerlatin小写拉丁文字母（a，b，c，d，…），该属性值不被IE浏览器支持
lowergreek小写希腊字母（alpha，beta，gamma，…），该属性值不被IE浏览器支持
hebrew传统的希伯来编号方式
armenian传统的亚美尼亚编号方式
georgian传统的乔治亚编号方式
cjkideographic
W3C组织称其为简单的表意数字，经测试在安装有中文字体的系统上运行可显示汉字（一，二，三，四，…）
hiragana日语平假名（日本字母的草体字）的编号
katakana日语片假名的编号
hiraganairoha日语平假名伊吕波形的编号
katakanairoha日语片假名伊吕波形的编号



其中拉丁字母与英文字母显示效果完全相同，只不过拉丁字母的属性值不被IE浏览器所支持。从表格的最后四行可以看到日语的平假名(hiragana)和片假名(katakana)编号都带有伊吕波(iroha)型的变种。伊吕波是源自日本的一首古老的歌谣，最早见于1079年，这首歌包含了全部日语音节，类似于英文ABC字母歌。这里日语编号的多样性可以理解为中文序号有一、二、三、四也有甲、乙、丙、丁这种概念。
【例330】CSS属性liststyletype的应用
本示例用于演示对不同列表设置21种CSS属性liststyletype属性值的效果。



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleCSS属性list-style-type的应用/title

6.style

7.div{

8.border:1px solid;

9.width:235px;

10.height:125px;

11.float:left;

12.margin:5px;

13.}

14..none{ list-style-type: none}

15..disc{ list-style-type: disc}

16..circle{ list-style-type:circle}

17..square{ list-style-type: square}

18..decimal{ list-style-type: decimal}

19..decimal-leading-zero{ list-style-type:decimal-leading-zero}

20..upper-roman{ list-style-type: upper-roman}

21..lower-roman{ list-style-type: lower-roman}

22..upper-alpha{ list-style-type:upper-alpha}

23..lower-alpha{ list-style-type: lower-alpha}

24..upper-latin{ list-style-type:upper-latin}

25..lower-latin{ list-style-type: lower-latin}

26..lower-greek{ list-style-type: lower-greek}

27..hebrew{ list-style-type: hebrew}

28..armenian{ list-style-type: armenian}

29..georgian{ list-style-type: georgian}

30..cjk-ideographic{ list-style-type: cjk-ideographic}

31..hiragana{ list-style-type: hiragana}

32..hiragana-iroha{ list-style-type: hiragana-iroha}

33..katakana{ list-style-type: katakana}

34..katakana-iroha{ list-style-type: katakana-iroha}

35./style

36./head

37.body

38.h3CSS属性list-style-type的应用/h3

39.hr /

40.div

41.h4属性值为none/h4

42.ul class="none"

43.li跳水/li

44.li举重/li

45.li击剑/li

46./ul

47./div

48.

49.div

50.h4属性值为disc/h4




51.ul class="disc"

52.li跳水/li

53.li举重/li

54.li击剑/li

55./ul

56./div

57.

58.div

59.h4属性值为circle/h4

60.ul class="circle"

61.li跳水/li

62.li举重/li

63.li击剑/li

64./ul

65./div

66.

67.div

68.h4属性值为square/h4

69.ul class="square"

70.li跳水/li

71.li举重/li

72.li击剑/li

73./ul

74./div

75.

76.div

77.h4属性值为decimal/h4

78.ul class="decimal"

79.li跳水/li

80.li举重/li

81.li击剑/li

82./ul

83./div

84.

85.div

86.h4属性值为decimal-leading-zero/h4

87.ul class="decimal-leading-zero"

88.li跳水/li

89.li举重/li

90.li击剑/li

91./ul

92./div

93.

94.div

95.h4属性值为upper-roman/h4

96.ul class="upper-roman"

97.li跳水/li

98.li举重/li

99.li击剑/li

100./ul

101./div

102.

103.div

104.h4属性值为lower-roman/h4

105.ul class="lower-roman"

106.li跳水/li




107.li举重/li

108.li击剑/li

109./ul

110./div

111.

112.div

113.h4属性值为upper-alpha/h4

114.ul class="upper-alpha"

115.li跳水/li

116.li举重/li

117.li击剑/li

118./ul

119./div

120.

121.div

122.h4属性值为lower-alpha/h4

123.ul class="lower-alpha"

124.li跳水/li

125.li举重/li

126.li击剑/li

127./ul

128./div

129.

130.div

131.h4属性值为upper-latin/h4

132.ul class="upper-latin"

133.li跳水/li

134.li举重/li

135.li击剑/li

136./ul

137./div

138.

139.div

140.h4属性值为lower-latin/h4

141.ul class="lower-latin"

142.li跳水/li

143.li举重/li

144.li击剑/li

145./ul

146./div

147.

148.div

149.h4属性值为lower-greek/h4

150.ul class="lower-greek"

151.li跳水/li

152.li举重/li

153.li击剑/li

154./ul

155./div

156.

157.div

158.h4属性值为hebrew/h4

159.ul class="hebrew"

160.li跳水/li

161.li举重/li

162.li击剑/li




163./ul

164./div

165.

166.div

167.h4属性值为armenian/h4

168.ul class="armenian"

169.li跳水/li

170.li举重/li

171.li击剑/li

172./ul

173./div

174.

175.div

176.h4属性值为georgian/h4

177.ul class="georgiann"

178.li跳水/li

179.li举重/li

180.li击剑/li

181./ul

182./div

183.

184.div

185.h4属性值为cjk-ideographic/h4

186.ul class="cjk-ideographic"

187.li跳水/li

188.li举重/li

189.li击剑/li

190./ul

191./div

192.

193.div

194.h4属性值为hiragana/h4

195.ul class="hiragana"

196.li跳水/li

197.li举重/li

198.li击剑/li

199./ul

200./div

201.

202.div

203.h4属性值为katakana/h4

204.ul class="katakana"

205.li跳水/li

206.li举重/li

207.li击剑/li

208./ul

209./div

210.

211.div

212.h4属性值为hiragana-irohaic/h4

213.ul class="hiragana-iroha"

214.li跳水/li

215.li举重/li

216.li击剑/li

217./ul

218./div




219.

220.div

221.h4属性值为katakana-iroha/h4

222.ul class="katakana-iroha"

223.li跳水/li

224.li举重/li

225.li击剑/li

226./ul

227./div

228./body

229./html


运行效果如图331所示。


图331CSS属性liststyletype的应用效果


【代码说明】
本示例包含了21组列表元素ul，每组列表的项目标签li均用于显示了三种运动类型(跳水、举重、击剑)作为示例。使用区域元素div对每组列表效果进行分块显示，并事先为div元素设置统一标准： 带有1像素宽的实线边框，宽235像素、高125像素，各边外边距为5像素，浮动方式为左对齐。
以类选择器的方式定义了CSS属性liststyletype的21种效果，类名称定义为和属性值一样的文字内容。将这21种效果分配给本示例中的21组列表，即可查看最终效果。
注意： 部分列表样式在IE浏览器中不被支持，建议使用Chrome或其他浏览器进行预览。
2. 样式图片liststyleimage
CSS中的liststyleimage属性可以用于设置列表的标志图标。标志图标可以是来源于本地或者网络的图像文件。如果已使用liststyleimage属性声明了列表的标志图标，则不能同时使用liststyletype属性声明列表的标志类型，否则后者将无显示效果。
【例331】CSS属性liststyleimage的简单应用
使用自定义图片制作列表的标志图标。



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleCSS属性list-style-image的应用/title

6.style

7..arrow {

8.list-style-image: url(image/icon01.png)

9.}

10./style

11./head

12.body

13.h3CSS属性list-style-image的应用/h3

14.hr /

15.ul class="arrow"

16.li选项一/li

17.li选项二/li

18.li选项三/li

19./ul

20./body

21./html




图332CSS属性liststyleimage的应用效果

运行效果如图332所示。
【代码说明】
本示例包含了列表元素ul与其内部的三个列表选项元素li作为示例。列表图标icon01.png来源于与HTML文档在同一目录下的image文件夹。使用liststyleimage属性可以为列表定义多样化的图标。

3. 样式位置liststyleposition
CSS中的liststyleposition属性用于定义列表标志的位置，有三种属性值，如表330所示。


表330CSS属性liststyleposition属性值一览表



属性值解释


outsideliststyleposition属性的默认值，表示列表标志放置在文本左侧
inside表示列表标志放置在文本内部，多行文本根据标志对齐
inherit继承父元素的liststyleposition属性值


【例332】CSS属性liststyleposition的简单应用
使用列表元素ul对比liststyleposition属性值为
outside和inside的显示区别。






视频讲解


1.!DOCTYPE html

2.html

3.head

4.meta charset="utf8"




5.titleCSS属性list-style-position的应用/title

6.style

7.ul {

8.width: 280px;

9.border: 1px solid

10.}

11..outside {

12.list-style-position: outside

13.}

14..inside {

15.list-style-position: inside

16.}

17./style

18./head

19.body

20.h3CSS属性list-style-position的应用/h3

21.hr /

22.ul class="outside"

23.li

24.本示例的list-style-position属性值为outside。

25./li

26.li

27.本示例的list-style-position属性值为outside。

28./li

29.li

30.本示例的list-style-position属性值为outside。

31./li

32./ul

33.

34.ul class="inside"

35.li

36.本示例的list-style-position属性值为inside。

37./li

38.li

39.本示例的list-style-position属性值为inside。

40./li

41.li

42.本示例的list-style-position属性值为inside。

43./li

44./ul

45./body

46./html


运行效果如图333所示。


图333CSS属性liststyleposition的应用效果


【代码说明】
本示例包含了两个列表元素ul，分别测试liststyleposition属性值为outside和inside的两种情况，并使用CSS内部样式表设置了列表元素ul的样式： 宽度为280像素，并带有宽1像素的实线边框。每个列表元素内部包含了三个列表选项元素li作为示例。
由图333可见，当liststyleposition属性值为outside时，列表左边的标志点是独立于文本外侧的，当列表文字内容较多需要换行时，第二行的文字内容可以和第一行对齐； 而当liststyleposition属性值为inside时，列表的标志点是嵌入文本中的，列表文字内容如果换行应和该标志点对齐。
4. 样式简写liststyle
CSS中的liststyle属性可以用于概括其他三种字体属性，将相关属性值汇总写在同一行。当需要为同一个列表元素声明多项列表属性时可以使用liststyle属性进行简写。声明顺序如下： 



［list-style-type］［list-style-position］［list-style-image］


属性值之间用空格隔开，如果其中某个属性没有规定可以省略不写。
例如： 



ul{

list-style-type: circle;

list-style-position: outside

}


上述代码使用liststyle属性可以简写为： 



ul{ list-style: circle outside}


其效果完全相同。
 3.5.7CSS表格
本节将介绍如何对网页上的表格进行修饰。和CSS表格有关的属性如表331所示。


表331CSS表格相关属性



属 性 名 称解释


bordercollapse用于设置表格的边框样式为双线或单线
borderspacing用于设置表格中双线边框的分割距离
captionside用于设置表格中的标题位置
emptycells用于定义表格中空单元格边框和背景的显示方式
tablelayout用于规定表格的布局方式，包括固定表格布局和根据内容调整布局


除以上五种属性设置外，在CSS中一些通用属性设置同样也可以用于表格元素。例如，字体颜色(color)、背景(background)、文本对齐(textalign)、边框(border)、内边距(padding)、宽度(width)和高度(height)等，这里不再展开详细说明。
1. 折叠边框bordercollapse
在默认情况下，表格的边框如果设置为实线，则会显示为双层线条的样式效果。CSS中的bordercollapse属性用于设置是否将表格的双层边框折叠为单一线条边框，该属性有三种属性值，如表332所示。


表332CSS属性bordercollapse属性值



属 性 名 称解释


separatebordercollapse属性的默认值，边框为分开的双层线条效果
collapse边框会合并为单一线条的边框
inherit继承父元素的bordercollapse属性值


【例333】CSS属性bordercollapse的简单应用
使用表格元素对比bordercollapse属性值为separate和collapse的显示效果。



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleCSS属性border-collapse的应用/title

6.style

7..separate {

8.border-collapse: separate

9.}

10..collapse {

11.border-collapse: collapse

12.}

13./style

14./head

15.body

16.h3CSS属性border-collapse的应用/h3

17.hr /

18.table border="1" class="separate"

19.caption

20.双线边框效果

21./caption

22.tr

23.td年份/td

24.td第一季度/td

25.td第二季度/td

26.td第三季度/td

27./tr

28.trtd2014/tdtd100/tdtd200/tdtd300/td/tr

29.trtd2015/tdtd150/tdtd250/tdtd350/td/tr

30.trtd2016/tdtd200/tdtd300/tdtd400/td/tr

31./table

32.br /

33.

34.table border="1" class="collapse"

35.caption

36.折叠边框效果

37./caption

38.tr

39.td年份/td




40.td第一季度/td

41.td第二季度/td

42.td第三季度/td

43./tr

44.trtd2014/tdtd100/tdtd200/tdtd300/td/tr

45.trtd2015/tdtd150/tdtd250/tdtd350/td/tr

46.trtd2016/tdtd200/tdtd300/tdtd400/td/tr

47./table

48./body

49./html




图334CSS属性bordercollapse的应用效果

运行效果如图334所示。
【代码说明】
本示例包含了两个表格元素table，分别用于测试bordercollapse属性值为separate和collapse两种情况，并使用CSS内部样式表设置了类选择器，将这两种属性值分别应用于其中一个表格元素。每个表格元素中包含了4行4列的单元格，表格中的数据内容为测试样例与本示例无关。为表格元素添加了属性border="1"，以便形成宽度为1像素的实线边框。
2. 边框距离borderspacing
CSS中的borderspacing属性用于定义表格中双线边框的分割距离，该属性有三种属性值，如表333所示。


表333CSS属性borderspacing属性值



属性值解释


长度值表示水平和垂直方向上的距离
长度值1 长度值2长度值1用于表示水平方向的距离，长度值2用于表示垂直方向的距离
inherit继承父元素的borderspacing属性值


注意： borderspacing属性只在表格能显示边框并且边框的bordercollapse属性值为默认值separate时生效，否则该属性将被忽略。
【例334】CSS属性borderspacing的简单应用
为表格设置不同的边框距离。



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleCSS属性border-spacing的应用/title

6.style

7..style01 {

8.border-spacing: 10px

9.}

10..style02 {

11.border-spacing: 50px 10px

12.}




13./style

14./head

15.body

16.h3CSS属性border-spacing的应用/h3

17.hr /

18.table border="1" class="style01"

19.caption

20.单个属性值效果：边框距离10像素

21./caption

22.tr

23.td年份/td

24.td第一季度/td

25.td第二季度/td

26.td第三季度/td

27./tr

28.trtd2014/tdtd100/tdtd200/tdtd300/td/tr

29.trtd2015/tdtd150/tdtd250/tdtd350/td/tr

30.trtd2016/tdtd200/tdtd300/tdtd400/td/tr

31./table

32.br /

33.

34.table border="1" class="style02"

35.caption

36.两个属性值效果：水平方向50像素，垂直方向10像素

37./caption

38.tr

39.td年份/td

40.td第一季度/td

41.td第二季度/td

42.td第三季度/td

43./tr

44.trtd2014/tdtd100/tdtd200/tdtd300/td/tr

45.trtd2015/tdtd150/tdtd250/tdtd350/td/tr

46.trtd2016/tdtd200/tdtd300/tdtd400/td/tr

47./table

48./body

49./html


运行效果如图335所示。


图335CSS属性borderspacing的应用效果


【代码说明】
本示例包含了两个表格元素table，分别用于测试borderspacing属性值为单个长度值和两个长度值的情况，并使用CSS内部样式表设置了类选择器将这两种情况分别应用于其中一个表格元素。每个表格元素中包含了4行4列的单元格，表格中的数据内容为测试样例，与本示例无关。
注： 由于表格的默认效果就是分割边框(bordercollapse属性值为separate)，因此无须特别声明。只需要为表格元素添加属性border="1"，以便形成宽度为1像素的实线边框。
3. 标题位置captionside
CSS中的captionside属性用于定义表格中标题的位置，有三种属性值如表334所示。


表334CSS属性captionside属性值



属性值解释


topcaptionside属性的默认值，表示标题在表格上方
bottom表示标题在表格下方
inherit继承父元素的captionside属性值


【例335】CSS属性captionside的简单应用
为表格设置出现在底端的标题。



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleCSS属性caption-side的应用/title

6.style

7.caption {

8.caption-side: bottom

9.}

10./style

11./head

12.body

13.h3CSS属性caption-side的应用/h3

14.hr /

15.table border="1"

16.caption

17.我是显示在表格底端的标题

18./caption

19.tr

20.td年份/td

21.td第一季度/td

22.td第二季度/td

23.td第三季度/td

24./tr

25.tr

26.td2014/tdtd100/tdtd200/tdtd300/td

27./tr

28.tr

29.td2015/tdtd150/tdtd250/tdtd350/td

30./tr

31.tr

32.td2016/tdtd200/tdtd300/tdtd400/td




33./tr

34./table

35./body

36./html




图336CSS属性captionside的应用效果

运行效果如图336所示。
【代码说明】
本示例包含了单个表格元素table，用于测试captionside属性值为bottom的情况，并使用CSS内部样式表设置了元素选择器，将该属性值应用于表格标题标签caption，并为表格元素添加属性border="1"，以便形成宽度为1像素的实线边框。
每个表格元素中包含了4行4列的单元格，表格中的数据内容为测试样例，与本示例无关。
4. 空单元格emptycells
CSS中的emptycells属性用于定义表格中空单元格边框和背景的显示方式。该属性有三种属性值，如表335所示。


表335CSS属性emptycells属性值一览表



属性值解释


showemptycells属性的默认值，表示正常显示空白单元格的边框与背景
hide表示不显示空白单元格的边框与背景
inherit继承父元素的emptycells属性值


【例336】CSS属性emptycells的简单应用
为表格中的空白单元格设置不显示边框的效果。



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleCSS属性empty-cells的应用/title

6.style

7.table {

8.empty-cells: hide

9.}

10./style

11./head

12.body

13.h3CSS属性empty-cells的应用/h3

14.hr /

15.table border="1"

16.caption

17.隐藏空单元格的边框效果

18./caption

19.tr

20.td年份/td




21.td第一季度/td

22.td第二季度/td

23.td第三季度/td

24./tr

25.tr

26.td2014/tdtd100/tdtd200/tdtd300/td

27./tr

28.tr

29.td2015/tdtd150/tdtd250/tdtd350/td

30./tr

31.tr

32.td2016/tdtd200/tdtd300/tdtd/td

33./tr

34./table

35./body

36./html




图337CSS属性emptycells的应用效果

运行效果如图337所示。
【代码说明】
本示例包含了单个表格元素table，用于测试emptycells属性值为hide的情况，并使用CSS内部样式表设置了元素选择器，将该属性值应用于表格标签table。每个表格元素中包含了4行4列的单元格，表格中的数据内容为测试样例与本示例无关。
注： 由于表格的默认效果就是分割边框(bordercollapse属性值为separate)，因此无须特别声明。只需要为表格元素添加属性border="1"，以便形成宽度为1像素的实线边框。
5. 表格布局tablelayout
CSS中的tablelayout属性用于规定表格的布局方式，包括固定表格布局和根据内容调整布局。该属性有三种属性值，如表336所示。


表336CSS属性tablelayout属性值



属性值解释


automaticemptycells属性的默认值，表示单元格的宽度由内容决定
fixed单元格的宽度由样式设置决定
inherit继承父元素的tablelayout属性值


【例337】CSS属性tablelayout的简单应用
为表格设置不同的边框距离。



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleCSS属性table-layout的应用/title

6.style

7.table {




8.width: 100%

9.}

10..fixed {

11.table-layout: fixed

12.}

13..automated {

14.table-layout: automated

15.}

16./style

17./head

18.body

19.h3CSS属性table-layout的应用/h3

20.hr /

21.table border="1" class="fixed"

22.caption

23.固定列宽的表格

24./caption

25.tr

26.td年份/tdtd第一季度/tdtd第二季度/tdtd第三季度
/td

27./tr

28.tr

29.td2016/tdtd200/tdtd300/tdtd400000000000000

/td

30./tr

31./table

32.br /

33.

34.table border="1" class="automated"

35.caption

36.随内容自动调整列宽的表格

37./caption

38.tr

39.td年份/tdtd第一季度/tdtd第二季度/tdtd第三季度
/td

40./tr

41.tr

42.td2016/tdtd200/tdtd300/tdtd400000000000000/td

43./tr

44./table

45./body

46./html




图338CSS属性tablelayout的应用效果


运行效果如图338所示。
【代码说明】
本示例包含了两个表格元素table，分别用于测试tablelayout属性值为fixed和automated的情况，并使用CSS内部样式表设置了类选择器，将这两种情况分别应用于其中一个表格元素，并设置表格元素的宽度为100%，即与页面等宽。为表格元素添加属性border="1"，以便形成宽度为1像素的实线边框。每个表格元素中包含了2行4列的单元格，表格中的数据内容为测试样例与本示例无关。
由图338可见，当tablelayout的属性值为fixed时，所有单元格的列宽是平均分配的，即使最后一个单元格的测试数据内容较多，也只能溢出单元格而不会改变单元格宽度。而tablelayout的属性值为automated时，单元格的列宽会随着内容的多少自动调整。由于automated是tablelayout属性的默认值，也可以忽略不写。
 3.6CSS定位
CSS定位可以将HTML元素放置在页面上指定的任意地方。CSS定位的原理是把页面左上角的点定义为坐标为(0,0)的原点，然后以像素为单位将整个网页构建成一个坐标系统。其中x轴与数学坐标系方向相同，越往右数字越大； y轴与数学坐标系方向相反，越往下数字越大。
本节主要介绍四种定位的方式： 绝对定位、相对定位、层叠效果和浮动。联合使用这些定位方式，可以创建更为复杂和准确的布局。
 3.6.1绝对定位
绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素，基于绝对定位的元素不占据空间。
使用绝对定位需要将HTML元素的position属性值设置为absolute(绝对的)，并使用四种关于方位的属性关键词left(左边)、right(右边)、top(顶部)、bottom(底端)中的部分内容设置元素的位置。一般来说从水平和垂直方向各选一个关键词即可。
例如，需要将段落元素p放置在距离页面顶端150像素、左边100像素的位置： 



p{

position: absolute;

top:150px;

left:100px

}


注意： 绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定位的元素没有已定位的祖先元素做参考值，则相对于整个网页。例如，同样是上面关于段落元素p的样式声明， 如果该段落元素放置在一个已经定位的div元素内部，则指的是距离这个div元素的顶端150像素、左边100像素的位置。
【例338】CSS绝对定位的应用
使用两个相同CSS样式的段落元素p对比不同的绝对定位效果。



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleCSS绝对定位的应用/title

6.style

7.p {

8.position: absolute;

9.width: 120px;

10.height: 120px;

11.top: 100px;

12.left: 0px;

13.background-color: #C8EDFF;




14.}

15.div {

16.position: absolute;

17.width: 300px;

18.height: 300px;

19.top: 80px;

20.left: 180px;

21.border: 1px solid;

22.}

23./style

24./head

25.body

26.h3CSS绝对定位的应用/h3

27.hr /

28.p

29.该段落是相对于页面定位的，距离页面的顶端100像素，距离左边0像素

30./p

31.div

32.我是相对于页面定位的div元素，距离顶端80像素，距离左边180像素

33.p

34.该段落是相对于父元素div定位的，距离div元素的顶端100像素，距离div元素的左边0像素

35./p

36./div

37./body

38./html


运行效果如图339所示。


图339CSS绝对定位的应用效果


【代码说明】
本示例包含了两个样式完全相同的段落元素p，用于对比测试直接在页面中使用和嵌入已定位的div元素中的两种情况。并使用CSS内部样式表设置了元素选择器，为段落元素p和区域元素div定义样式。
其中两个段落元素p的统一样式设置为： 宽和高均为120像素的矩形，带有背景颜色，并为其定义position属性值为absolute表示绝对定位，要求距离父元素的顶端100像素、左边0像素。区域元素div的样式设置为： 宽和高均为300像素的矩形，并带有宽1像素的实线边框。同样为div元素也定义了position属性值为absolute表示绝对定位，要求其距离父元素顶端80像素，左边180像素。
由图339可见，左边的段落元素p没有已定位的父元素，因此它的位置是相对于整个页面来计算的； 而右边的段落元素p是包含于已定位的div元素中，所以其位置是相对于div元素的顶端和左边来进行计算的。因此虽然这两个段落元素p具有完全相同的CSS样式设置，它们出现在页面上的位置不一样。
 3.6.2相对定位
相对定位与绝对定位的区别在于它的参照点不是左上角的原点，而是该元素本身原先的起点位置。并且即使该元素偏移到了新的位置，也仍然从原始的起点处占据空间。
使用相对定位需要将HTML元素的position属性值设置为relative(相对的)，并同样使用四种关于方位的属性关键词left(左边)、right(右边)、top(顶部)、bottom(底端)中的部分内容设置元素的位置。一般来说，从水平和垂直方向各选一个关键词即可。
例如，需要将段落元素p放置在距离元素初始位置顶端150像素、左边100像素的位置： 



p{

position: relative;

top:150px;

left:100px

}


注意： 相对定位的位置是相对于元素自身的正常初始位置而言的。因此即使是内容完全一样的相对定位代码作用于初始位置不同的多个元素上也仅能保证位移的方向一致，并不能代表这些元素最终将出现在相同的位置上。
【例339】CSS相对定位的应用
使用三个相同CSS样式的段落元素p对比不同的相对定位效果。



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleCSS相对定位的应用/title

6.style

7.div {

8.width: 200px;

9.height: 380px;

10.border: 1px solid;

11.margin-left: 50px;

12.}

13.p {

14.

15.width: 150px;

16.height: 100px;

17.background-color: #C8EDFF;

18.}

19..left {

20.position: relative;

21.left: -50px;




22.}

23..right {

24.position: relative;

25.left: 130px;

26.}

27./style

28./head

29.body

30.h3CSS相对定位的应用/h3

31.hr /

32.div

33.p

34.正常状态的段落

35./p

36.p class="left"

37.相对自己正常的位置向左边偏移了50像素

38./p

39.p class="right"

40.相对自己正常的位置向右边偏移了130像素

41./p

42./div

43./body

44./html




图340CSS相对定位的应用效果

运行效果如图340所示。
【代码说明】
本示例包含了三个样式相同的段落元素p，用于对比测试相对定位效果，并声明了一个带有实线边框效果的div元素包含这三个段落元素，以便对比段落元素位置的偏移量。
使用CSS内部样式表设置了元素选择器为段落元素p和区域元素div定义样式。其中段落元素p的统一样式设置为： 宽150像素、高100像素，并带有背景颜色。区域元素div的样式设置为： 宽200像素、高380像素的矩形，并带有1像素的实线边框。
第一个段落元素为正常显示效果，不做任何位置偏移设置，以便与后面两个段落元素进行位置对比。在CSS内部样式表中使用了类选择器为第二、三个段落元素设置分别向左和右边发生一定量的偏移，并将其position属性设置为relative表示相对定位模式。
如果这三个段落元素都没有做位置偏移会从上往下左对齐显示在div元素中。由图340可见，目前只有第一个段落元素显示位置正常，第二、三个段落元素均根据自己的初始位置发生了指定像素的偏移。
 3.6.3层叠效果
在CSS中，除了定义HTML元素在水平和垂直方向上的位置，还可以定义多个元素在一起叠放的层次。使用属性zindex可以为元素规定层次顺序，其属性值为整数，并且该数值越大将叠放在越靠上的位置。例如，zindex属性值为99的元素一定显示在zindex属性值为10的元素上面。
【例340】CSS层叠效果的应用
使用CSS属性zindex制作扑克牌叠放效果。



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleCSS属性z-index的应用/title

6.style

7.div {

8.width: 182px;

9.height: 253px;

10.position: absolute;

11.}

12.#ten {

13.background: url(image/ten.jpg) no-repeat;

14.z-index: 1;

15.left: 20px;

16.top: 100px;

17.}

18.#jack {

19.background: url(image/jack.jpg) no-repeat;

20.z-index: 2;

21.left: 100px;

22.top: 100px;

23.}

24.#queen {

25.background: url(image/queen.jpg) no-repeat;

26.z-index: 3;

27.left: 180px;

28.top: 100px;

29.}

30.#king {

31.background: url(image/king.jpg) no-repeat;

32.z-index: 4;

33.left: 260px;

34.top: 100px;

35.}

36.#ace {

37.background: url(image/ace.jpg) no-repeat;

38.z-index: 5;

39.left: 340px;

40.top: 100px;

41.}

42./style

43./head

44.body

45.h3CSS属性z-index的应用/h3

46.hr /

47.div id="ten"/div

48.div id="jack"/div

49.div id="queen"/div




50.div id="king"/div

51.div id="ace"/div

52./body

53./html


运行效果如图341所示。


图341CSS属性zindex的应用效果


【代码说明】
本示例包含了五个div元素用于测试层叠效果。首先为div元素设置统一样式： 宽度为182像素、高度为253像素，并使用绝对定位模式。
为这五个div元素分别设置背景图片，图片素材来源于扑克牌红桃10、J、Q、K、A的牌面。背景图片为jpg格式并且均来源于与HTML文档同一目录下的image文件夹。使用方位关键词left和top定位每一个div元素： 所有div元素均距离页面顶端100像素； 距离页面左侧分别为20像素、100像素、180像素、260像素和340像素，即每个div元素往右边平移80像素。
为达到层叠效果，为这五个div元素分别设置zindex属性值，从1开始到5结束。其中红桃10对应zindex:1，因此会显示为叠放在最底层，以此类推每张牌都高一层，直到红桃A对应zindex:5，会显示在最上面。因此最终实现了元素在页面上的层叠效果。
 3.6.4浮动
1. 浮动效果float
在CSS中float属性可以用于令元素向左或向右浮动。以往常用于文字环绕图像效果，实际上任何元素都可以应用浮动效果。该属性有四种属性值，如表337所示。


表337CSS属性float属性值一览表



属性值解释


left元素向左浮动
right元素向右浮动
nonefloat属性的默认值，表示元素不浮动
inherit继承父元素的float属性值


在对元素声明浮动效果后，该浮动元素会自动生成一个块级框，因此需要明确指定浮动元素的宽度，否则会被默认不占空间。元素在进行浮动时会朝着指定的方向一直移动，直到碰到页面的边缘或者上一个浮动框的边缘才会停下来。
如果一行之内的宽度不足以放置浮动元素，则该元素会向下移动直到有足够的空间为止再向着指定的方向进行浮动。
【例341】CSS浮动的简单应用
使用CSS属性float制作文字环绕图片的效果。



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleCSS浮动的应用/title

6.style

7.div {

8.float: left;

9.width: 230px;

10.}

11.p {

12.line-height: 30px;

13.text-indent: 2em;

14.}

15./style

16./head

17.body

18.h3CSS浮动的应用/h3

19.hr /

20.divimg src="image/balloon.jpg" alt="热气球" /

21./div

22.p

23.18世纪，法国造纸商孟格菲兄弟在欧洲发明了热气球。他们受碎纸屑在火炉中不断升起的启发，用纸袋把热气聚集起来做实验，使纸袋能够随着气流不断上升。1783年6月4日，孟格菲兄弟在里昂安诺内广场做公开表演，一个圆周为110英尺的模拟气球升起，飘然飞行了1.5英里。同年9月19日，在巴黎凡尔赛宫前，孟格菲兄弟为国王、王后、宫廷大臣及13万巴黎市民进行了热气球的升空表演。同年11月21日下午，孟格菲兄弟又在巴黎穆埃特堡进行了世界上第一次热气球载人空中飞行，飞行了25分钟，飞越半个巴黎之后降落在意大利广场附近。这次飞行比莱特兄弟的飞机飞行早了整整120年。在充气气球方面，法国的罗伯特兄弟是最先乘充满氢气的气球飞上天空的。(摘自百度百科热气球词条)

24./p

25./body

26./html


运行效果如图342所示。


图342CSS浮动的应用效果


【代码说明】
本示例包含了区域元素div和段落元素p各一个，用于测试段落内容对于图片的环绕效果。区域元素div的CSS样式定义为宽230像素，并且内部嵌套了一个图像元素img，图片来源于本地image文件夹中的balloon.jpg。段落元素p作了简单的文本修饰： 首行缩进2个字符，并且段落行高为30像素。
在默认情况下，段落元素的文字内容会显示在图片的正下方。为div元素增加浮动效果： 设置float属性值为left，表示向左浮动。此时由图342可见，段落元素向上移动并补在了图片的右侧。从而实现了文字环绕图片的效果。
浮动也可以用于将多个元素排成一行，实现单行分列的效果。
【例342】CSS浮动的应用2
使用CSS属性float制作扑克牌排成一行展示的效果。



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleCSS浮动的应用2/title

6.style

7.div {

8.width: 182px;

9.height: 253px;

10.float: left;

11.}

12.#ten {

13.background: url(image/ten.jpg) no-repeat

14.}

15.#jack {

16.background: url(image/jack.jpg) no-repeat

17.}

18.#queen {

19.background: url(image/queen.jpg) no-repeat

20.}

21.#king {

22.background: url(image/king.jpg) no-repeat

23.}

24.#ace {

25.background: url(image/ace.jpg) no-repeat

26.}

27./style

28./head




29.body

30.h3CSS浮动的应用2/h3

31.hr /

32.div id="ten"/div

33.div id="jack"/div

34.div id="queen"/div

35.div id="king"/div

36.div id="ace"/div

37./body

38./html


运行效果如图343所示。


图343CSS浮动的应用效果


【代码说明】
本示例是例340的修改版，将显示为层叠效果的5张扑克牌改为在同一行展开。每张扑克牌仍然使用宽182像素、高253像素的div元素表示。
将这五个用于显示扑克牌面图片的div元素去掉原先的绝对定位与层叠属性zindex，新增float属性值为left，用于测试CSS属性float带来的浮动效果。由于div本身是块级元素会自动换行显示，因此本示例中如果没有添加浮动效果，则这些div元素会从上往下垂直排开。使用了float属性后，div元素会自动向左进行浮动，直到元素的左边外边缘碰到了页面顶端或前一个浮动框的边框时才会停止。
由图343可见，在页面足够宽的情况下，五张牌面可以在同一行进行展示。
注意： 如果浏览器页面缩放尺寸，则有可能造成宽度过窄容纳不下全部的元素，这会导致其他div元素自动向下移动直到拥有足够的空间才能继续显示。
2. 清理浮动clear
CSS中的clear属性可以用于清理浮动效果，它可以规定元素的哪一侧不允许出现浮动元素。该属性有五种属性值，如表338所示。


表338CSS属性clear属性值一览表



属性值解释


left元素的左侧不允许有浮动元素
right元素的右侧不允许有浮动元素
续表


属性值解释


both左右两侧均不允许有浮动元素
noneclear属性的默认值，表示允许浮动元素出现在左右两侧
inherit继承父元素的clear属性值

例如，常用clear:both来清除之前元素的浮动效果。



p{

clear:both;

}


此时该元素不会随着之前的元素进行错误的浮动。
 3.7本章小结
CSS通过样式表来设置页面样式，根据样式表的声明位置分为内联样式表、内部样式表和外部样式表，其中内联样式表的层叠优先级最高。在CSS样式表中可以使用选择器为指定元素设置样式，常用选择器包括元素选择器、ID选择器、类选择器与属性选择器。
CSS样式中可定义的取值包括数字、长度、角度、时间、文本及颜色等内容。CSS常用于对HTML元素背景、边距、文本、字体、超链接、列表和表格的相关样式设置。CSS还包含了四种定位HTML元素的方式，分别是绝对定位、相对定位、层叠定位与浮动。
 习题3

1. CSS样式表有哪几种类型？它们的层叠优先级关系怎样？
2. 常用的CSS选择器有哪些？
3. CSS的注释语句写法是怎样的？
4. CSS颜色值有哪几种表达方式？
5. CSS背景图像的平铺方式有哪几种？
6. 如何使用CSS为文本添加下画线？
7. 如何使用CSS为列表选项设置自定义标志图标？
8. 如何使用CSS实现表格为单线条框样式？
9. 如何使用CSS设置元素的层叠效果？
10. 元素可以向哪些方向进行浮动？如何清除浮动效果？