HTML+CSS+JavaScript网页设计-第8章-使用CSS设置文本样式.ppt

1、HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第1页第第8章使用章使用CSS设置文本样式设置文本样式本章概述 本章的学习目标主要内容HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第2页本章概述本章概述lCSS规则包含了两个部分：选择器规则包含了两个部分：选择器(用于指用于指定规则应用的元素定规则应用的元素)和属性，上一章学习了和属性，上一章学习了CSS的各种选择器的使用方法，从本章开的各种选择器的使用方法，从本章开始介绍始介绍CSS的属性，的属性，CSS的属性有很多，的属性有很多，本章主要介绍与文本样式相关的属性，包本章主要介绍与文本样式

2、相关的属性，包括控制文本的字体、外观、颜色、特殊效括控制文本的字体、外观、颜色、特殊效果以及换行格式等。通过本章的学习读者果以及换行格式等。通过本章的学习读者应掌握如何使用应掌握如何使用CSS样式美化网页中的文样式美化网页中的文本。本。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第3页本章的学习目标本章的学习目标l掌握控制文本字体的掌握控制文本字体的CSS属性属性l了解了解font-size属性值的几种格式属性值的几种格式l掌握掌握font属性值中包含的多个属性的先后属性值中包含的多个属性的先后顺序顺序l了解了解CSS中的表示颜色的几种模式中的表示颜色的几种模式l

3、掌握掌握CSS中的常用文本格式化属性的用法中的常用文本格式化属性的用法HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第4页主要内容主要内容8.1 设置文本字体设置文本字体8.2 文本格式化文本格式化8.3 本章小结本章小结8.4 思考和练习思考和练习HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第5页8.1 设置文本字体设置文本字体l文本是网页内容的主要元素，当文本较多时，如文本是网页内容的主要元素，当文本较多时，如果只是简单的罗列，会让访问者觉得单调乏味，果只是简单的罗列，会让访问者觉得单调乏味，因此，合理编排和有效控制文字的显示方式，

4、就因此，合理编排和有效控制文字的显示方式，就显得十分重要了。显得十分重要了。lCSS提供了大量用来控制文本样式的属性，这些提供了大量用来控制文本样式的属性，这些属性可以分成两组：属性可以分成两组：直接影响字体及其外观的属性直接影响字体及其外观的属性(包括使用的字型，是包括使用的字型，是否为正体、粗体或斜体，以及文本尺寸等否为正体、粗体或斜体，以及文本尺寸等)。具有的效果与所用字体无关的属性具有的效果与所用字体无关的属性(包括文本颜色、包括文本颜色、单词或字母间的距离等单词或字母间的距离等)。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第6页font-family属

5、性属性lfont-family属性用来指定应用属性用来指定应用CSS规则的规则的元素中文本的字体。前面的一些示例中已元素中文本的字体。前面的一些示例中已经使用过该属性。该属性中指定的字体受经使用过该属性。该属性中指定的字体受用户环境的影响，浏览器只能在客户端计用户环境的影响，浏览器只能在客户端计算机中已经安装对应字型的情况下才能以算机中已经安装对应字型的情况下才能以指定字体显示指定字体显示HTML文本，为了确保指定的文本，为了确保指定的字体能够正确显示，该属性还允许同时指字体能够正确显示，该属性还允许同时指定多种字体，浏览器将按顺序采用第一个定多种字体，浏览器将按顺序采用第一个可用的字体。可用

6、的字体。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第7页嵌入字体嵌入字体l所谓所谓“嵌入字体嵌入字体”，就是加载服务器端的字体文件，让浏，就是加载服务器端的字体文件，让浏览器可以显示用户计算机上没有安装的字体。在览器可以显示用户计算机上没有安装的字体。在CSS 3之之前，网页必须使用已在客户端计算机上安装好的字体，所前，网页必须使用已在客户端计算机上安装好的字体，所以在设计中会有诸多限制。而在以在设计中会有诸多限制。而在CSS 3中，可以使用中，可以使用font-face来使得所有客户端加载服务器端的字体文件来使得所有客户端加载服务器端的字体文件，从而使得所有用

