第5章 CSS3属性 学习目标  掌握CSS3基础属性的用法。  了解样式的继承。  掌握美化“感恩母亲节”页面实例的实现方式。  掌握控制显示与隐藏相关属性的用法。  掌握“赏析宋词”实例的实现方式。 在第4章中介绍了CSS3的历史、引入方式、选择器等基础知识，在本章中将继续讲解CSS3的基本属性、样式继承，以及控制显示与隐藏的相关属性。 5.1CSS3基本属性 CSS3属性能够设置或修改指定的HTML5元素的样式，如改变HTML5元素的字体样式、背景样式、文本样式等。 5.1.1尺寸属性 1. 概述 CSS3尺寸属性指的是元素的宽度和高度属性。CSS3中提供了width、height、maxwidth、minwidth、maxheight、minheight等属性来设置元素的宽度和高度，这些属性虽然非常简单，但却是必须掌握的技能。 CSS3的尺寸属性及其说明如表51所示。 表51CSS3的尺寸属性及其说明 属性 说明 width 设置元素的宽度 height 设置元素的高度 maxwidth 设置元素的最大宽度 minwidth 设置元素的最小宽度 maxheight 设置元素的最大高度 minheight 设置元素的最小高度 在CSS3中，width和height属性支持多种单位，其中，常用的两个单位为像素(px)和百分比(%)。像素是数字图像的基本单位，是指图像中最小的可寻址单元，通常由 RGB 三个颜色通道的值组成。像素也可以理解为一幅图像中最小的点，或者是计算机屏幕上最小的点。百分比是一个相对于父元素的单位，通常在嵌套标签中使用。 5.1.2字体属性 1. 概述 在CSS3中，字体属性支持字体样式的设置，主要包括字体风格、字体粗细、字体大小、字体名称等，常用的字体属性及其说明如表52所示。 表52常用的字体属性及其说明 属性 说明 fontstyle 设置字体风格。属性值有oblique(偏斜体)、italic(斜体)、normal(正常) fontweight 设置字体粗细。属性值有bold(粗体)、bolder(特粗)、lighter(细体)、normal(正常)，以及100~900的数值 fontsize 设置字体大小。属性值为数值，常用单位是像素(px) fontfamily 设置字体名称。常用属性值有“宋体”“楷体”“Arial”等 字体属性(font)可以进行连写，连写顺序为字体风格(fontstyle)、字体粗细(fontweight)、字体大小(fontsize)和字体名称(fontfamily)，字体连写的示例代码如下。 font:italic bold 16px "宋体"; 2. 演示说明 使用字体属性设置字体样式，并与默认字体样式进行对比，具体代码如例51所示。 【例51】字体属性。 1 2 3 4 5字体属性 6 11 12 13 14

千磨万击还坚劲，任尔东西南北风

15 16

千磨万击还坚劲，任尔东西南北风

17 18 19 使用字体属性设置字体样式，其运行效果如图51所示。 图51字体属性的运行效果 5.1.3背景属性 1. 概述 在CSS3中，背景属性支持背景样式的设置，主要包括背景颜色、背景图片、背景图片的重复性、背景图片位置、背景图片滚动情况等，常用的背景属性及其说明如表53所示。 表53CSS3中常用的背景属性及其说明 属性 说明 backgroundcolor 设置背景颜色。属性值可以是颜色的英文单词、十六进制数值或RGB值 backgroundimage 把图片设置为背景。属性值是图片的绝对路径或相对路径表示的URL backgroundrepeat 设置背景图片是否重复以及如何重复。属性值有norepeat(不重复)、repeatx(横向平铺)、repeaty(纵向平铺) backgroundposition 设置背景图片的位置。属性值有精确的数值或top(垂直向上)、bottom(垂直向下)、left(水平向左)、right(水平向右)、center(居中) backgroundattachment 设置背景图片的滚动情况。属性值有scroll(图片随内容滚动)、fixed(图片固定) 背景属性(background)可以进行连写，连写顺序为背景颜色(backgroundcolor)、背景图片(backgroundimage)、背景图片的重复性(backgroundrepeat)、背景图片滚动情况(backgroundattachment)、背景图片位置(backgroundposition)，背景属性连写的示例代码如下。 background:#ccc url("image/2.jpg") repeat-x scroll center; 2. 演示说明 使用背景属性设置背景样式，具体代码如例52所示。 【例52】背景属性。 1 2 3 4 5 6 7背景属性 8 16 17 18
渔舟唱晚，响穷彭蠡之滨； 雁阵惊寒，声断衡阳之浦
19 20 使用背景属性设置背景样式，其运行效果如图52所示。 图52背景属性的运行效果 5.1.4文本属性 1. 概述 在CSS3中，文本属性支持文本样式的设置，主要包括文本颜色、文本水平对齐方式、行高、文本修饰、文本转换、文本缩进等，常用的文本属性及其说明如表54所示。 表54CSS3中常用的文本属性及其说明 属性 说明 color 设置文本颜色，属性值可以是颜色的英文单词、十六进制数值或RGB值 textalign 设置文本内容为水平对齐方式，属性值有left(左对齐，默认值)、right(右对齐)、center(居中对齐)、justify(文字相对于图像对齐) lineheight 设置行高，属性值是数值，单位为像素(px) textdecoration 用于修饰文本，属性值有none(无修饰，默认值)、linethrough(删除线)、underline(下画线)、overline(上画线)、blink(闪烁) texttransform 用于控制文本大小写转换，属性值有none(不转换，默认值)、capitalize(首字母大写)、uppercase(大写)、lowercase(小写) textindent 设置文本首行缩进，属性值有数值或inherit(继承父元素属性) direction 规定文本的方向，属性值有ltr(从左到右，默认值)、rtl(从右到左) 2. 演示说明 使用文本属性设置段落文本的样式，具体代码如例53所示。 【例53】文本属性。 1 2 3 4 5文本属性 6 14 15 16

