网页设计基础第五章.ppt

1、第第5章章 CSS基础应用基础应用CSS是是Cascading Style Sheets的缩写，中文意思为层叠式样式表，的缩写，中文意思为层叠式样式表，简称样式表。使用简称样式表。使用CSS可以快速对网页中的元素的样式进行精确可以快速对网页中的元素的样式进行精确控制。与前面使用控制。与前面使用HTML标签控制网页外观不同，使用标签控制网页外观不同，使用CSS来定来定义网页的外观样式可以实现内容和表现的相对分离，提高页面浏义网页的外观样式可以实现内容和表现的相对分离，提高页面浏览速度并有效减少网页制作和维护的工作量。此外，览速度并有效减少网页制作和维护的工作量。此外，CSS还提供还提供了很多利用

2、了很多利用HTML无法控制和实现的显示效果。无法控制和实现的显示效果。5.1 CSS简介简介在在HTML中，用中，用、这样的标签来表达这样的标签来表达“这里是段落这里是段落”、“这里是表格这里是表格”之类的信息，并可以通过浏览器来显示出这些元之类的信息，并可以通过浏览器来显示出这些元素。为了使素。为了使HTML标签在浏览器中显示时能有不同的表现形式，标签在浏览器中显示时能有不同的表现形式，就需要不断地将新的就需要不断地将新的HTML标签和属性（如字体标签和颜色属性）标签和属性（如字体标签和颜色属性）添加到添加到HTML规范中。给规范中。给HTML增加很多的属性，并通过这些添增加很多的属性，并通

3、过这些添加的属性来控制网页的显示效果，使得网页中的加的属性来控制网页的显示效果，使得网页中的HTML代码变得代码变得很臃肿。很臃肿。5.1 CSS简介简介CSS解决了利用解决了利用HTML进行网页排版和显示不同效果时代码臃肿进行网页排版和显示不同效果时代码臃肿的问题。的问题。CSS是一种定义样式（如字体、颜色和位置）的语言，是一种定义样式（如字体、颜色和位置）的语言，用于描述如何格式化和显示网页中的信息。用于描述如何格式化和显示网页中的信息。CSS样式可直接存储样式可直接存储在在HTML网页中，也可存储为独立的样式表文件。不管以哪种方网页中，也可存储为独立的样式表文件。不管以哪种方式保存，样式

4、表都包含将样式应用于特定类型元素的样式规则。式保存，样式表都包含将样式应用于特定类型元素的样式规则。在外部使用时，样式规则放在外部样式表文档中，文件扩展名在外部使用时，样式规则放在外部样式表文档中，文件扩展名为为.css。5.1 CSS简介简介样式规则可应用于网页中的各种元素，如文本段落或链接的格式样式规则可应用于网页中的各种元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。化指令。样式规则由一个或多个样式属性及其值组成。CSS中的中的“层叠（层叠（cascading）”表示样式规则应用于表示样式规则应用于HTML文档元素的文档元素的方式。方式。具体地说，具体地说，C

5、SS中的样式形成一个层次结构，更具体的样式覆盖中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由通用样式。样式规则的优先级由CSS根据这个层次结构决定，从根据这个层次结构决定，从而实现层叠效果。可将而实现层叠效果。可将CSS的层叠机制看成一种类似继承的关系，的层叠机制看成一种类似继承的关系，在这种继承关系中，父亲的特征传递给子女，但子女有更特殊的在这种继承关系中，父亲的特征传递给子女，但子女有更特殊的特征。基本样式规则适用于整个样式表，但可被更具体的样式规特征。基本样式规则适用于整个样式表，但可被更具体的样式规则覆盖。则覆盖。5.1 CSS简介简介综上所述，简单地说，综上所

6、述，简单地说，HTML的标签主要是定义网页元素的内容，的标签主要是定义网页元素的内容，而而CSS决定如何显示决定如何显示HTML元素，就像元素，就像HTML的字体标签和颜色的字体标签和颜色属性所起的作用那样。由于允许同时控制多重页面的样式和布局，属性所起的作用那样。由于允许同时控制多重页面的样式和布局，CSS可以称得上是可以称得上是Web设计领域中的一个突破。网站开发者能够设计领域中的一个突破。网站开发者能够为每个为每个HTML元素定义元素定义CSS样式，并将其应用于希望的任意多个样式，并将其应用于希望的任意多个页面中。如果需要进行全局更新，只需简单地改变样式，网站中页面中。如果需要进行全局更