7、户的浏览器都能正常显示这种字体，语，从而使得所有用户的浏览器都能正常显示这种字体，语法格式如下：法格式如下：font-face font-family:字体名称字体名称;src:url(字体文件路径字体文件路径);HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第8页font-size属性属性lfont-size属性用来为字体设置大小。该属属性用来为字体设置大小。该属性的值可以由多种指定方式：绝对尺寸、性的值可以由多种指定方式：绝对尺寸、相对尺寸、长度和百分比。相对尺寸、长度和百分比。l绝对尺寸从下到大有如下几个取值，每一绝对尺寸从下到大有如下几个取值，每一个值都对应

8、一个固定的尺寸：个值都对应一个固定的尺寸：lxx-small、x-small、small、medium、large、x-large、xx-large。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第9页font-size属性属性l相对尺寸是与周围文本相比较，有相对尺寸是与周围文本相比较，有smaller和和larger两个两个取值。取值。smaller比当前默认字号小，比当前默认字号小，larger比当前默认字比当前默认字号大。号大。l长度是指给出具体数值，然后跟一个表示长度的单位。单长度是指给出具体数值，然后跟一个表示长度的单位。单位的类型有相对单位和绝对单位。相

9、对单位共有位的类型有相对单位和绝对单位。相对单位共有3种：种：px(像素像素)，与屏幕的分辨率相关联；以及，与屏幕的分辨率相关联；以及em和和ex，二者都与，二者都与字体的大小相关联；绝对单位有字体的大小相关联；绝对单位有5种：种：pt(磅磅)、pc(pica)、in(英寸英寸)、cm(厘米厘米)和和mm(毫米毫米)。l百分比方式给出一个与另一值相关的值。百分比方式给出一个与另一值相关的值。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第10页font-weight属性属性lCSS的的font-weight属性用来设置字体的粗细，它属性用来设置字体的粗细，它的可能取

10、值有：的可能取值有：normal(正常粗细正常粗细)、bold(粗体粗体)、bolder(特粗，比粗体还粗一些特粗，比粗体还粗一些)、lighter(特细特细)、100、200、300、400、500、600、700、800、900。后面几个数字值越大越粗，。后面几个数字值越大越粗，400等同于等同于normal，700等同于等同于bold。l在这些值中，在这些值中，bold是最常使用的。通常情况下，是最常使用的。通常情况下，网页的标题，比较醒目的文字或重点突出的内容网页的标题，比较醒目的文字或重点突出的内容一般都会用粗体。一般都会用粗体。HTML+CSS+JavaScript网页设计第8章使

11、用CSS设置文本样式第11页font-style属性属性lfont-style属性用来设置字体的风格，可取值包括属性用来设置字体的风格，可取值包括normal、italic和和oblique。其中，。其中，normal是正常是正常字体，字体，italic是斜体，是斜体，oblique是倾斜的字体样式是倾斜的字体样式l在印刷学中，一个字体的斜体在印刷学中，一个字体的斜体(italic)版本通常是一版本通常是一种基于笔迹的特殊风格版本，而伪斜体种基于笔迹的特殊风格版本，而伪斜体(oblique)则则是将正常版本倾斜一个角度使用。在是将正常版本倾斜一个角度使用。在CSS中，当指中，当指定了定了fon

12、t-style属性为属性为italic时，浏览器通常会取字时，浏览器通常会取字体的正常版本，然后简单倾斜一定角度进行渲染体的正常版本，然后简单倾斜一定角度进行渲染(与与使用使用oblique时应有的效果一样时应有的效果一样)。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第12页font-variant属性属性lfont-variant属性主要用于定义小型大写字母属性主要用于定义小型大写字母文本，这意味着所有的小写字母均会被转换文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸

13、更小。小型大与其余文本相比，其字体尺寸更小。小型大写字体写字体(small caps font)就像是一个较小版就像是一个较小版本的大写字母集合。本的大写字母集合。lfont-variant属性有两个可能的取值：属性有两个可能的取值：normal及及small-caps。默认值为。默认值为normal，即标准字体显示；即标准字体显示；small-caps表示使用小型表示使用小型大写字体显示。大写字体显示。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第13页font属性属性l使用使用font属性可以将将前面的几个属性联合属性可以将将前面的几个属性联合成为一个，综合设