问君能有几多愁？恰似一江春水向东流。

17 18 使用文本属性设置段落的文本样式，其运行效果如图53所示。 图53文本属性的运行效果 5.2样式的继承 样式的继承是指当为一个元素设置样式时，此样式也会作用到其后代元素上，可以理解为子类元素的样式从父元素或祖先元素中继承。继承只发生在祖先元素和后代元素之间。 继承的设计是为了提高开发效率，利用继承可以将一些通用的样式统一设置到共同的祖先元素上，这样只需要设置一次样式就可以让所有的后代元素都应用该样式。但是，并不是所有的样式都会被继承，只有与元素外观(文字颜色、字体等)相关的样式会被继承，例如color、fontsize等。而与背景、布局相关的样式一般不会被继承，例如background、border、position等。此种情况的解决方式是： 在样式中使用inherit这个特别设立的值可以强行继承，明确指示浏览器在该属性上使用父元素样式中的值。接下来将通过一个案例来进行演示，具体代码如例54所示。 【例54】样式的继承。 1 2 3 4 5 6样式的继承 7 22 23 24
25

与元素外观(文字颜色、字体等)相关的样式会被继承。

26

与背景、布局相关的样式一般不会被继承。

27
28 29 运行上述代码，运行效果如图54所示。 图54样式继承的运行效果 在例54中，2个

子元素都继承了

父元素的fontsize、color和textindent属性的样式，但是没有继承border属性(边框)的样式。当为第2个

子元素设置border: inherit时，该

子元素才会继承

父元素的边框样式。 5.3实例四： 美化“感恩母亲节”页面 CSS3可以对网页进行布局，使网页更美观、大方。通过本章的学习，可以利用CSS3对第2章中的实例一“感恩母亲节”页面进行进一步美化。结合CSS3引入样式、选择器、基本属性等相关知识，为该页面重新设置样式，使其更美观。 5.3.1“感恩母亲节”页面美化后的效果图 使用CSS3相关技术对“感恩母亲节”页面进行进一步美化，其美化后的效果如图55所示。 图55“感恩母亲节”页面美化后的效果 5.3.2实现“感恩母亲节”美化页面效果 1. 主体结构代码 新建一个HTML5文件，以外链方式在该文件中引入CSS3文件，具体代码如例55所示。 【例55】美化“感恩母亲节”页面。 1 2 3 4 5美化"感恩母亲节"页面 6 7 8 9

感恩母亲节

10
112023.05.14    小锋贴文 12
13
14

15慈母手中线，游子身上衣
16临行密密缝，意恐迟迟归
17谁言寸草心，报得三春晖
18

19

20母亲对孩子的爱向来是深沉而伟大的，而孩子对母亲的爱也同样浓厚，正如"胃瞒不住 想念，酒藏不住思念"。 21

22
23 24
25

不管世界有多大，妈妈永远是最美的焦点，也是回家的方向。祝所有母亲节日快乐!