7、新，只需简单地改变样式，网站中的所有元素就会自动地更新。的所有元素就会自动地更新。5.1.1 CSS语法语法要想使用要想使用CSS对网页的布局、字体、颜色、背景和其他显示效果对网页的布局、字体、颜色、背景和其他显示效果进行精确地控制，需要先掌握进行精确地控制，需要先掌握CSS的基本语法。的基本语法。1.CSS语法格式语法格式CSS语法由语法由selector（选择符）、（选择符）、property（属性）和（属性）和value（值）（值）3部分部分构成，语法格式如下：构成，语法格式如下：selectorproperty:valueselector通常是希望定义的通常是希望定义的HTML元素或标

8、签，元素或标签，property是希望改变的属是希望改变的属性，每个属性都有一个值。属性和值用冒号分开，由花括号括起来，这性，每个属性都有一个值。属性和值用冒号分开，由花括号括起来，这样 就 组 成 了 一 个 完 整 的 样 式 声 明（样 就 组 成 了 一 个 完 整 的 样 式 声 明（d e c l a r a t i o n）。例 如，）。例 如，bodycolor:blue表示将表示将body元素内的前景色（文字颜色）定义为蓝色。元素内的前景色（文字颜色）定义为蓝色。其中，其中，body是选择符，花括号内的部分是样式声明，是选择符，花括号内的部分是样式声明，color为属性，为属

9、性，blue为值。为值。1.CSS语法格式语法格式如果属性的值是由多个单词组成的，则必须将值用引号引起来，例如：如果属性的值是由多个单词组成的，则必须将值用引号引起来，例如：pfont-family:sans serif当需要对一个选择符的多个属性指定值时，使用分号将所有的属性和值当需要对一个选择符的多个属性指定值时，使用分号将所有的属性和值分开，例如分开，例如:ptext-align:center;color:red 为了提高为了提高CSS样式代码的可读性，也可以分行写成下面的形式：样式代码的可读性，也可以分行写成下面的形式：Ptext-align:center;color:red2.选择符

10、选择符CSS语法中的选择符包括以下几种类型，这里除了基本的语法中的选择符包括以下几种类型，这里除了基本的HTML元素或标签之外，还有一些其他类型。元素或标签之外，还有一些其他类型。1）类型选择符类型选择符以文档语言对象类型（类型选择符以文档语言对象类型（element）为选择符。对于）为选择符。对于HTML文档来说就是网页，而文档语言对象类型就是文档来说就是网页，而文档语言对象类型就是HTML中的中的元素或标签，类型选择符的语法格式如下：元素或标签，类型选择符的语法格式如下：EsRules例如，例如，pfont-size:2px;定义的样式是设置所有段落标签中文字定义的样式是设置所有段落标签中

11、文字的字号为的字号为12px，其中的段落标签，其中的段落标签p就是类型选择符。就是类型选择符。2）类选择符类选择符能够把相同的元素分类定义为不同的样式，定义类选择类选择符能够把相同的元素分类定义为不同的样式，定义类选择符时，需要在定义的类的名称前面加一个点号。类选择符的语法符时，需要在定义的类的名称前面加一个点号。类选择符的语法格式如下：格式如下：E.CLASSsRules例如，要对两个段落进行设置，一个段落设置为右对齐，一个段例如，要对两个段落进行设置，一个段落设置为右对齐，一个段落设置为居中，可以先定义两个类：落设置为居中，可以先定义两个类：p.righttext-align:rightp

12、.centertext-align:center以后要将类用在不同的段落中时，只需在以后要将类用在不同的段落中时，只需在HTML标签中加入定义标签中加入定义的的class参数：参数：2）类选择符类选择符还有一种用法，即在选择符中省略类选择符还有一种用法，即在选择符中省略HTML标签名，这样标签名，这样可以把几个不同的元素定义成相同的样式，例如，可以把几个不同的元素定义成相同的样式，例如，.center text-align:center表示定义表示定义.center的类选择符为文字居中排列。的类选择符为文字居中排列。这样的类可以被应用到任何元素上。下面使这样的类可以被应用到任何元素上。下面使h