14、置字体样式。使用成为一个，综合设置字体样式。使用font属属性时，不需要设置的属性可以省略，多个属性时，不需要设置的属性可以省略，多个属性之间用空格分隔，多个属性必须按如下顺性之间用空格分隔，多个属性必须按如下顺序指定：序指定：lfont:style variant weight size/行高行高 familyHTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第14页主要内容主要内容8.1 设置文本字体设置文本字体8.2 文本格式化文本格式化8.3 本章小结本章小结8.4 思考和练习思考和练习HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第

15、15页8.2 文本格式化文本格式化l除影响字体的属性外，还有一些属性用来除影响字体的属性外，还有一些属性用来设置文本的外观或格式设置文本的外观或格式(独立于显示文本的独立于显示文本的字体字体)，常用的文本格式化属性如表，常用的文本格式化属性如表8-2所示所示。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第16页color属性属性lcolor属性用来设置文本的颜色，即元素的属性用来设置文本的颜色，即元素的前景色，这个颜色还会应用到元素的所有前景色，这个颜色还会应用到元素的所有边框，除非被边框，除非被border-color或另外某个边或另外某个边框颜色属性覆盖。框颜

16、色属性覆盖。l该属性最常见的取值是十六进制颜色代码该属性最常见的取值是十六进制颜色代码、颜色名称和、颜色名称和RGB模式，在模式，在CSS 3中，又中，又增加了增加了RGBA、HSL、HSLA这三种模式，这三种模式，极大地丰富了极大地丰富了CSS的颜色设置方式。的颜色设置方式。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第17页color属性属性l十六进制颜色代码是设置颜色值的常用方式，将十六进制颜色代码是设置颜色值的常用方式，将3个介于个介于00和和FF之间的十六进制数连接起来。若十六进制的之间的十六进制数连接起来。若十六进制的3组数组数各自成对，则可简写为各自

17、成对，则可简写为3位，例如：位，例如：#00cc66#aabbcc#abclWeb安全色是指在安全色是指在256色计算机系统上总能避免抖动的颜色计算机系统上总能避免抖动的颜色，表示为色，表示为RGB值值20%和和51(相应的十六进制值为相应的十六进制值为33)的倍的倍数。因此，采用十六进制时，数。因此，采用十六进制时，00336699ccff被认为是被认为是Web安全色，一共安全色，一共666=216种。种。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第18页color属性属性lCSS颜色关键字包括颜色名称、颜色关键字包括颜色名称、transparent和和cur

18、rentColor。颜色名称：指的是直接使用颜色的英文单词颜色名称：指的是直接使用颜色的英文单词，如，如red、white、black、gray、pink、blue、orange、silver、yellow、green、purple等。等。transparent：用来表示文本的颜色纯透明，：用来表示文本的颜色纯透明，可以近似认为是可以近似认为是rgba(0,0,0,0)。currentColor：顾名思义，指当前颜色，准：顾名思义，指当前颜色，准确来说是指当前的文字颜色。确来说是指当前的文字颜色。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第19页color属性属

19、性l通过组合不同的红色、绿色、蓝色分量创造出的通过组合不同的红色、绿色、蓝色分量创造出的颜色被为颜色被为RGB模式的颜色。显示器由一个个像素模式的颜色。显示器由一个个像素构成，利用电子束来表现色彩。像素把光的三原构成，利用电子束来表现色彩。像素把光的三原色色红色红色(R)、绿色、绿色(G)、蓝色、蓝色(B)组合起来。每组合起来。每像素包含像素包含8位元色彩的信息量，有位元色彩的信息量，有0255共共256个个单元，其中单元，其中0是完全无光状态，是完全无光状态，255是最亮状态。是最亮状态。书写方法如下：书写方法如下：rgb(x%,y%,z%)rgb(a,b,c)HTML+CSS+JavaSc

