1、汤智华汤智华 主编主编王爱红王爱红 主审主审【教学导航】【教学导航】教学目标教学目标（1 1）学会建立站点目录结构）学会建立站点目录结构（2 2）熟悉使用骨架创建和保存网页文档等基本操作）熟悉使用骨架创建和保存网页文档等基本操作（3 3）掌握在网页中输入文字、编辑文本、设置文本属性的操作方法）掌握在网页中输入文字、编辑文本、设置文本属性的操作方法（4 4）掌握在网页中输入空格和文本换行的操作方法）掌握在网页中输入空格和文本换行的操作方法（5 5）掌握在网页中插入特殊字符、水平线、注释和换行的操作方法）掌握在网页中插入特殊字符、水平线、注释和换行的操作方法（6 6）掌握在网页中插入图像、设置图像
2、属性的方法）掌握在网页中插入图像、设置图像属性的方法（7 7）掌握制作图文混排网页的技巧）掌握制作图文混排网页的技巧（8 8）熟悉）熟悉HTMLHTML的基本结构的基本结构本单元重点本单元重点（1 1）对网页文档的基本操作）对网页文档的基本操作（2 2）在网页中输入文字、编辑文本和设置文本属性）在网页中输入文字、编辑文本和设置文本属性（3 3）在网页中输入空格和文本换行）在网页中输入空格和文本换行（4 4）在网页中插入图像、设置图像属性）在网页中插入图像、设置图像属性本单元难点本单元难点（1 1）在网页中插入特殊字符、插入水平线、注释和换行）在网页中插入特殊字符、插入水平线、注释和换行（2 2
3、）在网页中插入图像、设置图像属性）在网页中插入图像、设置图像属性教学方法教学方法任务驱动法、分组讨论法任务驱动法、分组讨论法3.1 3.1 掌握掌握CSSCSS样式规则、样式规则、CSSCSS样式表的引入方式样式表的引入方式3.1.1 CSS3.1.1 CSS样式规则样式规则一、一、CSSCSS样式规则的重要性样式规则的重要性 使用使用HTMLHTML时，需要遵从一定的规范。时，需要遵从一定的规范。CSSCSS亦如此，要想熟练地亦如此，要想熟练地使用使用CSSCSS对网页进行修饰，首先需要了解对网页进行修饰，首先需要了解CSSCSS样式规则，具体格式如下：样式规则，具体格式如下：选择器选择器
4、属性属性1:1:属性值属性值1;1;属性属性2:2:属性值属性值2;2;属性属性3:3:属性值属性值3;3;在上面的样式规则中，选择器用于指定在上面的样式规则中，选择器用于指定CSSCSS样式作用的样式作用的HTMLHTML对象，对象，花括号内是对该对象设置的具体样式。其中，属性和属性值以花括号内是对该对象设置的具体样式。其中，属性和属性值以“键值键值对对”的形式出现，属性是对指定的对象设置的样式属性，例如字体大的形式出现，属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。小、文本颜色等。属性和属性值之间用英文属性和属性值之间用英文“:”连接，多个连接，多个“键值对键值对”之间用英文
5、之间用英文“;”进行区分。进行区分。所谓键值对，就是可以根据一个键值获得对应的一个值。键值对所谓键值对，就是可以根据一个键值获得对应的一个值。键值对跟数学中的跟数学中的“一对一一对一”映射关系是一个意思。映射关系是一个意思。二、书写二、书写CSSCSS样式时需要注意的问题样式时需要注意的问题 书写书写CSSCSS样式时，除了要遵循样式时，除了要遵循CSSCSS样式规则，还必须注意几个问题，样式规则，还必须注意几个问题，具体如下。具体如下。CSS CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将书写习惯一般将“选
6、择器、属性和值选择器、属性和值”都采用小写的方式。都采用小写的方式。多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是，为了便于增加新样式最好保留。可以省略，但是，为了便于增加新样式最好保留。如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。加上英文状态下的引号。在编写在编写CSSCSS代码时，为了提高代码的可读性，通常会加上代码时，为了提高代码的可读性，通常会加上CSSCSS注释。注释。3.1.2 3.1.2 引入引入
7、CSSCSS样式表的方式样式表的方式一、引入一、引入CSSCSS样式表的重要性样式表的重要性 要想使用要想使用CSSCSS修饰网页，就需要在修饰网页，就需要在HTMLHTML文档中引入文档中引入CSSCSS样式表。样式表。二、引入二、引入CSSCSS样式表的方式样式表的方式 CSS CSS提供了提供了4 4种引入方式，具体如下。种引入方式，具体如下。1 1行内式行内式 行内式也称为内联样式，是通过标记的行内式也称为内联样式，是通过标记的stylestyle属性来设置元素的样属性来设置元素的样式，其基本语法格式如下：式，其基本语法格式如下：3;内容内容/该语法中该语法中stylestyle是标记
8、的属性，实际上任何是标记的属性，实际上任何HTMLHTML标记都拥有标记都拥有stylestyle属属性，用来设置行内式。性，用来设置行内式。其中属性和值的书写规范与其中属性和值的书写规范与CSSCSS样式规则相同，行内式只对其所在样式规则相同，行内式只对其所在的标记及嵌套在其中的子标记起作用。的标记及嵌套在其中的子标记起作用。接下来通过一个案例来学习如何在接下来通过一个案例来学习如何在HTMLHTML文档中使用行内式文档中使用行内式CSSCSS样式，具体代码如下：样式，具体代码如下：!DOCTYPE HTML PUBLIC-/W3C/DTD HTML 4.01 Transitional/EN
9、 http:/www.w3.org/TR/html4/loose.dtdmeta http-equiv=Content-type content=text/html;=utf-8/meta name=keywords content=2/meta name=description content=/使用使用CSSCSS行内式行内式h2 style=font-size:20px;使用使用CSSCSS行内式修饰二级标题的行内式修饰二级标题的字体大小和颜色字体大小和颜色 运行例程代码，得到效果如图运行例程代码，得到效果如图3-13-1所示。所示。图图3-1 使用使用CSS行内式行内式2 2内嵌式内嵌
10、式 内嵌式是将内嵌式是将CSSCSS代码集中写在代码集中写在HTMLHTML文档的文档的头部标记中，头部标记中，并且用并且用标记定义，其基本语法格式如下：标记定义，其基本语法格式如下：style type=text/选择器选择器 属性属性1:1:属性值属性值1;1;属性属性2:2:属性值属性值2;2;属性属性3:3:属性值属性值3;3;该语法中，该语法中，标记一般位于标记一般位于标记中标记中标记之后，标记之后，也可以把它放在也可以把它放在HTMLHTML文档的任何地方。但是由于浏览器是从上到下文档的任何地方。但是由于浏览器是从上到下解析代码的，把解析代码的，把CSSCSS代码放在头部便于提前被
11、下载和解析，以避免网代码放在头部便于提前被下载和解析，以避免网页内容下载后没有样式修饰带来的尴尬。页内容下载后没有样式修饰带来的尴尬。接下来通过一个案例来学习如何在接下来通过一个案例来学习如何在HTMLHTML文档中使用内嵌式文档中使用内嵌式CSSCSS样式，具体代码如下：样式，具体代码如下：!DOCTYPE HTML PUBLIC-/W3C/DTD HTML 4.01 Transitional/EN http:/www.w3.org/TR/html4/loose.dtd使用使用CSSCSS内嵌式内嵌式style type=text/h2 text-h2 text-align:centeral
12、ign:center;/;/*定义标题标记居中对齐定义标题标记居中对齐*/p font-size:16px;p font-size:16px;color:redcolor:red;text-;text-decoration:underlinedecoration:underline;/*定义段落标记的样式定义段落标记的样式*/内嵌式内嵌式CSSCSS样式样式 使用使用stylestyle标记可定义内嵌式标记可定义内嵌式CSSCSS样式表，样式表，stylestyle标记一般位于标记一般位于headhead头部头部标记中，标记中，titletitle标记之后。标记之后。运行例程代码，得到效果如图
13、运行例程代码，得到效果如图3-23-2所示。所示。图图3-2 使用使用CSS内嵌式内嵌式3 3链入式链入式 链入式是将所有的样式放在一个或多个以链入式是将所有的样式放在一个或多个以.csscss为扩展名的外部样为扩展名的外部样式表文件中，通过式表文件中，通过标记将外部样式表文件链接到标记将外部样式表文件链接到HTMLHTML文档文档中，其基本语法格式如下：中，其基本语法格式如下：link /该语法中，该语法中，标记需要放在标记需要放在头部标记中，并且必须头部标记中，并且必须指定指定标记的标记的3 3个属性，具体如下。个属性，具体如下。（1 1）hrefhref：定义所链接外部样式表文件的：定义
14、所链接外部样式表文件的URLURL，可以是相对路径，也，可以是相对路径，也可以是绝对路径。可以是绝对路径。（2 2）typetype：定义所链接文档的类型，在这里需要指定为：定义所链接文档的类型，在这里需要指定为“text/text/csscss”，表示链接的外部文件为表示链接的外部文件为CSSCSS样式表。样式表。（3 3）relrel：定义当前文档与被链接文档之间的关系，在这里需要指定：定义当前文档与被链接文档之间的关系，在这里需要指定为为“stylesheetstylesheet”，表示被链接的文档是一个样式表文件。，表示被链接的文档是一个样式表文件。接下来通过一个案例来学习如何在接下来
15、通过一个案例来学习如何在HTMLHTML文档中使用链入式文档中使用链入式CSSCSS样式，具体代码如下：样式，具体代码如下：!DOCTYPE HTML PUBLIC-/W3C/DTD HTML 4.01 Transitional/EN http:/www.w3.org/TR/html4/loose.dtd使用链入式使用链入式CSSCSS样式表样式表link /链入式链入式CSSCSS样式表样式表 通过通过link link 标记可以将扩展名为标记可以将扩展名为.csscss的外部样式表文件链接到的外部样式表文件链接到HTMLHTML文档文档中中 在外部文件表在外部文件表Unit03-3styl
16、e.cssUnit03-3style.css中，书写中，书写CSSCSS样式代码，具体如下：样式代码，具体如下：h2 text-h2 text-align:centeralign:center;p font-size:16px;p font-size:16px;color:redcolor:red;text-;text-decoration:underlinedecoration:underline;运行例程代码，得到效果如图运行例程代码，得到效果如图3-33-3所示。所示。需要说明的是，链入式最大的好处是同一个需要说明的是，链入式最大的好处是同一个CSSCSS样式表可以被不样式表可以被不同的
17、同的HTMLHTML页面链接使用，同时一个页面链接使用，同时一个HTMLHTML页面也可以通过多个页面也可以通过多个link/标记链接多个标记链接多个CSSCSS样式表。样式表。图图3-3 使用链入式使用链入式CSS样式表样式表4 4导入式导入式 导入式与链入式相同，都是针对外部样式表文件的。导入式与链入式相同，都是针对外部样式表文件的。对对HTMLHTML头部文档应用头部文档应用stylestyle标记，并在标记，并在标记内的开头处使标记内的开头处使用用importimport语句，即可导入外部样式表文件。其基本语法格式如下：语句，即可导入外部样式表文件。其基本语法格式如下：style ty
18、pe=text/import import urlurl(CSS(CSS文件路径文件路径););或或 import CSS import CSS文件路径文件路径;/*在此还可以存放其他在此还可以存放其他CSSCSS样式样式*/该语法中，该语法中，stylestyle标记内还可以存放其他的内嵌样式，标记内还可以存放其他的内嵌样式，importimport语语句需要位于其他内嵌样式的上面。句需要位于其他内嵌样式的上面。需要注意的是，为便于教学，我们都统一使用内嵌式。需要注意的是，为便于教学，我们都统一使用内嵌式。3.2 CSS3.2 CSS基础选择器基础选择器 要想将要想将CSSCSS样式应用于特
19、定的样式应用于特定的HTMLHTML元素，首先需要找到该目标元素，首先需要找到该目标元素。元素。在在CSSCSS中，执行这一任务的样式规则部分被称为选择器，选择器中，执行这一任务的样式规则部分被称为选择器，选择器的概念就是：选择标签的过程。的概念就是：选择标签的过程。CSS CSS基础选择器有基础选择器有4 4种：标记选择器、种：标记选择器、id id选择器、类选择器（选择器、类选择器（classclass选择器）和通配符选择器。选择器）和通配符选择器。3.2.1 3.2.1 标记选择器标记选择器 标记选择器是指用标记选择器是指用HTMLHTML标记名称作为选择器，按标记名称分类，标记名称作为
20、选择器，按标记名称分类，为页面中某一类标记指定统一的为页面中某一类标记指定统一的CSSCSS样式。其基本语法格式如下：样式。其基本语法格式如下：标记名标记名 属性属性1:1:属性值属性值1;1;属性属性2:2:属性值属性值2;2;属性属性3:3:属性值属性值3;3;该语法中，所有的该语法中，所有的HTMLHTML标记名都可以作为标记选择器，例如标记名都可以作为标记选择器，例如bodybody、h1h1、p p、strongstrong等。等。用标记选择器定义的样式对页面中该类型的所有标记都有效。用标记选择器定义的样式对页面中该类型的所有标记都有效。上述上述CSSCSS样式代码用于设置样式代码用
21、于设置HTMLHTML页面中所有的段落文本页面中所有的段落文本字字体大小为体大小为1212像素、颜色为像素、颜色为#666#666、字体为微软雅黑。、字体为微软雅黑。标记选择器最大的优点是能快速为页面中同类型的标记统一样式，标记选择器最大的优点是能快速为页面中同类型的标记统一样式，同时这也是它的缺点，不能设计差异化样式。同时这也是它的缺点，不能设计差异化样式。接下来通过一个案例进一步学习标记选择器的使用，具体代码接下来通过一个案例进一步学习标记选择器的使用，具体代码如下：如下：!DOCTYPE HTML PUBLIC-/W3C/DTD HTML 4.01 Transitional/EN htt
22、p:/www.w3.org/TR/html4/loose.dtd标记选择器的使用标记选择器的使用style type=text/divdivbackground-color:pink;background-color:pink;ppbackground-color:background-color:greenyellowgreenyellow;文字文字1 1文字文字1 1文字文字1 1文字文字1 1文字文字1 1文字文字1 1文字文字11文字文字2 2文字文字2 2文字文字2 2文字文字2 2文字文字2 2文字文字22文字文字3 3文字文字3 3文字文字33 运行例程代码，得到效果如图运行例程
23、代码，得到效果如图3-43-4所示。所示。图图3-4 标记选择器的使用标记选择器的使用3.2.2 id3.2.2 id选择器选择器 id id选择器使用选择器使用“#”进行标识，后面紧跟进行标识，后面紧跟id id名，其基本语法格式如名，其基本语法格式如下：下：#id#id名名 属性属性1:1:属性值属性值1;1;属性属性2:2:属性值属性值2;2;属性属性3:3:属性值属性值3;3;该语法中，该语法中，id id名即为名即为HTMLHTML元素的元素的id id属性值，大多数属性值，大多数HTMLHTML元素都元素都可以定义可以定义id id属性，元素的属性，元素的id id值是唯一的，只能
24、对应于文档中某一个具体值是唯一的，只能对应于文档中某一个具体的元素。的元素。接下来通过一个案例进一步学习接下来通过一个案例进一步学习id id选择器的使用，具体代码如下：选择器的使用，具体代码如下：!DOCTYPE html PUBLIC-/W3C/DTD XHTML 1.0 Transitional/EN http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdidid选择器的使用选择器的使用style type=text/#duanluo1#duanluo1background-color:pink;background-color:pi
25、nk;#duanluo2#duanluo2background-color:background-color:greenyellowgreenyellow;文字文字1 1文字文字1 1文字文字1 1文字文字1 1文字文字1 1文字文字1 1文字文字11文字文字2 2文字文字2 2文字文字2 2文字文字2 2文字文字2 2文字文字22文字文字3 3文字文字3 3文字文字33 运行例程代码，得到效果如图运行例程代码，得到效果如图3-53-5所示。所示。图图3-5 id选择器的使用选择器的使用3.2.3 3.2.3 类选择器（类选择器（classclass选择器）选择器）类选择器使用类选择器使用“.
26、”（英文点号）进行标识，后面紧跟类名，其基（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：本语法格式如下：.类名类名 属性属性1:1:属性值属性值1;1;属性属性2:2:属性值属性值2;2;属性属性3:3:属性值属性值3;3;该语法中，类名即为该语法中，类名即为HTMLHTML元素的元素的classclass属性值，大多数属性值，大多数HTMLHTML元元素都可以定义素都可以定义classclass属性。属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式。类选择器最大的优势是可以为元素对象定义单独或相同的样式。接下来通过一个案例进一步学习类选择器的使用，具体代码如下：接下来通
27、过一个案例进一步学习类选择器的使用，具体代码如下：!DOCTYPE HTML PUBLIC-/W3C/DTD HTML 4.01 Transitional/EN http:/www.w3.org/TR/html4/loose.dtd类选择器的使用类选择器的使用0101style type=text/.fen.fenbackground-color:pink;background-color:pink;.fs24.fs24font-size:24px;font-size:24px;文字文字1 1文字文字1 1文字文字1 1文字文字1 1文字文字1 1文字文字1 1文字文字11文字文字2 2文字文
28、字2 2文字文字2 2文字文字2 2文字文字2 2文字文字22文字文字3 3文字文字3 3文字文字33文字文字4 4文字文字4 4文字文字4 4文字文字4 4文字文字44 运行例程代码，得到效果如图运行例程代码，得到效果如图3-63-6所示。所示。图图3-6 类选择器的使用类选择器的使用01 用小点当选择器的符号，能够多重利用。用小点当选择器的符号，能够多重利用。一个一个classclass可以给多个可以给多个htmlhtml标签使用。标签使用。一个一个htmlhtml标签可以匹配多个标签可以匹配多个classclass。为便于更好理解类选择器的使用，再举一个案例，具体代码如下：为便于更好理解
29、类选择器的使用，再举一个案例，具体代码如下：!DOCTYPE HTML PUBLIC-/W3C/DTD HTML 4.01 Transitional/EN http:/www.w3.org/TR/html4/loose.dtd类选择器的使用类选择器的使用0202style type=text/.red .redcolor:redcolor:red;.green .greencolor:greencolor:green;.font22font-size:22px;.font22font-size:22px;p text-p text-decoration:underlinedecoration:
30、underline;font-family:;font-family:微软雅黑微软雅黑;二级标题文本二级标题文本段落一文本内容段落一文本内容段落二文本内容段落二文本内容段落三文本内容段落三文本内容 运行例程代码，得到效果如图运行例程代码，得到效果如图3-73-7所示。所示。图图3-7 类选择器的使用类选择器的使用023.2.4 3.2.4 通配符选择器通配符选择器 通配符选择器用通配符选择器用“*”号表示，它是所有选择器中作用范围最广号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：的，能匹配页面中所有的元素。其基本语法格式如下：*属性属性1:1:属性值属性值
31、1;1;属性属性2:2:属性值属性值2;2;属性属性3:3:属性值属性值3;3;接下来，使用通配符选择器定义接下来，使用通配符选择器定义CSSCSS样式，清除所有样式，清除所有HTMLHTML标记标记的默认边距。的默认边距。*margin:0;/margin:0;/*定义外边距定义外边距*/padding:0;/padding:0;/*定义内边距定义内边距*/实际网页开发中不建议使用通配符选择器，因为它设置的样式对实际网页开发中不建议使用通配符选择器，因为它设置的样式对所有的所有的HTMLHTML标记都生效，不管标记是否需要该样式，这样反而降低标记都生效，不管标记是否需要该样式，这样反而降低了
32、代码的执行速度。了代码的执行速度。3.3 CSS3.3 CSS文本相关样式文本相关样式3.3.1 CSS3.3.1 CSS文本相关样式的重要性文本相关样式的重要性 学习学习HTMLHTML时，可以使用文本样式标记及其属性控制文本的显示时，可以使用文本样式标记及其属性控制文本的显示样式，但是这种方式烦琐且不利于代码的共享和移植。为此，样式，但是这种方式烦琐且不利于代码的共享和移植。为此，CSSCSS提提供了相应的文本设置属性。使用供了相应的文本设置属性。使用CSSCSS可以更轻松方便地控制文本样式。可以更轻松方便地控制文本样式。3.3.2 CSS3.3.2 CSS字体样式属性字体样式属性一、一、
33、font-sizefont-size：字号大小：字号大小 font-size font-size属性用于设置字号，该属性的值可以使用相对长度单位属性用于设置字号，该属性的值可以使用相对长度单位也可以使用绝对长度单位。也可以使用绝对长度单位。1 1CSSCSS相对长度单位相对长度单位 emem：相对于当前对象内文本的字体尺寸。：相对于当前对象内文本的字体尺寸。pxpx：像素，最常用，推荐使用。：像素，最常用，推荐使用。2 2CSSCSS绝对长度单位绝对长度单位 in in：英寸。：英寸。cm cm：厘米。：厘米。mm mm：毫米。：毫米。pt pt：点。：点。其中，相对长度单位比较常用，推荐使用
34、像素单位其中，相对长度单位比较常用，推荐使用像素单位pxpx，绝对长度，绝对长度单位使用较少。单位使用较少。例如将网页中所有段落文本的字号大小设为例如将网页中所有段落文本的字号大小设为12px12px，可以使用如下，可以使用如下CSSCSS样式代码：样式代码：pfont-size:12px;pfont-size:12px;二、二、font-familyfont-family：字体：字体 font-family font-family属性用于设置字体。网页中常用的字体有宋体、微软属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，雅黑、黑体等
35、，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下可以使用如下CSSCSS样式代码：样式代码：p font-family:p font-family:微软雅黑微软雅黑;可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体，来看一个具持第一个字体，则会尝试下一个，直到找到合适的字体，来看一个具体的例子：体的例子：bodyfont-family:bodyfont-family:华文彩云华文彩云,宋体宋体,黑体黑体;当应用上面的字体样式时，会首选华文彩云，如果用户计算机上当应用上面的
36、字体样式时，会首选华文彩云，如果用户计算机上没有安装该字体则选择宋体，也没有安装宋体则选择黑体。当指定的没有安装该字体则选择宋体，也没有安装宋体则选择黑体。当指定的字体都没有安装时，就会使用浏览器默认字体。字体都没有安装时，就会使用浏览器默认字体。使用使用font-familyfont-family设置字体时，需要注意以下几点。设置字体时，需要注意以下几点。（1 1）各种字体之间必须使用英文状态下的逗号隔开。）各种字体之间必须使用英文状态下的逗号隔开。（2 2）中文字体需要加英文状态下的引号，英文字体一般不需要加引）中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时
37、，英文字体名必须位于中文字体名之前。号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。（3 3）如果字体名中包含空格、）如果字体名中包含空格、#、$等符号，则该字体必须加英文状等符号，则该字体必须加英文状态下的单引号或双引号，例如态下的单引号或双引号，例如font-family:font-family:“Times New RomanTimes New Roman”;。（4 4）尽量使用系统默认字体，保证在任何用户的浏览器中都能正确）尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。显示。三、三、font-weightfont-weight：字体粗细：字体粗细 font-w
38、eight font-weight属性用于定义字体的粗细，其可用属性值如下所示。属性用于定义字体的粗细，其可用属性值如下所示。normal normal：默认值。定义标准的字符。：默认值。定义标准的字符。bold bold：定义粗体字符。：定义粗体字符。bolder bolder：定义更粗的字符。：定义更粗的字符。lighter lighter：定义更细的字符。：定义更细的字符。100900 100900（100100的整数倍）：定义由细到粗的字符。其中的整数倍）：定义由细到粗的字符。其中400400等同于等同于normalnormal，700700等同于等同于boldbold，值越大字体越粗
39、。，值越大字体越粗。四、四、font-variantfont-variant：变体：变体 font-variant font-variant属性用于设置变体（字体变化），一般用于定义小型属性用于设置变体（字体变化），一般用于定义小型大写字母，仅对英文字符有效。其可用属性值如下。大写字母，仅对英文字符有效。其可用属性值如下。normal normal：默认值，浏览器会显示标准的字体。：默认值，浏览器会显示标准的字体。small-caps small-caps：浏览器会显示小型大写的字体，即所有的小写字母均会：浏览器会显示小型大写的字体，即所有的小写字母均会转换为大写。但是所有使用小型大写字体的字
40、母与其余文本相比，其转换为大写。但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。字体尺寸更小。五、五、font-stylefont-style：字体风格：字体风格 font-style font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：其可用属性值如下：vnormalvnormal：默认值，浏览器会显示标准的字体样式。：默认值，浏览器会显示标准的字体样式。italic italic：浏览器会显示斜体的字体样式。：浏览器会显示斜体的字体样式。oblique oblique：浏览器会显示倾斜的字体
41、样式。：浏览器会显示倾斜的字体样式。六、六、fontfont：综合设置字体样式：综合设置字体样式 font font属性用于对字体样式进行综合设置，其基本语法格式如下：属性用于对字体样式进行综合设置，其基本语法格式如下：选择器选择器font:font-style font-variant font-weight font-size/line-height font-family;font:font-style font-variant font-weight font-size/line-height font-family;使用使用fontfont属性时，必须按上面语法格式中的顺序书写，各个
42、属性属性时，必须按上面语法格式中的顺序书写，各个属性以空格隔开。以空格隔开。3.4 CSS3.4 CSS文本外观属性文本外观属性 使用使用HTMLHTML可以对文本外观进行简单的控制，但是效果并不理想。可以对文本外观进行简单的控制，但是效果并不理想。为此为此CSSCSS提供了一系列的文本外观样式属性，具体如下。提供了一系列的文本外观样式属性，具体如下。一、一、colorcolor：文本颜色：文本颜色 color color属性用于定义文本的颜色，其取值方式有如下属性用于定义文本的颜色，其取值方式有如下3 3种。种。（1 1）预定义的颜色值，如）预定义的颜色值，如redred、greengree
43、n、blueblue等。等。（2 2）十六进制，如）十六进制，如#FF0000#FF0000、#FF6600#FF6600、#29D794#29D794等。实际工作中，等。实际工作中，十六进制是最常用的定义颜色的方式。十六进制是最常用的定义颜色的方式。（3 3）RGBRGB代码，如红色可以表示为代码，如红色可以表示为rgbrgb（255255、0 0、0 0）或）或rgbrgb（100%100%、0%0%、0%0%）。）。二、二、letter-spacingletter-spacing：字间距：字间距 letter-spacing letter-spacing属性用于定义字间距，所谓字间距就是
44、字符与字符之属性用于定义字间距，所谓字间距就是字符与字符之间的空白。间的空白。其属性值可为不同单位的数值，允许使用负值，默认为其属性值可为不同单位的数值，允许使用负值，默认为normalnormal。三、三、word-spacingword-spacing：单词间距：单词间距 word-spacing word-spacing属性用于定义英文单词之间的间距，对中文字符无效。属性用于定义英文单词之间的间距，对中文字符无效。和和letter-spacingletter-spacing一样，其属性值可为不同单位的数值，允许使用负值，一样，其属性值可为不同单位的数值，允许使用负值，默认为默认为norm
45、alnormal。word-spacing word-spacing和和letter-spacingletter-spacing均可对英文进行设置。均可对英文进行设置。不同的是不同的是letter-spacingletter-spacing定义的为字母之间的间距，而定义的为字母之间的间距，而word-spacingword-spacing定定义的为英文单词之间的间距。义的为英文单词之间的间距。四、四、line-heightline-height：行间距：行间距 line-height line-height属性用于设置行间距，所谓行间距就是行与行之间的距属性用于设置行间距，所谓行间距就是行与行
46、之间的距离，即字符的垂直间距，一般称为行高，其距离如图离，即字符的垂直间距，一般称为行高，其距离如图3-83-8所示。所示。line-height line-height常用的属性值单位有常用的属性值单位有3 3种，分别为像素种，分别为像素pxpx、相对值、相对值emem和和百分比百分比%，实际工作中使用最多的是像素，实际工作中使用最多的是像素pxpx。图图3-8 行间距示意图行间距示意图五、五、text-transformtext-transform：文本转换：文本转换 text-transform text-transform属性用于控制英文字符的大小写，其可用属性值如下。属性用于控制英文
47、字符的大小写，其可用属性值如下。none none：不转换（默认值）。：不转换（默认值）。capitalize capitalize：首字母大写。：首字母大写。uppercase uppercase：全部字符转换为大写。：全部字符转换为大写。lowercase lowercase：全部字符转换为小写。：全部字符转换为小写。六、六、text-decorationtext-decoration：文本装饰：文本装饰 text-decoration text-decoration属性用于设置文本的下画线、上画线、删除线等装属性用于设置文本的下画线、上画线、删除线等装饰效果，其可用属性值如下。饰效果，其
48、可用属性值如下。none none：没有装饰（正常文本默认值）。：没有装饰（正常文本默认值）。underline underline：下画线。：下画线。overlineoverline：上画线。：上画线。line-through line-through：删除线。：删除线。七、七、text-aligntext-align：水平对齐方式：水平对齐方式 text-align text-align属性用于设置文本内容的水平对齐，相当于属性用于设置文本内容的水平对齐，相当于htmlhtml中的中的alignalign对齐属性。其可用属性值如下。对齐属性。其可用属性值如下。left left：左对齐（默
49、认值）。：左对齐（默认值）。right right：右对齐。：右对齐。center center：居中对齐。：居中对齐。八、八、text-indenttext-indent：首行缩进：首行缩进 text-indent text-indent属性用于设置首行文本的缩进，其属性值可为不同单位属性用于设置首行文本的缩进，其属性值可为不同单位的数值、的数值、emem字符宽度的倍数或相对于浏览器窗口宽度的百分比字符宽度的倍数或相对于浏览器窗口宽度的百分比%，允，允许使用负值，建议使用许使用负值，建议使用emem作为设置单位。作为设置单位。在英文中在英文中1 1个个emem表示表示1 1个个“m m”的宽
50、度；在中文中，就表示一个字的宽度；在中文中，就表示一个字的宽度。的宽度。九、九、white-spacewhite-space：空白符处理：空白符处理 使用使用HTMLHTML制作网页时，不论源代码中有多少空格，在浏览器中制作网页时，不论源代码中有多少空格，在浏览器中只会显示一个字符的空白。在只会显示一个字符的空白。在CSSCSS中，使用中，使用white-spacewhite-space属性可设置空白属性可设置空白符的处理方式，其属性值如下。符的处理方式，其属性值如下。normal normal：常规（默认值），文本中的空格、空行无效，满行（到达：常规（默认值），文本中的空格、空行无效，满行（