13、1元素（标题元素（标题1）和）和p元素（段落）都归为元素（段落）都归为.center类，使两个元素的样式都跟随类，使两个元素的样式都跟随.center这个类选择符，语句如下：这个类选择符，语句如下：这种省略这种省略HTML标签的类选择符是最常用的标签的类选择符是最常用的CSS选择符类型，使选择符类型，使用这种方法，用户可以很方便地在任意元素上套用预先定义好的用这种方法，用户可以很方便地在任意元素上套用预先定义好的类样式。类样式。3）ID选择符ID选择符以选择符以“#”来定义。来定义。ID选择符可以为标有特定选择符可以为标有特定ID的的HTML元素指定特定的样式。由于同一元素指定特定的样式。由于

14、同一HTML文档中元素的文档中元素的ID是唯一是唯一的，所以的，所以ID只能在一个页面中出现一次。只能在一个页面中出现一次。ID选择符的语法格式选择符的语法格式如下：如下：#IDsRules例如，例如，#red color:red;表示定义元素的颜色为红色，表示定义元素的颜色为红色，#green color:green;表示定义元素的颜色为绿色表示定义元素的颜色为绿色下面的下面的HTML代码中，代码中，id属性为属性为red的的p元素显示为红色，而元素显示为红色，而id属属性为性为green的的p元素显示为绿色。元素显示为绿色。这个段落是红色。这个段落是红色。这个段落是绿色。这个段落是绿色。由

15、于由于ID选择符局限性很大，只能单独定义某个元素的样式，一般选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。只在特殊情况下使用。4）包含选择符如果需要单独对某种元素的包含关系定义样式表，如元素如果需要单独对某种元素的包含关系定义样式表，如元素1中包中包含元素含元素2，只对在元素，只对在元素1中的元素中的元素2进行定义，对单独的元素进行定义，对单独的元素1或元或元素素2无定义，那么可以使用包含选择符，其语法格式为：无定义，那么可以使用包含选择符，其语法格式为：E1 E2sRules例如，例如，table afont-size:12px表示改变在表格内的链接样式文字表示改变在

16、表格内的链接样式文字大小为大小为12像素，而表格外的链接的文字仍为默认大小。像素，而表格外的链接的文字仍为默认大小。5）选择符分组为了减少样式的重复定义，可以把相同属性和值的选择符组合起为了减少样式的重复定义，可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，其语法格式如下：来书写，用逗号将选择符分开，其语法格式如下：E1,E2,E3sRules例如：例如：h1,h2,h3,h4,h5,h6 color:green表示该选择符分组中包含的所有标题元素，每个标题元素的文字都为绿表示该选择符分组中包含的所有标题元素，每个标题元素的文字都为绿色。其效果完全等效于：色。其效果完全等效于：h1

17、 color:green h2 color:greenh3 color:green h4 color:greenh5 color:green h6 color:green5.1.2 层叠性层叠性层叠性就是继承性，层叠性就是继承性，CSS的继承规则是外部的元素样式会保留下的继承规则是外部的元素样式会保留下来给这个元素所包含的其他元素继承。事实上，所有在元素中嵌来给这个元素所包含的其他元素继承。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。例如，在的样式叠加在一起，除非另外更改。

18、例如，在标签中嵌套标签中嵌套标签，并对标签，并对div进行如下样式定义：进行如下样式定义：divcolor:red;font-size:9pt例如，例如，HTML文档中存在如下代码时：文档中存在如下代码时：这个段落的文字为红色这个段落的文字为红色9号字号字5.1.2 层叠性层叠性p元素中的内容会继承元素中的内容会继承div定义的属性，在段落中的文字将均为红定义的属性，在段落中的文字将均为红色色9号字。这就是层叠的概念或者说是继承的概念。需要注意的号字。这就是层叠的概念或者说是继承的概念。需要注意的是，有些情况下内部选择符不继承其外部选择符的值。例如，上是，有些情况下内部选择符不继承其外部选择符

19、的值。例如，上边框的属性值是不会继承的，但理论上这些都是特殊的个别现象，边框的属性值是不会继承的，但理论上这些都是特殊的个别现象，用户只需要记住几个特别不会进行继承的属性值的就行了。用户只需要记住几个特别不会进行继承的属性值的就行了。另外，当样式表层叠或继承遇到冲突时，总是以最后定义的样式另外，当样式表层叠或继承遇到冲突时，总是以最后定义的样式为准。如果上例中定义了为准。如果上例中定义了p元素的颜色：元素的颜色：div color:red;font-size:9ptp color:blue5.1.2 层叠性层叠性那么上面代码中段落的文字应该为蓝色那么上面代码中段落的文字应该为蓝色9号字。其中，