20、ript网页设计第8章使用CSS设置文本样式第20页color属性属性lRGBA模式在模式在RGB模式的基础上增加了模式的基础上增加了alpha通道，用来设置颜色的透明度，通道，用来设置颜色的透明度，alpha通道值的范围为通道值的范围为01。0代表完全透明代表完全透明，1代表完全不透明。代表完全不透明。RGBA颜色的表示方颜色的表示方法如下：法如下：rgba(r,g,b,a)lIE9及以上的浏览器才支持及以上的浏览器才支持RGBA模式的颜模式的颜色。色。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第21页color属性属性lHSL模式通过对色调模式通过对色调(H

21、)、饱和度、饱和度(S)、亮度、亮度(L)三个颜色通道的变化以及它们的相互叠三个颜色通道的变化以及它们的相互叠加来得到各式各样的颜色。加来得到各式各样的颜色。HSL标准几乎标准几乎可以包括人类视力所能感知的所有颜色。可以包括人类视力所能感知的所有颜色。HSL颜色模式的表示方法如下：颜色模式的表示方法如下：hsl(h,s,l)HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第22页color属性属性lHSLA模式是模式是HSL的扩展模式，在的扩展模式，在HSL模式模式的基础上增加了透明度通道的基础上增加了透明度通道alpha来设置透来设置透明度，表示方法如下：明度，表示

22、方法如下：hsla(,)l其中，前其中，前3个参数和个参数和HSL的的3个参数相同，个参数相同，最后一个参数最后一个参数opacity表示透明度。表示透明度。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第23页text-align属性属性ltext-align属性对于文本的功能与已经废弃属性对于文本的功能与已经废弃的的align属性类似。它会将文本在包含元素属性类似。它会将文本在包含元素或浏览器窗口中进行对齐。该属性可能的或浏览器窗口中进行对齐。该属性可能的取值有：取值有：left(左对齐左对齐)、right(右对齐右对齐)、center(居中居中)和和justi

23、fy(两端对齐两端对齐)。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第24页vertical-align属性属性lvertical-align属性用来设置一个元素的垂属性用来设置一个元素的垂直对齐方式。该属性定义行内元素的基线直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。相对于该元素所在行的基线的垂直对齐。在使用行内元素时，尤其对于图片及文本在使用行内元素时，尤其对于图片及文本片段，片段，vertical-align属性特别有用。属性特别有用。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第25页text-d

24、ecoration属性属性ltext-decoration属性用来添加到文本的修属性用来添加到文本的修饰饰值值作作 用用none默认，定义标准的文本，没有任何修饰默认，定义标准的文本，没有任何修饰underline在内容下方添加一条线在内容下方添加一条线overline在内容顶部之上添加一条线在内容顶部之上添加一条线l i n e-through添加一条从中间穿过内容的线，如中划线文本。通常用于添加一条从中间穿过内容的线，如中划线文本。通常用于指定标记为删除的文本指定标记为删除的文本HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第26页text-indent属性属性

25、ltext-indent属性用于为块级元素设置首行缩进量属性用于为块级元素设置首行缩进量，对行内标记无效。属性值可以采用不同单位的，对行内标记无效。属性值可以采用不同单位的数值、字符宽度的倍数数值、字符宽度的倍数em，或者是相对浏览器窗，或者是相对浏览器窗口宽度的百分比。口宽度的百分比。l例如：例如：“text-indent:30px;”设置缩进设置缩进30像素，像素，“text-indent:2em;”设置缩进为设置缩进为2个字符。个字符。l另外，该属性的值还可以使用负值，表示首行向另外，该属性的值还可以使用负值，表示首行向前凸出相应的大小或字符，如果超出页面边界，前凸出相应的大小或字符，如

26、果超出页面边界，则可能无法显示缩进的内容。则可能无法显示缩进的内容。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第27页text-shadow属性属性ltext-shadow属性被用于创建投影，即文本背后属性被用于创建投影，即文本背后的一个稍微偏移的深色版本。这是的一个稍微偏移的深色版本。这是CSS 3新引入新引入的一个属性，该属性的值相当复杂，因为它一共的一个属性，该属性的值相当复杂，因为它一共有有4个参数：个参数：text-shadow:x-offset y-offset blur color;l当当text-shadow属性的值为属性的值为“值列表值列表”时