26 27 2. CSS3代码 新建一个CSS3文件optimize.css，在该文件中加入设置页面样式的CSS3代码，具体代码如下。 1/*使用通用选择器选取所有元素 */ 2*{ 3text-align: center;/* 文本居中对齐 */ 4} 5/*使用类选择器选取class值为"msg"的元素，并利用样式的继承，设置其后代元素样式 */ 6.msg{ 7color: #888;/* 设置元素颜色 */ 8font-size: 15px;/* 设置字体大小 */ 9} 10/*使用标签选择器选取所有p元素 */ 11p{ 12line-height: 30px;/* 设置行高 */ 13font-size: 18px; 14} 15.poem{ 16font: italic 600 20px "楷体"; /* 连写形式，设置字体的风格、粗细、大小、名称 */ 17line-height: 28px; 18} 19/*使用标签选择器选取a元素(超链接) */ 20a{ 21color: #3162a3; 22} 23/*使用超链接的伪类，当光标放到超链接上时，改变超链接文本的字体颜色和文本修饰 */ 24a:hover{ 25text-decoration: none;/* 取消文本修饰(取消超链接的下画线) */ 26color: #c76767; 27} 在上述CSS3代码中，使用CSS3基础属性对页面进行进一步美化。首先，使用textalign属性将网页中的文本内容设置为居中对齐方式； 其次，使用color、font等属性设置文本内容的颜色和字体样式； 最后，使用超链接的:hover伪类，当光标放到超链接上时，改变超链接文本的字体颜色和文本修饰。 5.4显示或隐藏属性 当想要控制页面中元素的显示或隐藏时，可以使用CSS3中的显示或隐藏属性。控制页面中元素的显示或隐藏的属性主要包括display、visibility和overflow，除此之外，还可以通过控制元素颜色的透明度来控制元素的显示与隐藏，控制元素颜色的透明度的属性和函数主要有opacity属性和rgba()函数。本节将围绕控制元素显示或隐藏的主要属性和函数进行讲解。 5.4.1display属性 display属性用于设置元素的显示方式，常用的属性值有none、block、inline、inlineblock等。 1. none属性值 display属性不仅可以设置元素的显示方式，还可以用于定义建立布局时元素生成的显示框类型，当属性值为none时，可隐藏元素对象，并脱离标准文档流，不占据页面位置，其语法格式如下。 display:none;//隐藏元素，不占用位置 2. block属性值 当display属性的属性值为block时，不仅可以显示元素，还可以将元素转换为块级元素，其语法格式如下。 display:block;//可显示元素，可转换为块级元素 3. display属性的其他常用属性值 display属性的其他常用属性值及其说明如表55所示。 表55display属性的其他常用属性值及其说明 属性值 说明 inline 表示将元素转换为内联元素(行内元素) inlineblock 表示将元素转换为内联元素块(行内元素块) listitem 表示将元素作为列表显示 runin 表示将元素根据上下文作为块级元素或内联元素显示 table 表示将元素作为块级表格来显示 inlinetable 表示将元素作为内联表格来显示 tablecolumn 表示将元素作为一个单元格列显示 flex 表示将元素作为弹性伸缩盒显示 inherit 规定应该从父元素继承display属性的值 4. 演示说明 创建3个元素块，使用display属性隐藏其中的一个元素，具体代码如例56所示。 【例56】隐藏元素。 1 2 3 4 5隐藏元素 6 25 26 27
1.我有一瓢酒，可以慰风尘。
28
2.勿以有限身，常供无尽愁。
29
3.是非终日有，不听自然无。
30 31 使用display属性隐藏第2个元素块，其运行效果如图56所示。 图56display属性隐藏元素块的运行效果 使用display属性隐藏元素块，可使元素块脱离标准文档流，不占据页面位置。 5.4.2visibility属性 visibility属性用于控制元素是否可见，不论元素是显示或隐藏，都会占据其本来的空间。visibility属性可用于实现提示信息展示，当光标移入或移出时，会显示提示信息。 1. 语法格式 visibility属性的值有visible、hidden、collapse和inherit等，其语法格式如下。 visibility:visible|hidden|collapse|inherit; 2. visibility属性值 visibility属性值及其说明如表56所示。 表56visibility属性值及其说明 属性值 说明 visible 默认值，表示元素是可见的 hidden 表示元素是不可见的，元素布局不会被改变，隐藏的元素仍会占用原有的空间，不会脱离标准文档流 collapse 可用于表格中的行、列、行组和列组，隐藏表格的行或列，并且不占用任何空间。此值允许从表中快速删除行或列，而不强制重新计算整个表的宽度和高度 inherit规定应该从元素继承visibility属性的值 3. 演示说明 使用visibility属性隐藏元素，可将例56中的第18、19行代码替换为如下代码。 /*使用visibility属性隐藏第2个元素块，不脱离标准文档流,占用位置 */ visibility: hidden; 使用visibility属性隐藏第2个元素块，其运行效果如图57所示。 图57visibility属性隐藏元素块的运行效果 使用visibility属性隐藏元素块，元素块不会脱离标准文档流，仍然占据页面位置。 5.4.3opacity属性 opacity属性用于控制元素的不透明度，取值范围为0.0~1.0，opacity的值越低，元素越透明。opacity的属性值为最小值，即0时，元素完全透明； 属性值为最大值，即1时，元素不透明。 1. 语法格式 opacity属性语法格式如下。 opacity:value|inherit; 若使用opacity属性隐藏元素块，可将例56中的第18、19行代码替换为如下代码。 /*使用opacity属性隐藏第2个元素块，使元素完全透明，达到隐藏元素的效果*/ opacity: 0; 使用opacity属性隐藏第2个元素块，其运行效果如图58所示。 图58opacity属性隐藏元素块的运行效果 使用opacity属性隐藏元素块，可使元素完全透明，达到隐藏元素的效果，但在实际开发中通常不会使用该方法隐藏元素。 2. 演示说明 opacity属性具有元素的透明悬停效果，通常与:hover选择器一同使用，这样就可以在光标悬停时更改元素的不透明度，具体代码如例57所示。 【例57】元素透明悬停。 1 2 3 4 5 6 7元素透明悬停 8 19 20 21 22
23 24
25 26 当光标悬停在图片上时，图片的不透明度变为0.5，运行效果如图59所示。 图59元素透明悬停的运行效果 需要注意的是，使用opacity属性为元素的背景添加不透明度时，其所有子元素都继承相同的不透明度，可能会使完全透明的元素内的文本难以阅读，此时可使用rgba()函数解决该问题。 5.4.4rgba()函数 rgba是代表red(红色)、green(绿色)、blue(蓝色)和alpha的色彩空间。 1. 语法格式 rgba()函数需要搭配颜色属性使用，语法格式与示例如下。 语法格式： color:rgba(red,green,blue,alpha); 示例： color:rgba(155,203,76,0.6); rgba()函数中各参数的介绍如下。 (1) red(红色)，0~255的整数，代表颜色中的红色成分。 (2) green(绿色)，0~255的整数，代表颜色中的绿色成分。 (3) blue(蓝色)，0~255的整数，代表颜色中的蓝色成分。 (4) alpha(不透明度)，取值为0~1，代表不透明度。 2. opacity属性与rgba()函数控制透明度的区别 opacity属性作用于元素和元素的内容，元素内容会继承元素的不透明度，取值为0~1。它会使元素及其内部的所有内容一起变透明。 rgba()函数一般作为背景色backgroundcolor或者颜色color的属性值，不透明度由其中的alpha值生效，取值为0~1。它仅对当前设置的元素进行透明变换，不会影响其他元素及元素内容的不透明度。 5.4.5overflow属性 overflow属性用于指定当元素的内容过大而无法放入指定区域时是剪裁内容还是添加滚动条。 1. 语法格式 overflow属性的值有visible、hidden、scroll、auto和inherit等，其语法格式如下。 overflow:visible|hidden|scroll|auto|inherit; 2. overflow属性值 overflow属性值及其说明如表57所示。 表57overflow属性值及其说明 属性值 说明 visible 默认值，内容不会被裁剪，会呈现在元素框之外 hidden 内容会被裁剪，并且其余内容是不可见的 scroll 内容会被裁剪，但是浏览器会显示滚动条以便查看其余的内容(不论内容是否溢出，元素框都会添加滚动条) auto 如果内容被裁剪，则浏览器会显示滚动条以便查看其余的内容(按情况是否添加滚动条，若内容不溢出，则元素框不会添加滚动条) inherit规定应该从父元素继承overflow属性的值 值得注意的是，overflow属性仅适用于具有指定高度的元素块。 3. 演示说明 使用overflow属性设置元素内容的裁剪方式，具体代码如例58所示。 【例58】overflow属性。 1 2 3 4 5overflow属性 6 19 20 21
22

抗战精神以爱国主义为核心,以救亡图存、民族解放为主题,以自强、团结、牺牲、坚 韧为基本内涵，集中展示了中国人民天下兴亡、匹夫有责的爱国情怀，视死如归、宁死不屈的民族 气节，不畏强暴、血战到底的英雄气概，百折不挠、坚忍不拔的必胜信念。

23
24 25 当overflow属性值为visible时，元素内容不会被裁剪，会呈现在元素框之外，运行效果如图510所示。 图510overflow属性值为visible的运行效果 当overflow属性值为hidden时，元素内容会被裁剪，并且其余内容是不可见的，可将例58中的第11行代码替换为如下代码。 overflow: hidden;/* 元素内容会被裁剪，并且其余内容是不可见的 */ 当overflow属性值为hidden时，运行效果如图511所示。 图511overflow属性值为hidden的运行效果 需要注意的是，overflow:hidden具有清除异常显示效果的功能，可用于清除浮动带来的异常影响和解决外边距塌陷的问题，在6.1.4节将对其进行讲解。 当overflow属性值为scroll时，元素内容会被裁剪，但是浏览器会显示滚动条以便查看其余的内容，且不论内容是否溢出，元素框都会添加滚动条。可将例58中的第11行代码替换为如下代码。 overflow: scroll;/* 内容会被裁剪，显示滚动条 */ 当overflow属性值为scroll时，运行效果如图512所示。 图512overflow属性值为scroll的运行效果 当overflow属性值设置为auto时，如果内容被裁剪，则浏览器会显示滚动条以便查看其余的内容，元素内容若不溢出，则元素框不会添加滚动条。可将例58中的第11行代码替换为如下代码。 overflow: auto;/* 内容自适应被裁剪，显示滚动条 */ 当overflow属性值设置为auto时，运行效果如图513所示。 图513overflow属性值为auto的运行效果 5.4.6显示或隐藏属性的区别 前面已经讲解过显示或隐藏元素的主要属性，包括display、visibility、overflow和opacity，本节将对这4个属性的区别进行介绍，具体如表58所示。 表58显示或隐藏属性的区别 属性 区别 用途 display 隐藏元素，不占用位置，脱离标准文档流 隐藏不占位的元素，例如制作下拉菜单、光标移入显示下拉菜单，应用是十分广泛的 visibility 隐藏元素，占用位置，不脱离标准文档流 常用于商品的提示信息方面，光标移入或移出有提示信息显示 overflow 只隐藏超出盒子大小的部分 可以保证盒子里的内容不会超出该盒子范围。可以清除浮动和解决边框塌陷问题 opacity 使元素完全透明，达到隐藏元素的效果 一般用于设置元素的不透明度，不建议使用此属性隐藏元素 拓展技能： cursor属性 cursor属性定义了当光标放在一个元素边界范围内时所保持的形状。cursor的常用属性值及其说明如表59所示。 表59cursor的常用属性值及其说明 属性值 说明 default 默认光标，通常是一个箭头 pointer 光标呈现为指示链接的指针(一只手) text 此光标指示文本，呈现为文本竖标 help 此光标指示可用的帮助，通常是一个问号或一个气球 wait 此光标指示程序正忙，通常是一只表或沙漏 move 此光标指示某对象可被移动 grab 此光标指示某对象可被抓取，呈现为一个手指 grabbing 此光标指示某对象正在被抓取中，呈现为一个抓拳 crosshair 光标呈现为十字线 zoomin 此光标指示某对象可被放大，呈现为一个放大镜 zoomout 此光标指示某对象可被缩小，呈现为一个缩小镜 5.5实例五： 赏析宋词 相对于古体诗而言，宋词是一种新体诗歌，是宋代儒客文人的智慧精华，标志着宋代文学的最高成就。下面以宋代豪放派词人苏轼的代表作《念奴娇·赤壁怀古》为例，对其进行文学赏析。 5.5.1“赏析宋词”页面结构简图 本实例是一篇关于《念奴娇·赤壁怀古》的宋词文学赏析页面。该页面主要由
元素块、

段落标签、行内元素、标签等构成。“赏析宋词”页面结构简图如图514所示。 图514“赏析宋词”页面的结构简图 5.5.2实现“赏析宋词”页面效果 1. 主体结构代码 新建一个HTML5文件，以外链方式在该文件中引入CSS3文件。首先，在标签中定义

父容器块，并添加id名为poems； 其次，在父容器中添加子元素，并加入文本内容，具体代码如例59所示。 【例59】赏析宋词。 1 2 3 4 5 6赏析《念奴娇·赤壁怀古》 7 8 9 10 11
12

赏析《念奴娇·赤壁怀古》

13

14《念奴娇·赤壁怀古》是宋代文学家苏轼的词作，是豪放词的代表作之一。全词借古 抒怀，雄浑苍凉，大气磅礴，笔力遒劲，境界宏阔，将写景、咏史、抒情融为一体，给人以撼魂荡魄的 艺术力量，曾被誉为"古今绝唱"。 15

16 17作品原文 18
19

大江东去，浪淘尽，千古风流人物。故垒西边，人道是： 三国 周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。
20遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间、樯橹灰飞烟灭。故国神 游，多情应笑我，早生华发。人生如梦，一尊还酹江月。

21
22 23

24此处查看苏轼代表作>> 25《水调歌头》《赤壁赋》《念奴娇·赤壁怀古》《江城子·密州出猎》 26

27
28 29 在上述代码中，主要有两个模块，即滚动条模块和隐藏模块，可分别实现添加滚动条、隐藏或显示元素的效果。 2. CSS代码 新建一个CSS3文件为poems.css，在该文件中加入设置页面样式的CSS3代码，具体代码如下。 1/*父容器 */ 2#poems{ 3width: 700px; 4height: 400px; 5background-color: rgb(245, 235, 234);/* 使用rgb()函数设置背景颜色 */ 6} 7h3{ 8text-align: center;/* 设置标题居中对齐 */ 9} 10p{ 11font-size: 17px;/* 设置段落字体大小 */ 12} 13.text{ 14text-indent: 2em;/* 设置该段落文本首行缩进,em为相对长度单位，相对于当前对象 内文本的字体尺寸,2em相当于2个字体尺寸(字符) */ 15} 16/*滚动条模块 */ 17span{ 18display: inline-block;/* 将内联元素转换为内联元素块 */ 19padding: 10px;/* 设置四周内边距 */ 20background-color: rgba(234, 231, 168, 0.8); /* 使用rgba()函数设置背景颜色的不透明度 */ 21} 22.works{ 23width: 500px; 24height: 100px; 25border: 1px dashed #000;/* 添加边框 */ 26background-color: #fff; 27overflow: auto;/* 添加滚动条 */ 28} 29.content{ 30width: 600px;/* 为滚动条内的子元素设置宽度 */ 31} 32/*隐藏模块 */ 33strong{ 34display: none;/* 隐藏元素 */ 35} 36/*当光标移到".see"元素上时，设置元素样式 */ 37.see:hover strong{ 38display: block;/* 显示元素 */ 39} 在上述CSS3代码中，首先，使用rgb()函数为父容器设置背景颜色； 其次，统一设置滚动条模块和隐藏模块中的行内元素，使用display属性将其转换为内联元素块再使用rgba()函数设置背景颜色的不透明度； 最后，为滚动条模块和隐藏模块添加相应样式效果，使用overflow属性的auto值为元素添加滚动条，并使用border属性为滚动条添加一条虚线边框。通过display属性中的none值将隐藏模块中的元素隐藏起来，且不占据页面位置。当光标移到".see"元素上时，再通过block值使元素显示出来。 5.6本 章 小 结 本章重点学习CSS3属性的使用，如CSS3的字体、背景和文本属性，以及控制元素显示或隐藏的相关属性。希望通过对本章内容的分析和讲解，读者能够使用CSS3属性对页面中的元素进行样式修饰。 5.7习题 1. 填空题 (1) 字体属性的连写顺序为、、、。 (2) 属性能够设置文本首行缩进。 (3) rgba是代表red、green、blue和alpha的。 (4) 属性可隐藏元素对象，并脱离标准文档流，不占用位置。 2. 选择题 (1) 用于设置元素行高的属性是()。 A. widthB. height C. maxheightD. lineheight (2) 用于设置文本内容水平对齐方式的属性是()。 A. textindentB. verticalalign C. textalignD. textshadow (3) 下列不属于overflow属性的属性值是()。 A. visibleB .none C. autoD. scroll (4) color属性用于设置文本颜色，其属性值不可以是()。 A. RGB值B. 颜色的英文单词 C. 二进制数值D. 十六进制数值 3. 思考题 (1) 简述样式继承的优点。 (2) 简述display、visibility、overflow和opacity这4个属性的区别。