20、段落中的号字。其中，段落中的文字大小为文字大小为9号字是继承号字是继承div属性的，而属性的，而color属性则依照最后属性则依照最后p中中定义的属性进行显示。定义的属性进行显示。不同的选择符定义相同的元素时，要考虑到不同的选择符之间的不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。在优先级。在ID选择符、类选择符和类型选择符中，因为选择符、类选择符和类型选择符中，因为ID选择选择符是最后加到元素上的，所以优先级最高，其次是类选择符，最符是最后加到元素上的，所以优先级最高，其次是类选择符，最后是类型选择符。后是类型选择符。5.1.3 注释注释在在CSS中可以插入注释来说明代码的

21、意思。注释有利于以后编辑中可以插入注释来说明代码的意思。注释有利于以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以注释以“/*”开头，以开头，以“*/”结尾，例如：结尾，例如：/*定义段落样式表定义段落样式表*/Ptext-align:center;/*文本居中排列文本居中排列*/ccs color:black;/*文字为黑色文字为黑色*/font-family:arial /*字体为字体为arial*/在网页中嵌入的样式表有在网页中嵌入的样式表有4种，分别是：链接的外部样式表、内种，分别是：链接的外部样式表、

22、内部样式表、嵌入样式表和导入的样式表。在将这部样式表、嵌入样式表和导入的样式表。在将这4种种CSS文件插文件插入入HTML文件时，文件时，CSS文件的定义可以放置在文件的定义可以放置在HTML文件的头部、文件的头部、主体和外部。其中，内部样式表定义在主体和外部。其中，内部样式表定义在HTML文件头部，嵌入样文件头部，嵌入样式表定义在式表定义在HTML文件主体，外部样式表、导入样式表定义在文件主体，外部样式表、导入样式表定义在HTML文件的外部。文件的外部。5.1.4 在网页中插入在网页中插入CSS插入链接的外部样式表先要把样式表保存为一个单独的文件，然插入链接的外部样式表先要把样式表保存为一个

23、单独的文件，然后在后在HTML文件中使用文件中使用标签链接，这个标签链接，这个标签必须放标签必须放到到HTML代码的代码的中。中。插入链接的外部样式表的语法格式如下：插入链接的外部样式表的语法格式如下：1.链接的外部样式表链接的外部样式表其中，其中，rel=“stylesheet”是指在是指在HTML文件中使用的是外部样式表，文件中使用的是外部样式表，type=“text/css”指明该文件的类型是样式表文件；指明该文件的类型是样式表文件；href用于设置用于设置样式表文件的地址，可以为绝对地址或相对地址。外部样式表文样式表文件的地址，可以为绝对地址或相对地址。外部样式表文件中不能包含有任何件

24、中不能包含有任何HTML标签，并且标签，并且CSS要和要和HTML文件一起文件一起发布到服务器上，这样在浏览器中打开网页时，浏览器会按照发布到服务器上，这样在浏览器中打开网页时，浏览器会按照HTML网页所链接的外部样式表来显示。网页所链接的外部样式表来显示。1.链接的外部样式表链接的外部样式表一个链接的外部样式表文件可以应用于多个一个链接的外部样式表文件可以应用于多个HTML文件中。当改文件中。当改变这个样式表文件时，所有链接了该样式表的网页都随之改变。变这个样式表文件时，所有链接了该样式表的网页都随之改变。因此链接的外部样式表常用在制作大量相同样式的网页中，因为因此链接的外部样式表常用在制作

25、大量相同样式的网页中，因为使用这种方法不仅能够减少重复工作量，而且方便以后的修改和使用这种方法不仅能够减少重复工作量，而且方便以后的修改和编辑，有利于站点的维护。同时，在浏览网页时一次性将样式表编辑，有利于站点的维护。同时，在浏览网页时一次性将样式表文件下载，减少了代码的重复下载。文件下载，减少了代码的重复下载。1.链接的外部样式表链接的外部样式表插入内部样式表是通过插入内部样式表是通过标签把样式表的内容直接定义在标签把样式表的内容直接定义在HTML文件的文件的标签内。插入内部样式表的语法格式如下：标签内。插入内部样式表的语法格式如下：2.内部样式表内部样式表其中，其中，标签用来说明所要定义的

