【文档说明】HTML+CSS+JavaScript网页设计-第8章-使用CSS设置文本样式.ppt，共(37)页，286.000 KB，由小橙橙上传

转载请保留链接：https://www.ichengzhen.cn/view-2913.html

以下为本文档部分文字说明：

HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第1页第8章使用CSS设置文本样式本章概述本章的学习目标主要内容HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第2页本章概述CSS规则包含了两个部分：选择器(用于指定规则

应用的元素)和属性，上一章学习了CSS的各种选择器的使用方法，从本章开始介绍CSS的属性，CSS的属性有很多，本章主要介绍与文本样式相关的属性，包括控制文本的字体、外观、颜色、特殊效果以及换行格式等。通过本章的学习读者应掌握如何使用CSS样式美化网页中的文本。HTML+CSS+Jav

aScript网页设计第8章使用CSS设置文本样式第3页本章的学习目标掌握控制文本字体的CSS属性了解font-size属性值的几种格式掌握font属性值中包含的多个属性的先后顺序了解CSS中的表示颜色的几种模式掌握CSS中的常用文本格式化属性的用法HTML+CSS+JavaScrip

t网页设计第8章使用CSS设置文本样式第4页主要内容8.1设置文本字体8.2文本格式化8.3本章小结8.4思考和练习HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第5页8.1设置文本字体文本是网页内容的主要元素，当文

本较多时，如果只是简单的罗列，会让访问者觉得单调乏味，因此，合理编排和有效控制文字的显示方式，就显得十分重要了。CSS提供了大量用来控制文本样式的属性，这些属性可以分成两组：►直接影响字体及其外观的属性(包括使用的字型，是否为正体、粗体或斜体，以及文本尺寸等

)。►具有的效果与所用字体无关的属性(包括文本颜色、单词或字母间的距离等)。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第6页font-family属性font-family属性用来指定应用CSS规则的元素中文本的字体。前面的一些示例中已经使用过该属性。该属

性中指定的字体受用户环境的影响，浏览器只能在客户端计算机中已经安装对应字型的情况下才能以指定字体显示HTML文本，为了确保指定的字体能够正确显示，该属性还允许同时指定多种字体，浏览器将按顺序采用第一个可用的字体。HTML+CSS+JavaScript网

页设计第8章使用CSS设置文本样式第7页嵌入字体所谓“嵌入字体”，就是加载服务器端的字体文件，让浏览器可以显示用户计算机上没有安装的字体。在CSS3之前，网页必须使用已在客户端计算机上安装好的字体，所以在设计中会有诸多

限制。而在CSS3中，可以使用@font-face来使得所有客户端加载服务器端的字体文件，从而使得所有用户的浏览器都能正常显示这种字体，语法格式如下：►@font-face{►font-family:字

体名称;►src:url("字体文件路径");►}HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第8页font-size属性font-size属性用来为字体设置大小。该属性的值可以由多种指定方式：绝对

尺寸、相对尺寸、长度和百分比。绝对尺寸从下到大有如下几个取值，每一个值都对应一个固定的尺寸：xx-small、x-small、small、medium、large、x-large、xx-large。HTML+CSS+JavaScript网页设计第8章使用

CSS设置文本样式第9页font-size属性相对尺寸是与周围文本相比较，有smaller和larger两个取值。smaller比当前默认字号小，larger比当前默认字号大。长度是指给出具体数值，然后跟一

个表示长度的单位。单位的类型有相对单位和绝对单位。相对单位共有3种：px(像素)，与屏幕的分辨率相关联；以及em和ex，二者都与字体的大小相关联；绝对单位有5种：pt(磅)、pc(pica)、in(英寸)、cm(厘米)和mm(毫米)。百分比方式给出一

个与另一值相关的值。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第10页font-weight属性CSS的font-weight属性用来设置字体的粗细，它的可能取值有：normal(正常粗细)、bold(粗体

)、bolder(特粗，比粗体还粗一些)、lighter(特细)、100、200、300、400、500、600、700、800、900。后面几个数字值越大越粗，400等同于normal，700等同于

bold。在这些值中，bold是最常使用的。通常情况下，网页的标题，比较醒目的文字或重点突出的内容一般都会用粗体。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第11页f

ont-style属性font-style属性用来设置字体的风格，可取值包括normal、italic和oblique。其中，normal是正常字体，italic是斜体，oblique是倾斜的字体样式在印刷学中，一个字体的斜体(italic)版本通常是一种基于笔迹

的特殊风格版本，而伪斜体(oblique)则是将正常版本倾斜一个角度使用。在CSS中，当指定了font-style属性为italic时，浏览器通常会取字体的正常版本，然后简单倾斜一定角度进行渲染(与使用o

blique时应有的效果一样)。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第12页font-variant属性font-variant属性主要用于定义小型大写字母文本，这意味着所有的小

写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。小型大写字体(smallcapsfont)就像是一个较小版本的大写字母集合。font-variant属性有两个可能的取值：normal及small-caps。默认值为normal，即标准字体显

