1、HTML5+CSS3+JavaScript网页设计与制作项目教程项目2 认识CSS3美化网页目录E N T E R P R I S E O P E R A T I O N R E P O R T04.总结提升03.知识链接02.学习目标01.项目导入05.拓展训练PART 01项目导入“旅行家旅行家联系方式联系方式”页面效果展示页面效果展示在进行网页页面实现时，CSS3技术能够让原有的网站变得生动美观，文字错落有致。本章我们将使用HTML+CSS3制作“旅行家-联系方式”页面。PART 0202知 识 目 标能 力 目 标1、了解CSS3的发展历史及主流浏览器的支持情况2、掌握CSS选择器，能
2、够运用CSS选择器选择页面元素3、熟悉CSS文本样式属性，能够运用相应的属性定义文本样式4、理解CSS优先级，能够区分复合选择器权重的大小5、掌握CSS3新增的属性选择器6、理解关系选择器的用法，能够准确判断元素与元素之间的关系7、掌握常用的结构化伪类选择器、伪元素选择器、CSS伪类等实现页面的不同效果。1、能够熟练运用CSS3属性选择器为页面中的元素添加样式2、能够灵活运用CSS美化网页02PART 0303一、CSS3简介1.CSS概述CSS(Cascading Style Sheets)通常称为CSS样式表或层叠样式表（级联样式表），它以HTML为基础，提供了丰富的功能，如字体、颜色、背
3、景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。如下图，文字的颜色、大小、图片间的间距等都是通过CSS来控制的。032.CSS历史大事记20世纪90年代初，HTML语言诞生，各种形式的样式表也随之出现。但随着HTML功能的增加，外来定义样式的语言变得越来越没有意义了。1994 年，Hkon Wium Lie 最初提出了 CSS 的想法，联合当时正在设计 Argo 的浏览器的Bert Bos，他们决定一起合作设计 CSS，于是创造了 CSS 的最初版本。CSS发展至今出现了4个版本。一、CSS3简介03一、CSS3简介 CSS11996 年 12 月，W3C 推出了 CSS 规范
4、的第一版本。1997 年，W3C 颁布 CSS1.0 版本，CSS1.0 较全面地规定了文档的显示样式，可分为选择器、样式属性、伪类/对象几个部分。CSS21998 年，W3C 发布了 CSS 的第二个版本，目前的主流浏览器都采用这标准。CSS2 的规范是基于 CSS1 设计的，包含了 CSS1 所有的功能，并扩充和改进了很多更加强大的属性。包括选择器、位置模型、布局、表格样式、媒体类型、伪类、光标样式。CSS2.12004年2月，CSS2.1正式推出。它在CSS2的基础上略微做了改动，删除了许多不被浏览器支持的属性。CSS32005 年 12 月，W3C 开始 CSS3 标准的制定，到目前为
5、止该标准还没有最终定稿。但是各主流浏览器已经开始支持其中的绝大部分特性。3.CSS3浏览器支持情况CSS3给我们带来众多全新的设计体验，但并不是所有的浏览器都完全支持它。各主流浏览器对CSS3模块的支持情况如下。一、CSS3简介CSS3模块Chrome4Safari4Firefox3.6Opera10.5IE10RGBAHSLAM u l t i p l e BackgroundBorder ImageBorder RadiusBox ShadowOpacityCSS AnimationsCSS ColumnsCSS GradientsCSS ReflectionsCSS Transforms
6、CSS Transforms 3DCSS TransitionsCSS FontFace03各个浏览器厂商对CSS3各属性的支持程度不一样，因此在标准尚未明确的情况下，会用厂商的前缀加以区分，通常把这些加上私有前缀的属性称之为“私有属性”。各主流浏览器都定义的自己的私有属性，以便让用户更好的体验CSS3的新特性！一、CSS3简介内核类型浏览器私有前缀TridentIE8/IE9/IE10-msWebkit谷歌（Chrome）/Safari-webkitGecko火狐（Firefox）-mozBlinkOpera-o当运用CSS3私有属性时，先写私有的CSS3属性，再写标准的CSS3属性。当一个
7、属性成为标准，并且被Firefox、Chrome等浏览器的最新版普遍兼容的时候，我们就可以去掉该属性的CSS3前缀了。031、CSS样式规则（1）CSS语法格式：CSS(Cascading Style Sheet)层叠样式表，它是用来美化页面的一种语言，即上面提到的W3C规范中的“样式”。可以美化界面，也可以做页面布局。CSS的样式规则，具体结构如下：选择器属性1:属性值1；属性2:属性值2；属性3:属性值3；例子：二、CSS核心基础03 选择器用于指定CSS样式作用的HTML对象。花括号内是对该对象设置的其体样式；属性和属性值以“键值对”的形式出现；属性是对指定的对象设置的样式属性，例如字体
8、大小、文本颜色等，属性和属性值之间用英文”:”连接；多个“键值对”之间用英文”;”进行区分。二、CSS核心基础CSS语法格式说明：03在书写CSS样式时候，除了要遵循CSS样式规则，还必须注意CSS代码结构中的几个特点：CSS样式中的选择器要严格区分大小写，而声明不区分大小写，按照书写习惯一般将选择器、声明都采用小写的方式。多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略但是为了便于增加新样式最好保留。如果属性的属性值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。例如:p font-family:“Times New Roman；二、CSS核心基础0
9、31、CSS样式规则（2）CSS注释语句在编写CSS代码时，为了提高代码的可读性，可使用注释语句进行注释，其语法格式如下“/*注释语句*/”例如：p font-family:“Times New Roman /*注释语句不会显示在浏览器窗口中*/二、CSS核心基础032、引入CSS样式表CSS用于修饰网页样式，但是，如果希望CSS修饰的样式起作用，就必须在html档中引入CSS样式表。引入样式表的常用方式有三种：行内式 内嵌式 外链式二、CSS核心基础03（1）行内式行内式也称内联样式，是通过标记的style属性来设置标记的样式，其基本语法格式如下：内容style是标记的属性，用来设置行内式。
10、属性和属性值的书写规范与CSS样式规则一样，行内式只对其所在的标记及嵌套在其中的子标记起作用。通常CSS的书写位置是在头部标记中，行内式却是写在根标记中。单击查看【案例2-1】二、CSS核心基础03案例：【例2-1】使用行内式添加CSS样式在上述代码中，使用标记的style属性设置行内式CSS样式，用来修饰一级标题的字体大小和颜色。效果如图所示。二、CSS核心基础 使用行内式引入CSS样式 使用CSS行内式修饰一级标题的字体大小和颜色提醒：行内式是通过标记的属性来控制样式的，并没有做到结构与样式分离，所以一般很少使用。03（2）内嵌式内嵌式是将CSS代码集中写在HTML文档的头部标记中，并且用
11、标记定义，其基本语法格式如下：上述语法中，标记一般位于标记中title标记之后，也可以把它放在HTML文档的任何地方。把CSS代码放在头部有利于提前下载和解析，可以避免网页内容下载后没有样式修饰带来的尴尬。除此之外，必须设置type的属性值为“text/css”，这样浏览器才知道标记包含的是CSS代码。单击查看【案例2-2】二、CSS核心基础 选择器 属性1:属性值1;属性2:属性值2;属性3:属性值3;03案例：【例2-2】使用内嵌式引入CSS样式二、CSS核心基础 内嵌样式表案例演示 h2 text-align:center;p font-size:20px;color:#f00;text
12、-decoration:underline;内嵌样式表 内嵌样式表一般将CSS代码集中在head头部标记中。03（3）外链式外链式是将所有的样式放在一个或多个以“.css”为扩展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文档中，其基本语法格式如下:标记需要放在头部标记中，并且必须指定标记的三个属性:href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。type：定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表。rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文
13、档是一个样式表文件。单击查看【案例2-3】二、CSS核心基础 03案例：【例2-3】通过外链式引入CSS样式表外链式是使用频率最高是最实用的CSS样式表，因为它将HTML代码与CSS代码分离为两个或多个文件，实现了将结构和样式完全分离，使得网页的前期制作和后期维护都十分方便。二、CSS核心基础 使用内嵌式引入CSS样式 外链样式表 通过link标记将扩展名为.CSS的外部样式表文件链接到html文档中来。h2 text-align:center;p font-size:20px;color:#00f;text-decoration:underline;03样式表的三种引入方式的优缺点及使用情况
14、进行总结:二、CSS核心基础样式表优点缺点使用情况控制范围行内式书写方便，权重高没有实现样式和结构相分离较少控制一个标签（少）内嵌式部分结构和样式相分离没有彻底分离较多控制一个页面（中）外链式完全实现结构和样式相分离需要引入最多，强烈推荐控制整个站点（多）033、CSS基础选择器要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。（1）标签选择器（2）类选择器（3）id选择器（4）通配符选择器（5）交集选择器（6）并集选择器（7）后代选择器二、CSS核心基础03（1）标签选择器一个完整的HTML页面是由很多不同的标签组
15、成。标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本格式如下：标签名属性1:属性值1;属性2:属性值2;属性3:属性值3;如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身。例如：以上CSS代码会对整个文档添加黑色背景；将所有p元素字体大小设置为30像素同时添加灰色背景；对文档中所有h2元素添加红色背景。二、CSS核心基础html background-color:black;p font-size:30px;background-color:gray;h2 backgr
16、ound-color:red;标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。03（2）类选择器类选择器使用“.”符号开头，后面跟上一个自定义的名称，在使用时候，以HTML标签的class属性来标记，其基本语法格式如下：.类名属性1:属性值1;属性2:属性值2;属性3:属性值3;在该语法中，类名即为HTML元素的class属性值，大多数HTML元素都可以定义class属性。同一个class名可应用在多个HTML标签上，在调用完“.text”样式后，字体均变为10px。二、CSS核心基础 示例一 示例二类选择器最大的优势是可以为元素对象定义单独或
17、相同的样式。.textfont-size:10px;03（2）类选择器类选择器也可以结合元素选择器使用，如：p.textcolor:blue;/注意p与.与text间不能有空格该样式只将颜色变为蓝色。一个元素也可以有多个类选择器，如下所示：需要主要的是，类名的第一个字符不能使用数字，并且要严格区分大小写，一般采用小写的英文字符。二、CSS核心基础03（3）id选择器 id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：#id名属性1:属性值1;属性2:属性值2;属性3:属性值3;类似于类选择器，有一定区别：同一个名字的id选择器在同一个HTML文档中，只能使用一次；一个元素只能有
18、一个id选择器查看【案例2-4】二、CSS核心基础03案例：【例2-4】使用CSS选择器二、CSS核心基础 使用内嵌式引入CSS样式 p font-family:宋体;.font1 color:green;#font2 text-decoration:underline;使用标签选择器 使用类选择器 使用类选择器 使用id选择器03（4）通配符选择器通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：属性1:属性值1;属性2:属性值2;属性3:属性值3;例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。注意：在实
19、际网页开发中并不建议使用通配符选择器，因为它设置的样式对所有的HTML标记都生效，不管标记是否需要该样式，这样反而降低了代码的执行速度。二、CSS核心基础*margin:0;/*定义外边距*/padding:0;/*定义内边距*/03（5）交集选择器交集选择器一般由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如h3.special或p#one。二、CSS核心基础查看【案例2-5】03案例：【例2-5】使用交集选择器二、CSS核心基础 标签指定式选择器 p font-size:14px;.special color:blue;p.spe
20、cial color:red;p#fold font-weight:bold;color:green;普通段落（12px）指定了.special类的段落文本（红色）指定了#fold的段落文本（加粗绿色）二级标题文本 指定了.special类的二级标题文本（蓝色）例3-5中除了定义和标记外，还单独定义了p.special和p#fold，用于特殊的控制。03（6）并集选择器并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器都可以作为并集选择器的一部分。若某些选择器定义的样式完全或部分相同，可利用并集选择器为它们定义相同的样式。二、CSS核心基础查看【案例2-6】03案例：【例2-6】使用并
21、集选择器二、CSS核心基础 并集选择器 h2,h3,p font-size:20px;/*不同标记组成的并集选择器*/h3,.special,#one text-decoration:underline;color:red;/*标记、类、id组成的并集选择器*/独坐敬亭山 唐 李白 众鸟高飞尽,孤云独去闲。相看两不厌，只有敬亭山。03（7）后代选择器后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。二、CSS核心基础查看【案例2-7】03案例：【例2-7】使用后代选择器二、CSS核心基础 后代选
22、择器 p strong color:red;font-weight:700;/*后代选择器*/strong font-style:italic;color:blue;普通段落 指定了.strong类的段落文本 段落中的强调部分，后代选择器嵌套。031、字体样式属性 font-size：字号大小 font-family：字体样式 font-weight：字体粗细 font-style：字体风格 font：综合设置字体样式 font-face属性 word-wrap属性三、文本样式属性03三、文本样式属性.字体样式相对长度单位说明em相对于当前对象内文本的字体尺寸px像素，最常用，推荐使用绝对长度
23、单位说明in英寸cm厘米mm毫米pt点（1）font-size：字号大小font-size 属性可设置字体的尺寸。该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。例如将网页中所有段落文本的字号大小设为12px，可以使用如下CSS样式：p font-size:12px;032）font-family：字体样式font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：p font-family:微软雅黑;可以为给定的元素指
24、定多个字体。要做到这一点，需要把这些字体按照优先顺序排列，然后用逗号进行连接：p font-family:微软雅黑，“宋体”,”花纹彩云”;当应用上面的字体样式时，会首选“微软雅黑”，如果用户电脑上没有安装该字体，则选择“宋体”，也没有安装宋体，则选择“黑体”。当指定的字体都没有安装时，就会使用浏览器默认字体。三、文本样式属性.字体样式03使用font-family设置字体时，需要注意以下几点：各种字体之间必须使用英文状态下的逗号隔开；中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前，如下面的代码：bodyfont-family:
25、Arial,”微软雅黑”,”宋体”,”黑体”;/*正确的书写方式*/bodyfont-family:”微软雅黑”,”宋体”,”黑体”,Arial;/*错误的书写方式*/如果字体名中包含空格、#或$之类的符号，则该字体必须加英文状态下的单引号或双引号，如：font-family:”Times New Roman”;。尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。三、文本样式属性.字体样式03（3）font-weight：字体粗细font-weight属性用于定义字体的粗细，其可用的属性值如下。在实际的网页开发中，常用的font-weight的属性值为normal和bold，用来定义
26、正常或加粗显示的字体。如下面的例子：值描述normal默认值。定义标准的字符。bold定义粗体字符。bolder定义更粗的字符。lighter定义更细的字符。100900（100的整数倍）定义由细到粗的字符。其中400等同于normal，700等同于bold，值越大字体越粗。p.normal font-weight:normal;p.thick font-weight:bold;p.thicker font-weight:900;三、文本样式属性.字体样式034）font-style：字体风格font-style 属性最常用定义字体风格，如设置斜体、倾斜或正常字体，该属性有三个值：normal
27、-文本正常显示 italic-文本斜体显示 oblique-文本倾斜显示使用方法如下：p.normal font-style:normal;p.italic font-style:italic;p.oblique font-style:oblique;提示：斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。三、文本样式属性.字体样式035）font：综合设置字体样式font属性用于对字体样式进行综合设置
28、。其基本语法格式为：选择器font:font-style font-variant font-weight font-size/line-height font-family;使用font属性时，必须按照上面语法格式中的顺序书写，各个属性以空格隔开。例如：p font-family:Arial,宋体;font-size:25px;font-style:italic;font-weight:bold;font-variant:small-caps;line-height:40px;/*行高*/其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则
29、font属性将不起作用。p f o n t:i t a l i c s m a l l-caps bold 25px/40px Arial,宋体等价于三、文本样式属性.字体样式03案例：【例2-8】字体的综合设置 字体的综合设置 .onefont:italic small-caps 18px/30px 华文彩云;.twofont:italic 18px/30px;段落1：综合使用字体的样式 段落2：综合使用字体的样式 三、文本样式属性.字体样式036）font-face属性 font-face是CSS3的新增属性，用于定义服务器字体。通过font-face属性，开发者可以在用户计算机未安装字体
30、时，使用任何喜欢的字体。其语法格式如下：font-face font-family:字体名称;src:字体路径;在上面的语法格式中，font-family用于指定该服务器字体的名称，该名称可以随意定义；src属性用于指定该字体文件的路径。三、文本样式属性.字体样式03案例：【例2-9】font-face属性练习 font-face属性练习 font-face font-family:汉字拼音体;src:url(font/汉字拼音体.ttf);pfont-family:汉字拼音体;font-size:32px;海纳百川，有容乃大；壁立千仞，无欲则刚。三、文本样式属性.字体样式037）word-w
31、rap属性word-wrap属性用于长单词和URL地址的自动换行，其基本格式如下：选择器word-wrap:属性值;在上面的语法格式中，word-wrap属性的取值有两种，如表所示。值描述normal只在允许的断字点换行（浏览器保持默认处理）。break-word在长单词或 URL 地址内部进行换行。三、文本样式属性.字体样式03案例：【例2-10】word-wrap属性 word-wrap属性 pwidth:100px;height:100px;border:1px solid#ff0000;.break-wordword-wrap:break-word;/*网址在段落内部换行*/word-
32、wrap:normal;效果展示 百度网站http:/ word-wrap:break-word;效果展示 百 度 网 站http:/ 三、文本样式属性.字体样式032、文本外观属性 color：文本颜色 letter-spacing：字间距 word-spacing：单词间距 line-height：行间距 text-transform：文本转换 text-decoration：文本装饰 text-align：水平对齐方式 text-indent：首行缩进 white-space：空白符处理 text-shadow：阴影效果 text-overflow：标示对象内溢出文本三、文本样式属性03
33、1）color：文本颜色Color属性指定文本的颜色。其取值方式如表所示。三、文本样式属性.文本外观值描述实例颜色的名称颜色的名称，比如red,blue,brown,lightseagreen等，不区分大小写。color:red;/*红色*/color:black;/*黑色*/color:gray;/*灰色*/color:white;/*白色*/color:purple;/*紫色*/十六进制十六进制符号#RRGGBB 和#RGB（比如#ff0000）。#后跟 6 位或者 3 位十六进制字符（0-9,A-F）。#f03，#F03，#ff0033，#FF0033，rgb(255,0,51)rgb(
34、255,0,51)RGB，红-绿-蓝（red-green-blue(RGB)）规定颜色值为 rgb 代码的颜色，函数格式为 rgb(R,G,B)，取值可以是 0-255 的整数或百分比。rgb(255,0,51)rgb(255,0,51)rgb(100%,0%,20%)rgb(100%,0%,20%)RGBA，红-绿-蓝-阿尔法（RGBa）RGBa 扩展了 RGB 颜色模式，它包含了阿尔法通道，允许设定一个颜色的透明度。a 表示透明度：0=透明；1=不透明。rgba(255,0,0,0.1)/*10%不透明*/rgba(255,0,0,0.4)/*40%不透明*/rgba(255,0,0,0.
35、7)/*70%不透明*/rgba(255,0,0,1)/*不透明，即红色*/HSL，色相-饱和度-明度（Hue-saturation-lightness）色相（Hue）表示色环（即代表彩虹的一个圆环）的一个角度。饱和度和明度由百分数来表示。100%是满饱和度，而 0%是一种灰度。100%明度是白色，0%明度是黑色，而 50%明度是一般的。hsl(120,100%,25%)/*深绿色*/hsl(120,100%,50%)/*绿色*/hsl(120,100%,75%)/*浅绿色*/HSLA，色相-饱和度-明度-阿尔法（HSLa）HSLa 扩展自 HSL 颜色模式，包含了阿尔法通道，可以规定一个颜色
36、的透明度。a 表示透明度：0=透明；1=不透明。hsla(240,100%,50%,0.05)/*5%不透明*/hsla(240,100%,50%,0.4)/*40%不透明*/hsla(240,100%,50%,0.7)/*70%不透明*/hsla(240,100%,50%,1)/*完全不透明*/032）letter-spacing：字间距 letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。letter-spacing属性的取值有三种。三、文本样式属性.文本外观值描述normal默认。规定字符间没有额外的空间。length定义字符间的固定空间（允许使用负值）。
37、inherit规定应该从父元素继承 letter-spacing 属性的值。033）word-spacing：单词间距word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。案例【2-11】三、文本样式属性.文本外观03案例：【例2-11】word-spacing与letter-spacing的区
38、别 word-spacing与letter-spacing的区别 .letterletter-spacing:20px;.wordword-spacing:20px;word-spacing与letter-spacing的区别 这是letter-spacing案例。这是word spacing案例。三、文本样式属性.文本外观034）line-height：行间距line-height属性用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。案例【2-12
39、】三、文本样式属性.文本外观03案例：【例2-12】行高line-height的用法 行高line-height的用法 .f i r s t f o n t-s i z e:1 6 p x;l i n e-height:18px;border:1px solid red;.s e c o n d f o n t-s i z e:1 2 p x;l i n e-height:2em;border:1px solid red;.t h i r d f o n t-s i z e:1 2 p x;l i n e-height:150%;border:1px solid red;.f o u r t
40、h f o n t-s i z e:1 4 p x;l i n e-height:2em;border:1px solid red;.f i f t h f o n t-s i z e:1 4 p x;l i n e-height:150%;border:1px solid red;行高line-height的用法 font-size:16px;line-height:18px font-size:12px;line-height:2em font-size:12px;line-height:150%font-size:14px;line-height:2em font-size:14px;l
41、ine-height:150%三、文本样式属性.文本外观035）text-transform：文本转换text-transform 属性用于控制英文字符的大小写。这个属性有 4 个值：none：默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。Uppercase：将文本转换为全大写。Lowercase：将文本转换为全小写。Capitalize：只对每个单词的首字母大写。如下所示CSS样式，可以将所有一级标题中的字符转换为大写。h1 text-transform:uppercase三、文本样式属性.文本外观036）text-decoration：文本装饰text-decorati
42、on属性用于设置文本的下划线，上划线，删除线等装饰效果。其可用属性值如下：none：没有装饰（正常文本默认值）。underline：下划线。overline：上划线。line-through：删除线。blink：会让文本闪烁text-decoration可以赋多个属性值，用于给文本添加多种显示效果。如果希望所有超链接既有下划线，又有上划线，则规则如下：a:link a:visited text-decoration:underline overline;三、文本样式属性.文本外观03案例：【例2-13】text-decoration文本装饰的用法 text-decoration文本装饰的用法
43、.firsttext-decoration:underline;/*设置下划线*/.secondtext-decoration:overline;/*设置上划线*/.thirdtext-decoration:line-through;/*设置删除线*/.f o u r t h t e x t-d e c o r a t i o n:l i n e-through underline;/*设置下划线和删除线*/设置下划线 设置上划线 设置删除线 既有删除线，又有下划线 三、文本样式属性.文本外观037）text-align：水平对齐方式text-align 属性用于设置一个元素中的文本内容的对齐
44、方式，相当于html中的align对齐属性。其可用属性值如下：left：左对齐（默认值）right：右对齐。center：居中对齐。它的属性值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。例如设置段落文字居中对齐，可使用如下CSS样式：ptext-align:center;提示：西方语言都是从左向右读，所有 text-align 的默认值是 left。文本在左边界对齐，右边界呈锯齿状（称为“从左到右”文本）。对于希伯来语和阿拉伯语之类的语言，text-align 则默认为 right，因为这些语言从右向左读。不出所料，center 会使每个文本行在元素中
45、居中。三、文本样式属性.文本外观038）text-indent：首行缩进text-indent属性用于设置文本块中首行文本的缩进。其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值,建议使用em作为设置单位。三、文本样式属性.文本外观03案例：【例2-14】首行缩进text-indent的用法 首行缩进text-indent .firsttext-indent:2em;.secondtext-indent:30px;text-indent属性用于设置文本块中首行文本的缩进。属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%
46、，允许使用负值,建议使用em作为设置单位。三、文本样式属性.文本外观039）white-space：空白符处理在HTML网页中，无论源代码中有多少空格，在浏览器中只会显示1个字符的空白。CSS中提供了white-space属性，可设置空白符的处理方式。其属性值如下：normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行。pre：预格式化，按文档的书写格式保留空格、空行原样显示。nowrap：空格空行无效，强制文本不能换行，除非遇到换行标记。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。三、文本样式属性.文本外观03案例：【例2-15】空白处理wh
47、ite-space的用法 空白处理white-space .firstwhite-space:normal;.secondwhite-space:pre;.thirdwhite-space:nowrap;锄禾 锄禾日当午，汗滴禾下土；谁知盘中餐，粒粒皆辛苦。锄禾 锄禾日当午，汗滴禾下土；谁知盘中餐，粒粒皆辛苦。锄禾 锄禾日当午，汗滴禾下土；谁知盘中餐，粒粒皆辛苦。0310）text-shadow：阴影效果text-shadow属性可以为页面中的文本添加阴影效果。其语法格式如下：选择器text-shadow:h-shadow v-shadow blur color;该语法中对应的属性值如表所示。
48、三、文本样式属性.文本外观值描述h-shadow必需。水平阴影的位置。允许负值。v-shadow必需。垂直阴影的位置。允许负值。blur可选。模糊的距离。color可选。阴影的颜色。03案例：【例2-16】文字的阴影效果 文字阴影效果 .first font-size:50px;text-shadow:5px 5px 5px red;.second font-size:50px;text-shadow:10px 10px 10px green;文字阴影 text-shadow 03可以使用text-shadow属性给文字添加多个阴影，从而产生阴影叠加的效果，方法为设置多组阴影参数，中间用逗号隔
49、开。例如：为第2段落文本p添加多个阴影。执行该样式，得到如图所示的双重阴影效果。second font-size:32px;text-shadow:10px 10px 10px green,20px 20px 20px red;/*绿色和红色的投影叠加*/0311）text-overflow：标示对象内溢出文本text-overflow属性用于标示对象内溢出的文本。其语法格式如下：选择器text-overflow:属性值;该语法中text-overflow属性常用取值有两个，如表所示。三、文本样式属性.文本外观值描述clip修剪溢出文本，不显示省略标记“”。ellipsis 用省略符号”来标示
50、被修剪的文本，省略标记插入的位置是最后一个字符。03案例：【例2-17】文字溢出效果 文字溢出效果 p width:200px;height:80px;border:1px solid red;white-space:nowrap;/*强制文本不能换行*/overflow:hidden;/*修剪溢出文本*/.first text-overflow:ellipsis;/*用省略号标示被修剪的文本*/.second text-overflow:clip;/*用省略号标示被修剪的文本*/这个段落1将向大家展示文字溢出效果，请关注。这个段落2将向大家展示文字溢出效果，请关注。03通过例2-17可以看出