26、样式，标签用来说明所要定义的样式，type=“text/css”说说明这是一段样式表代码。明这是一段样式表代码。标签的加入是为了防止一些不标签的加入是为了防止一些不支持支持CSS的浏览器将的浏览器将之间的之间的CSS代码当成普通的代码当成普通的字符串显示在网页中。字符串显示在网页中。插入内部样式表就是将所有的插入内部样式表就是将所有的CSS样式表信息都列于样式表信息都列于HTML文件文件的头部，这些样式就可以在这个的头部，这些样式就可以在这个HTML文件内部进行调用。如果文件内部进行调用。如果想对网页一次性插入样式表，则可选用该方法。想对网页一次性插入样式表，则可选用该方法。2.内部样式表内部

27、样式表插入嵌入样式表是在插入嵌入样式表是在HTML代码的主体，即代码的主体，即内内的标签或元素中直接加入样式表。用这种方法可以很直观地对某的标签或元素中直接加入样式表。用这种方法可以很直观地对某个元素直接定义样式。插入嵌入样式表的语法格式如下：个元素直接定义样式。插入嵌入样式表的语法格式如下：3.嵌入样式表嵌入样式表其中，其中，HTML标签就是页面中标记标签就是页面中标记HTML元素的标签，如元素的标签，如、等。等。sytle参数后面引号中的内容就相当于样式表花参数后面引号中的内容就相当于样式表花括号中的内容，括号中的内容，style参数可以应用于参数可以应用于HTML文件中的文件中的标标签，

28、以及除了签，以及除了、和和之外的任意网页之外的任意网页元素。元素。嵌入样式表的效果只能控制某个标签，所以比较适用于指定网页嵌入样式表的效果只能控制某个标签，所以比较适用于指定网页中某一小段文字的显示风格或某个元素的样式。中某一小段文字的显示风格或某个元素的样式。3.嵌入样式表嵌入样式表插入导入的外部样式表是指在样式表的插入导入的外部样式表是指在样式表的区域内引用一个外区域内引用一个外部的样式表文件，和插入外部样式表的方法类似，但导入时需要部的样式表文件，和插入外部样式表的方法类似，但导入时需要使用使用import进行声明，一般都放在进行声明，一般都放在内来使用。内来使用。插入导入的外部样式表的

29、语法格式如下：插入导入的外部样式表的语法格式如下：import url(外部样式表文件地址外部样式表文件地址)；4.导入的外部样式表导入的外部样式表在这里，在这里，import语句后的语句后的“；”是不可省略的，另外外部样式表是不可省略的，另外外部样式表文件的扩展名必须为文件的扩展名必须为.css，样式表地址同样既可以是绝对地址也，样式表地址同样既可以是绝对地址也可以是相对地址。某些浏览器可能会不支持导入的外部样式表，可以是相对地址。某些浏览器可能会不支持导入的外部样式表，所以此方法没有链接的样式表常用。所以此方法没有链接的样式表常用。4.导入的外部样式表导入的外部样式表网页中存在最多的元素就

30、是文字，如何高效地控制文字的表现形网页中存在最多的元素就是文字，如何高效地控制文字的表现形式是网页设计人员非常关心的问题。设置文字的字体属性是式是网页设计人员非常关心的问题。设置文字的字体属性是CSS最常见的用途之一。最常见的用途之一。CSS的字体属性可以用于设置字体系列的字体属性可以用于设置字体系列（font-family）、字体大小（）、字体大小（font-size）、字体加粗（）、字体加粗（font-weight）、字体风格（）、字体风格（font-style）和字体变形（）和字体变形（font-variant）等。）等。5.2 设置文本字体设置文本字体字体系列也就是平常所说的字体，如宋

31、体、黑体、楷体等。在字体系列也就是平常所说的字体，如宋体、黑体、楷体等。在CSS中可以通过设置中可以通过设置font-family属性来设置在网页中采用哪种字属性来设置在网页中采用哪种字体系列，其语法格式如下：体系列，其语法格式如下：font-family:字体字体1,字体字体2,字体字体3应用应用font-family属性可以一次定义多个字体，在浏览器读取字体属性可以一次定义多个字体，在浏览器读取字体时，会按照定义的先后顺序来决定选用哪种字体。若浏览器在计时，会按照定义的先后顺序来决定选用哪种字体。若浏览器在计算机上找不到第一种字体，则会自动读取第二种字体，若第二种算机上找不到第一种字体，则