27、，阴影时，阴影效果会按照给定的值的顺序应用到元素的文本上效果会按照给定的值的顺序应用到元素的文本上，因此有可能出现互相覆盖的现象。但是，因此有可能出现互相覆盖的现象。但是text-shadow属性永远不会覆盖文本本身，阴影效果属性永远不会覆盖文本本身，阴影效果也不会改变边框的尺寸。也不会改变边框的尺寸。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第28页text-transform属性属性ltext-transform属性用来指定元素内容的大属性用来指定元素内容的大小写形式，这个属性主要是针对英文字母小写形式，这个属性主要是针对英文字母的大小写。可能的取值有：的大

28、小写。可能的取值有：none(默认值，默认值，不发生变化不发生变化)、capitalize(大写每个单词的大写每个单词的首字母首字母)、uppercase(将元素全部内容设置将元素全部内容设置为大写为大写)、lowercase(将元素全部内容设置将元素全部内容设置为小写为小写)。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第29页letter-spacing和和word-spacing属性属性lletter-spacing属性用来设置字符间的距离。松字距的字属性用来设置字符间的距离。松字距的字符之间有很大空间，而紧字距则表示字符挤在一起。如没符之间有很大空间，而紧

29、字距则表示字符挤在一起。如没有设置字距，字符间则为该字体的正常间距。有设置字距，字符间则为该字体的正常间距。l如果需要增加或缩小字符间的空间，则可以使用以像素或如果需要增加或缩小字符间的空间，则可以使用以像素或“em”为单位进行设置。为单位进行设置。l如果有一段文本的字符间距被改动了，可以使用关键字如果有一段文本的字符间距被改动了，可以使用关键字normal指定该元素不应带有任何字距。指定该元素不应带有任何字距。l与与letter-spacing类似的一个属性是类似的一个属性是word-spacing，该属，该属性用来设置单词间的距离，该属性对中文没有影响，而性用来设置单词间的距离，该属性对中

30、文没有影响，而letter-spacing属性可以影响中文的文字间距。属性可以影响中文的文字间距。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第30页white-space属性属性lwhite-space属性属性用来用来控制空格的控制空格的显示显示值值作作 用用normal遵循正常的空格压缩规则遵循正常的空格压缩规则pre像像元素那样保留空格。但格式仍与该元素元素那样保留空格。但格式仍与该元素的设置相同的设置相同(与与元素不同，默认情况下不元素不同，默认情况下不是以等宽字符显示是以等宽字符显示)nowrap只有在显式使用只有在显式使用元素指定时才对文本进行元素指定

31、时才对文本进行换行，否则文本不会换行换行，否则文本不会换行pre-wrap保留空白符序列，但是正常地进行换行保留空白符序列，但是正常地进行换行pre-line合并空白符序列，但是保留换行符合并空白符序列，但是保留换行符HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第31页text-overflow属性属性l在在CSS3中，文本溢出属性中，文本溢出属性text-overflow用于设置是否使用于设置是否使用省略标记用省略标记()标识对象内文本的溢出。标识对象内文本的溢出。ltext-overflow属性的取值只有两个：属性的取值只有两个：ellipsis和和clip。

32、ellipsis表示当对象内的文本溢出时显示省略标记表示当对象内的文本溢出时显示省略标记()；clip表示当对象内的文本溢出时不显示省略标记表示当对象内的文本溢出时不显示省略标记()，而，而是将溢出的部分剪裁掉。是将溢出的部分剪裁掉。l单独使用单独使用text-overflow属性是无法实现以省略号表示多属性是无法实现以省略号表示多余文本的效果的，因为余文本的效果的，因为text-overflow属性只是说明文字属性只是说明文字溢出时用什么方式显示，要实现在文本溢出时产生省略号溢出时用什么方式显示，要实现在文本溢出时产生省略号效果，还须定义以下两个内容：效果，还须定义以下两个内容：white-

33、space:nowrap;/(强制文本在一行显示强制文本在一行显示)overflow:hidden;/(将溢出内容隐藏将溢出内容隐藏)HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第32页word-wrap属性属性lword-wrap属性用来设置属性用来设置“长单词长单词”或或“URL地址地址”是否换行到下一行，该属性是否换行到下一行，该属性只有两个取值：只有两个取值：normal和和break-word。normal为默认值，文本自动换行；为默认值，文本自动换行；break-word表示对长单词或表示对长单词或URL地址强制换行。地址强制换行。lword-wrap