示；small-caps表示使用小型大写字体显示。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第13页font属性使用font属性可以将将前面的几个属性联合成为一个，综合设置字体样式。使用font属性时，不需

要设置的属性可以省略，多个属性之间用空格分隔，多个属性必须按如下顺序指定：font:stylevariantweightsize/行高familyHTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第14页

主要内容8.1设置文本字体8.2文本格式化8.3本章小结8.4思考和练习HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第15页8.2文本格式化除影响字体的属性外，还有一些属性用来设置文本的外观或格式(独立于显示文本

的字体)，常用的文本格式化属性如表8-2所示。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第16页color属性color属性用来设置文本的颜色，即元素的前景色，这个颜色还会应用到元素的所有边框，除非被border-colo

r或另外某个边框颜色属性覆盖。该属性最常见的取值是十六进制颜色代码、颜色名称和RGB模式，在CSS3中，又增加了RGBA、HSL、HSLA这三种模式，极大地丰富了CSS的颜色设置方式。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第

17页color属性十六进制颜色代码是设置颜色值的常用方式，将3个介于00和FF之间的十六进制数连接起来。若十六进制的3组数各自成对，则可简写为3位，例如：►#00cc66►#aabbcc<=>#abcWeb安全色是指在256色计算机系统上

总能避免抖动的颜色，表示为RGB值20%和51(相应的十六进制值为33)的倍数。因此，采用十六进制时，00\33\66\99\cc\ff被认为是Web安全色，一共6×6×6=216种。HTML+CSS+JavaScript网页设计

第8章使用CSS设置文本样式第18页color属性CSS颜色关键字包括颜色名称、transparent和currentColor。►颜色名称：指的是直接使用颜色的英文单词，如red、white、black、gray、pink、bl

ue、orange、silver、yellow、green、purple等。►transparent：用来表示文本的颜色纯透明，可以近似认为是rgba(0,0,0,0)。►currentColor：顾名思义，指当前颜色，准确来说是指当前的文字颜色。HTML+CSS+JavaScript网页设计

第8章使用CSS设置文本样式第19页color属性通过组合不同的红色、绿色、蓝色分量创造出的颜色被为RGB模式的颜色。显示器由一个个像素构成，利用电子束来表现色彩。像素把光的三原色——红色(R)、绿色(G)、蓝色(B)组合起来。每像素包含8位元色彩的信息量，有0~2

55共256个单元，其中0是完全无光状态，255是最亮状态。书写方法如下：►rgb(x%,y%,z%)►rgb(a,b,c)HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第20页color属性RGBA模式在RGB模式的基础上增加了alpha通道，用来设置

颜色的透明度，alpha通道值的范围为0~1。0代表完全透明，1代表完全不透明。RGBA颜色的表示方法如下：►rgba(r,g,b,a)IE9及以上的浏览器才支持RGBA模式的颜色。HTML+CSS+JavaScript网页设计第8章使用CSS设

置文本样式第21页color属性HSL模式通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们的相互叠加来得到各式各样的颜色。HSL标准几乎可以包括人类视力所能感知的所有颜色。HSL颜色模式的表示方法如下：►hsl(h,s,l)HTML+CSS+JavaScript网页设计第8章

使用CSS设置文本样式第22页color属性HSLA模式是HSL的扩展模式，在HSL模式的基础上增加了透明度通道alpha来设置透明度，表示方法如下：►hsla(<length>,<percentage

>,<percentage>,<opacity>)其中，前3个参数和HSL的3个参数相同，最后一个参数opacity表示透明度。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第

23页text-align属性text-align属性对于文本的功能与已经废弃的align属性类似。它会将文本在包含元素或浏览器窗口中进行对齐。该属性可能的取值有：left(左对齐)、right(右对齐)、center(居中)和justify(两端对齐)。HTML+CSS+JavaScri

pt网页设计第8章使用CSS设置文本样式第24页vertical-align属性vertical-align属性用来设置一个元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。在使用行内元素时，尤其对于图片及文本片段，vertical-align属

性特别有用。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第25页text-decoration属性text-decoration属性用来添加到文本的修饰值作用none默认，定义标准的文本，没有任何修饰underline在内容下方添加一

条线overline在内容顶部之上添加一条线line-through添加一条从中间穿过内容的线，如中划线文本。通常用于指定标记为删除的文本HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第26页te

xt-indent属性text-indent属性用于为块级元素设置首行缩进量，对行内标记无效。属性值可以采用不同单位的数值、字符宽度的倍数em，或者是相对浏览器窗口宽度的百分比。例如：“text-i

ndent:30px;”设置缩进30像素，“text-indent:2em;”设置缩进为2个字符。另外，该属性的值还可以使用负值，表示首行向前凸出相应的大小或字符，如果超出页面边界，则可能无法显示缩进的内容。HTML+CS

S+JavaScript网页设计第8章使用CSS设置文本样式第27页text-shadow属性text-shadow属性被用于创建投影，即文本背后的一个稍微偏移的深色版本。这是CSS3新引入的一个属性，该属性的值相当复杂，因为它一共有4个参数：►text-shadow:x-offsety