32、会自动读取第二种字体，若第二种字体也找不到，则自动读取第三种字体，这样依次类推。如果定字体也找不到，则自动读取第三种字体，这样依次类推。如果定义的所有字体都找不到，则选用计算机系统的默认字体。义的所有字体都找不到，则选用计算机系统的默认字体。5.2.1 字体系列字体系列在定义英文字体时，如果英文字体名称是由多个单词组成的，并在定义英文字体时，如果英文字体名称是由多个单词组成的，并且单词之间有空格，那么一定要将字体名用引号引起来。例如，且单词之间有空格，那么一定要将字体名用引号引起来。例如，font-family:“Times News Roman”。如果在浏览器所在的计算机上找不到指定字体，则

33、按顺序选择字如果在浏览器所在的计算机上找不到指定字体，则按顺序选择字体进行显示，如果所有指定字体都找不到，则用默认字体进行显体进行显示，如果所有指定字体都找不到，则用默认字体进行显示。示。5.2.1 字体系列字体系列【例【例5-1】定义标题定义标题2的字体为黑体，定义段落的字体为黑体，定义段落p的字体的先后顺序是隶书、的字体的先后顺序是隶书、楷体、宋体。样式的代码如下：楷体、宋体。样式的代码如下：h2font-family:黑体黑体pfont-family:隶书隶书,楷体楷体,宋体宋体网页中的元素应用该样式表后，在浏览器中的显示效果如图网页中的元素应用该样式表后，在浏览器中的显示效果如图5-1

34、所示。所示。图图5-1 设置字体系列设置字体系列网页中文字字体大小的一致性和协调性直接决定了访问者访问网网页中文字字体大小的一致性和协调性直接决定了访问者访问网页时的直接视觉感受。通过页时的直接视觉感受。通过CSS中字体大小属性中字体大小属性font-size的设置，的设置，可以精确设置网页中字体的大小。设置字体大小的语法格式如下：可以精确设置网页中字体的大小。设置字体大小的语法格式如下：font-size:绝对尺寸绝对尺寸|相对尺寸相对尺寸|关键字关键字|百分比百分比5.2.2 字体大小字体大小绝对尺寸是指字体大小不会受其他元素的影响而变化，如显示分绝对尺寸是指字体大小不会受其他元素的影响而

35、变化，如显示分辨率、父元素字体大小等。使用绝对尺寸设置字体大小时，需要辨率、父元素字体大小等。使用绝对尺寸设置字体大小时，需要指定单位。常见的绝对尺寸单位包括指定单位。常见的绝对尺寸单位包括in（英寸）、（英寸）、px（像素）、（像素）、pt（点或磅值）等，最常用的单位是（点或磅值）等，最常用的单位是px。如果没有指定单位，浏。如果没有指定单位，浏览器会默认以览器会默认以px为单位。相对尺寸是指字体大小会继承该元素属为单位。相对尺寸是指字体大小会继承该元素属性的前一个属性值。绝对尺寸和相对尺寸也可以使用关键字来定性的前一个属性值。绝对尺寸和相对尺寸也可以使用关键字来定义字体大小。义字体大小。5

36、.2.2 字体大小字体大小绝对尺寸的关键字有绝对尺寸的关键字有7个，分别是个，分别是xx-small（极小）、（极小）、x-small（较小）、（较小）、small（小）、（小）、medium（标准）、（标准）、large（大）、（大）、x-large（较大）、（较大）、xx-large（极大）。相对尺寸有两个关键字（极大）。相对尺寸有两个关键字larger（较大）和（较大）和smaller（较小）。相对尺寸（较小）。相对尺寸larger是指在它上是指在它上一个关键字基础上扩大一级，而一个关键字基础上扩大一级，而smaller是指缩小一级。百分比是指缩小一级。百分比是以父元素字体的大小为参考值

37、，在父元素字体大小的基础上增是以父元素字体的大小为参考值，在父元素字体大小的基础上增大或缩小的百分比。大或缩小的百分比。5.2.2 字体大小字体大小【例【例5-2】利用绝对尺寸定义类样式利用绝对尺寸定义类样式p1的字体大小为的字体大小为0.2英寸，类样式英寸，类样式p2的的字体大小为字体大小为16px，类样式，类样式p3的字体大小为的字体大小为18pt。样式代码如下：。样式代码如下：.p1font-size:0.2in.p2font-size:16px.p3font-size:18pt网页中元素应用该样式后，在浏览器中的显示效果如图网页中元素应用该样式后，在浏览器中的显示效果如图5-2所示。所