34、属性在中文网站中使用比较少属性在中文网站中使用比较少，因为这个属性是针对英文设计的，中文，因为这个属性是针对英文设计的，中文中没有所谓的中没有所谓的“长单词长单词”之说。一般情况之说。一般情况下，在中文网站开发中，下，在中文网站开发中，word-wrap属性属性只要采用默认值即可。只要采用默认值即可。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第33页direction属性属性ldirection属性与属性与dir属性类似，用于指定文属性类似，用于指定文本应该流动的方向。该属性可取值有：本应该流动的方向。该属性可取值有：ltr(文本由左向右流动文本由左向右流动)、

35、rtl(文本由右向左流动文本由右向左流动)和和inherit(文本流动方向与父元素相同文本流动方向与父元素相同)。l在实践中，在实践中，IE与与Firefox中该属性的作用与中该属性的作用与align属性相同。当取值为属性相同。当取值为rtl时，仅仅简单时，仅仅简单向右对齐文本。但需要注意的是，在应该向右对齐文本。但需要注意的是，在应该由右向左显示的段落中，句号出现在句子由右向左显示的段落中，句号出现在句子的左侧。的左侧。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第34页主要内容主要内容8.1 设置文本字体设置文本字体8.2 文本格式化文本格式化8.3 本章小结

36、本章小结8.4 思考和练习思考和练习HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第35页8.3 本章小结本章小结 l本章主要介绍了本章主要介绍了CSS用于设置文本样式的属性，包括控制用于设置文本样式的属性，包括控制文本字体的属性和文本格式化的属性。首先介绍的是文本文本字体的属性和文本格式化的属性。首先介绍的是文本字体相关的属性，包括字体相关的属性，包括font-family、font-size、font-weight、font-style、font-variant和和font等，其中等，其中font属属性是将将前面的几个属性联合成为一个，综合设置字体样性是将将前面

37、的几个属性联合成为一个，综合设置字体样式；接下来讲述了常用的文本格式化属性，包括式；接下来讲述了常用的文本格式化属性，包括color、text-align、vertical-align、text-decoration、text-indent、text-transform、text-shadow、letter-spacing、word-spacing、text-overflow、word-wrap、white-space和和direction。文本是网页内容的主要元素，所以掌。文本是网页内容的主要元素，所以掌握这些握这些CSS属性是美化网页的基础。属性是美化网页的基础。HTML+CSS+Java

38、Script网页设计第8章使用CSS设置文本样式第36页主要内容主要内容8.1 设置文本字体设置文本字体8.2 文本格式化文本格式化8.3 本章小结本章小结8.4 思考和练习思考和练习HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第37页8.4 思考和练习思考和练习 l1.在在CSS 3中，可以使用中，可以使用 来使得所有客户端加载服务器端的字来使得所有客户端加载服务器端的字体文件，从而使得所有用户的浏览器都能正常显示这种字体。体文件，从而使得所有用户的浏览器都能正常显示这种字体。l2.font-size属性用来为字体设置大小。该属性的值可以由多种指定属性用来为字体

39、设置大小。该属性的值可以由多种指定方式：绝对尺寸、相对尺寸、方式：绝对尺寸、相对尺寸、和和 。l3.font-style属性用来设置字体的风格，可取值包括属性用来设置字体的风格，可取值包括normal、italic和和 。l4.使用使用font属性可以将将前面的几个属性联合成为一个，综合设置字属性可以将将前面的几个属性联合成为一个，综合设置字体样式。使用体样式。使用font属性时，不需要设置的属性可以省略，多个属性之属性时，不需要设置的属性可以省略，多个属性之间用空格分隔，多个属性必须按如下顺序指定间用空格分隔，多个属性必须按如下顺序指定 。l5.HSL模式通过对模式通过对 、亮度、亮度(L)三个颜色通道的变化以及它三个颜色通道的变化以及它们的相互叠加来得到各式各样的颜色。们的相互叠加来得到各式各样的颜色。l6.属性被用于创建投影，即文本背后的一个稍微偏移的深色版本属性被用于创建投影，即文本背后的一个稍微偏移的深色版本