-offsetblurcolor;当text-shadow属性的值为“值列表”时，阴影效果会按照给定的值的顺序应用到元素的文本上，因此有可能出现互相覆盖的现象。但是text-shadow属性永远不会覆盖文本本身，阴影效

果也不会改变边框的尺寸。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第28页text-transform属性text-transform属性用来指定元素内容的大小写形式，这个属性主要是针对英文字母的大小写。可能的取值有：none

(默认值，不发生变化)、capitalize(大写每个单词的首字母)、uppercase(将元素全部内容设置为大写)、lowercase(将元素全部内容设置为小写)。HTML+CSS+JavaScript网页

设计第8章使用CSS设置文本样式第29页letter-spacing和word-spacing属性letter-spacing属性用来设置字符间的距离。松字距的字符之间有很大空间，而紧字距则表示字符挤在一起。如没有设置字距，字符间则为该字体的正常间距。如果需要增加或缩小字符

间的空间，则可以使用以像素或“em”为单位进行设置。如果有一段文本的字符间距被改动了，可以使用关键字normal指定该元素不应带有任何字距。与letter-spacing类似的一个属性是word-spacing，该属性用来设置单词间的距离，该属性对中文没有影响

，而letter-spacing属性可以影响中文的文字间距。HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第30页white-space属性white-space属性用来控制空格的显示值作用normal遵循正常的空格压缩规则pre像<pre>元素那样保留空格。但格式仍

与该元素的设置相同(与<pre>元素不同，默认情况下不是以等宽字符显示)nowrap只有在显式使用<br>元素指定时才对文本进行换行，否则文本不会换行pre-wrap保留空白符序列，但是正常地进行换行pre-line合并空白符序列，但是保留换行符HTML+CSS+JavaScript网页设计第8

章使用CSS设置文本样式第31页text-overflow属性在CSS3中，文本溢出属性text-overflow用于设置是否使用省略标记(…)标识对象内文本的溢出。text-overflow属性的取值只有两个：ellipsis和clip。ellipsis表示当对象内的文

本溢出时显示省略标记(…)；clip表示当对象内的文本溢出时不显示省略标记(…)，而是将溢出的部分剪裁掉。单独使用text-overflow属性是无法实现以省略号表示多余文本的效果的，因为text-overflow属性只是说明文字溢出时用什么方式显示，要实现在文本

溢出时产生省略号效果，还须定义以下两个内容：►white-space:nowrap;//(强制文本在一行显示)►overflow:hidden;//(将溢出内容隐藏)HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第32页wor

d-wrap属性word-wrap属性用来设置“长单词”或“URL地址”是否换行到下一行，该属性只有两个取值：normal和break-word。normal为默认值，文本自动换行；break-word表示对长单词或URL地址强制换行。word-wrap

属性在中文网站中使用比较少，因为这个属性是针对英文设计的，中文中没有所谓的“长单词”之说。一般情况下，在中文网站开发中，word-wrap属性只要采用默认值即可。HTML+CSS+JavaScript网页设计第8章

使用CSS设置文本样式第33页direction属性direction属性与dir属性类似，用于指定文本应该流动的方向。该属性可取值有：ltr(文本由左向右流动)、rtl(文本由右向左流动)和inherit(文本流动方向与父元素相同)。

在实践中，IE与Firefox中该属性的作用与align属性相同。当取值为rtl时，仅仅简单向右对齐文本。但需要注意的是，在应该由右向左显示的段落中，句号出现在句子的左侧。HTML+CSS+JavaScript网页设计第8章使

用CSS设置文本样式第34页主要内容8.1设置文本字体8.2文本格式化8.3本章小结8.4思考和练习HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第35页8.3本章小结本章主要介绍了CSS用于设置文本样式的属性，包括控制文本字体的属性和文本格式化的属性。首先介绍的是文

本字体相关的属性，包括font-family、font-size、font-weight、font-style、font-variant和font等，其中font属性是将将前面的几个属性联合成为一个，综合设置字体样式；接下来讲述了常用的文本格式化属

性，包括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+JavaScript网页设计第8章使用CSS设置文本

样式第36页主要内容8.1设置文本字体8.2文本格式化8.3本章小结8.4思考和练习HTML+CSS+JavaScript网页设计第8章使用CSS设置文本样式第37页8.4思考和练习1.在CSS3中，可以使用来使得所有客户端

加载服务器端的字体文件，从而使得所有用户的浏览器都能正常显示这种字体。2.font-size属性用来为字体设置大小。该属性的值可以由多种指定方式：绝对尺寸、相对尺寸、和。3.font-style属性用来设置字

体的风格，可取值包括normal、italic和。4.使用font属性可以将将前面的几个属性联合成为一个，综合设置字体样式。使用font属性时，不需要设置的属性可以省略，多个属性之间用空格分隔，多个属性必须按如下顺序指定。5.HSL模式通过对、、亮度(L)三个颜色通道的变化以及它们的相互叠加来

得到各式各样的颜色。6.属性被用于创建投影，即文本背后的一个稍微偏移的深色版本