38、示。图图5-2 用用font-size设置字体大小设置字体大小利用关键字定义类样式利用关键字定义类样式p1的字体大小为的字体大小为xx-small，类样式，类样式p2的字的字体大小为体大小为x-small，类样式，类样式p3的字体大小为的字体大小为small，类样式，类样式p4的字的字体大小为体大小为medium，类样式，类样式p5的字体大小为的字体大小为large，类样式，类样式p6的字的字体大小为体大小为x-large，类样式，类样式p7的字体大小为的字体大小为xx-large。样式代码如下：样式代码如下：.p1font-size:xx-small .p2font-size:x-small

39、.p3font-size:small .p4font-size:medium.p5font-size:large .p6font-size:x-large.p7font-size:xx-large网页中元素应用这些样式的显示效果如图网页中元素应用这些样式的显示效果如图5-3所示。所示。【例【例5-3】图图5-3 使用关键字设置字体大小使用关键字设置字体大小在在CSS中，使用中，使用font-weight属性可设置字体加粗效果，相当于属性可设置字体加粗效果，相当于HTML中的中的或或标签。设置字体加标签。设置字体加粗效果的语法格式如下：粗效果的语法格式如下：font-weight:normal|

40、bold|bolder|lighter|numberfont-weight的属性值的属性值normal代表正常粗细，代表正常粗细，bold表示粗体，表示粗体，bolder表示加粗体，表示加粗体，lighter表示比正常字体还细的细体，表示比正常字体还细的细体，number表示按照数值来进行加粗，数值有表示按照数值来进行加粗，数值有100900共共9个级别，数值越大个级别，数值越大字体越粗，而前面的字体越粗，而前面的bold值相当于数值值相当于数值700。5.2.3 字体加粗字体加粗定义定义5个字体加粗的样式类个字体加粗的样式类.p1.p5。样式代码如下：。样式代码如下：.p1font-weig

41、ht:normal.p2font-weight:lighter.p3font-weight:bold.p4font-weight:bolder.p5font-weight:900网页中元素应用这些样式后，在浏览器中的显示效果如图网页中元素应用这些样式后，在浏览器中的显示效果如图5-4所所示。示。【例【例5-4】图图5-4 设置字体加粗效果设置字体加粗效果在在HTML中可以使用中可以使用标签将字体设置为斜体，而在标签将字体设置为斜体，而在CSS中使中使用用font-style属性来设置字体的斜体效果。设置字体风格的语法格属性来设置字体的斜体效果。设置字体风格的语法格式如下：式如下：font-st

42、yle:normal|italic|oblique其中，其中，normal表示正常显示文字，表示正常显示文字，italic表示斜体显示文字，表示斜体显示文字，oblique表示比斜体表示比斜体italic倾斜角度更大的一种斜体显示方式。倾斜角度更大的一种斜体显示方式。5.2.4 设置斜体设置斜体定义定义3个字体加粗的样式类个字体加粗的样式类.p1.p3。样式代码如下：。样式代码如下：.p1font-style:normal.p2font-style:italic.p3font-style:oblique网页中元素应用这些样式后，在浏览器中的显示效果如图网页中元素应用这些样式后，在浏览器中的显示

43、效果如图5-5所所示。示。【例【例5-5】图图5-5 设置斜体效果设置斜体效果设置字体变形，就是设置英文字体是否显示为小型的大写字母。设置字体变形，就是设置英文字体是否显示为小型的大写字母。在在CSS中使用中使用font-variant属性设置英文字体变形效果。设置字体属性设置英文字体变形效果。设置字体变形的语法格式如下：变形的语法格式如下：font-variant：normal|small-caps其中，其中，normal表示正常字体，表示正常字体，small-caps表示英文字体显示为小表示英文字体显示为小型大写字母。型大写字母。5.2.5 字体变形字体变形定义定义2个字体风格的样式类个字

44、体风格的样式类.p1和和.p2，分别代表正常字体和将英文，分别代表正常字体和将英文字体显示为小型大写字母。样式代码如下：字体显示为小型大写字母。样式代码如下：.p1font-variant:normal.p2font-variant:small-caps网页中元素应用这些样式后，在浏览器中的显示效果如图网页中元素应用这些样式后，在浏览器中的显示效果如图5-6所所示。示。【例【例5-6】图图5-6 设置英文字体变形效果设置英文字体变形效果font是一种复合属性，可以同时对字体的多个属性进行设置，包是一种复合属性，可以同时对字体的多个属性进行设置，包括字体系列、字体大小、字体风格、字体加粗和字体变

45、形。设置括字体系列、字体大小、字体风格、字体加粗和字体变形。设置字体多个属性的语法格式如下：字体多个属性的语法格式如下：font:font-family|font-size|font-style|font-weight|font-variantfont属性用于在设置多个字体属性时进行略写，直接写字体属性属性用于在设置多个字体属性时进行略写，直接写字体属性的属性值，属性值和属性值之间用空格隔开。的属性值，属性值和属性值之间用空格隔开。5.2.6设置字体的多个属性设置字体的多个属性定义样式定义样式.p1，代表字体为黑体，字体大小为，代表字体为黑体，字体大小为18px，字体风格为，字体风格为斜体，字

46、体加粗并将英文字体显示为小型大写字母等多个样式属斜体，字体加粗并将英文字体显示为小型大写字母等多个样式属性。样式代码如下：性。样式代码如下：.p1 font:small-caps bold italic 18px 黑体黑体网页中元素应用这些样式后，在浏览器中的显示效果如图网页中元素应用这些样式后，在浏览器中的显示效果如图5-7所所示。示。【例【例5-7】图图5-7 设置字体的多个属性设置字体的多个属性CSS中的文本样式是指文本段落的样式。通过设置文本样式的相中的文本样式是指文本段落的样式。通过设置文本样式的相关属性，可以改变文本缩进、文本对齐、字间隔、文本装饰，行关属性，可以改变文本缩进、文本

47、对齐、字间隔、文本装饰，行间距等。通常这些外观样式很难通过间距等。通常这些外观样式很难通过HTML进行控制，而进行控制，而CSS的的文本样式解决了相应的问题。文本样式解决了相应的问题。5.3 设置文本样式设置文本样式text-indent属性用来控制文本段落首行缩进的距离。当该属性没属性用来控制文本段落首行缩进的距离。当该属性没有设置属性值时，默认值为不进行文本缩进。设置段落缩进的语有设置属性值时，默认值为不进行文本缩进。设置段落缩进的语法格式如下：法格式如下：text-indent:长度长度|百分比百分比其中，缩进的长度包括长度值和长度单位，长度单位可以使用之其中，缩进的长度包括长度值和长度

48、单位，长度单位可以使用之前提到的前提到的px（像素）、（像素）、pt（点或磅值）等所有的单位。百分比则（点或磅值）等所有的单位。百分比则是相对上一级元素的宽度而定的。是相对上一级元素的宽度而定的。5.3.1 文本段落缩进文本段落缩进定义样式定义样式.p1.p3，设置文本段落首行缩进的距离为，设置文本段落首行缩进的距离为30px、30pt和和10%。样式代码如下：。样式代码如下：.p1 text-indent:30px.p2 text-indent:30pt.p3 text-indent:10%网页中元素应用这些样式后，在浏览器中的显示效果如图网页中元素应用这些样式后，在浏览器中的显示效果如图5

49、-8所所示。示。【例【例5-8】图图5-8 设置文本段落缩进设置文本段落缩进text-align属性用来控制文本对齐的方式，其功能类似于属性用来控制文本对齐的方式，其功能类似于Word中中的段落对齐方式。设置文本对齐方式的语法格式如下：的段落对齐方式。设置文本对齐方式的语法格式如下：text-align:left|right|center|justify其中，其中，left、right、center、justify分别表示左对齐、右对齐、居分别表示左对齐、右对齐、居中对齐和两端对齐。该属性可以应用于中对齐和两端对齐。该属性可以应用于HTML中的任何块级标签，中的任何块级标签，如如、等。等。5.

50、3.2 文本对齐方式文本对齐方式定义样式定义样式.p1设置文本的水平对齐方式为左对齐，样式设置文本的水平对齐方式为左对齐，样式.p2为右对为右对齐，样式齐，样式.p3为居中对齐，样式为居中对齐，样式.p4为两端对齐。样式代码如下：为两端对齐。样式代码如下：.p1text-align:left.p2text-align:right.p3text-align:center.p4text-align:justify网页中的元素应用这些样式后，在浏览器中的显示效果如图网页中的元素应用这些样式后，在浏览器中的显示效果如图5-9所示。所示。【例【例5-9】图图5-9 设置文本对齐方式设置文本对齐方式wor