- Div+CSS网页样式与布局从入门到精通
- 刘西杰 夏晨
- 139字
- 2020-06-27 12:03:28
第4章 使用CSS设置文本和段落样式
网页中包含的大量的文字信息，统称为文本。所有由文字构成的网页元素都是网页文本。文本的样式由文字样式和段落样式构成。在网页上表现的字体并不是由服务器决定的，而是由用户的终端系统决定的。使用CSS定义的文字样式更加丰富，实用性更强。
学习目标
字体属性
段落属性
4.1 字体属性
前面HTML中已经介绍了网页中文字的常见标签，下面将以CSS的样式定义方法来介绍文字的使用。
4.1.1 字体font-family
如果想让网站上的文字看起来更加不一样，就必须给网页中的标题、段落和其他页面元素应用不同的字体。可以用font-family属性在CSS样式里设置字体。在HTML中，设置文字的字体属性需要通过<font>标签中的face属性，而在CSS中，则使用font-family属性。
语法：
font-family: "字体1"，"字体2"，…
说明：
计算机上必须装有该字体，否则设置的这种字体将按原字体样式显示。当然，也可以写上多种字体，当对方浏览你的网站，计算机上没有安装第一种字体时，浏览器就会在列表中继续往上搜寻，直到找到有适合的字体为止。即当浏览器不支持“字体1”时，则会采用“字体2”；如果不支持“字体1”和“字体2”，则采用“字体3”，依此类推。如果浏览器不支持font-family属性中定义的所有字体，则会采用系统默认的字体。
实例：
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<title>设置字体</title>
<style type="text/css">
<!--
.h {
font-family: "宋体";
}
.g {
font-family: "隶书";
}
-->
</style>
</head>
<body>
<p><span class="g">北京房车露营公园</span>
<p><span class="h">北京马上就要进入秋高气爽的好时节了，喜爱户外旅游的你，一定想感受自然的
拥抱、体验自驾的畅快、享受舒适的休息环境。带着孩子全家一起到京郊享受一个完美假期吧。但如果想一次满
足多个心愿，把房车停在露营地是个不错的选择，这是一种生活方式，装备齐全的露营地有你想进行娱乐所需的
一切。</span><br>
</p>
</body>
</html>
此段代码中首先在<head></head>之间，用<style>定义了h中的字体font-family为“宋体”，g中的字体font-family为“隶书”，在浏览器中浏览可以看到段落中的标题文字以“隶书”显示，正文以“宋体”显示，如图4-1所示。
图4-1 设置字体
4.1.2 字号font-size
在HTML中，文字的大小是由<font>标签中的size属性来控制的。在CSS里可以使用font-size属性来自由控制字体的大小。
语法：
font-size:大小的取值
说明：
font-size的取值范围如下。
xx-small：绝对字体尺寸，最小。
x-small：绝对字体尺寸，较小。
small：绝对字体尺寸，小。
medium：绝对字体尺寸，正常默认值。
large：绝对字体尺寸，大。
x-large：绝对字体尺寸，较大。
xx-large：绝对字体尺寸，最大。
larger：相对字体尺寸，相对于父对象中字体尺寸进行相对增大。
smaller：相对字体尺寸，相对于父对象中字体尺寸进行相对减小。
length：可采用百分数或长度值，不可为负值，其百分比取值是基于父对象中字体的尺寸。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置字号</title>
<style type="text/css">
<!--
.h {
font-family: "宋体";
font-size: 12px;
}
.h1 {
font-family: "宋体";
font-size: 14px;
}
.h2 {
font-family: "宋体";
font-size: 16px;
}
.h3 {
font-family: "宋体";
font-size: 18px;
}
.h4 {
font-family: "宋体";
font-size: 24px;
}
-->
</style>
</head>
<body>
<p class="h">这里是12号字体。</p>
<p class="h1"> 这里是14号字体。</p>
<p class="h2">这里是16号字体。</p>
<p class="h3">这里是18号字体。</p>
<p class="h4">这里是24号字体。</p>
</body>
</html>
此段代码中首先在<head></head>之间，用样式定义了不同的字号font-size，然后在正文中对文本应用样式，在浏览器中的浏览效果如图4-2所示。
图4-2 设置字号
4.1.3 字体风格font-style
字体风格font-style属性用来设置字体是否为斜体。
语法：
font-style:样式的取值
说明：
样式的取值有三种：normal是默认正常的字体；italic以斜体显示文字；oblique属于中间状态，以偏斜体显示。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置斜体</title>
<style type="text/css">
<!--
.h {font-family: "宋体";
font-size: 24px;
font-style: italic;}
-->
</style>
</head>
<body>
<span class="h">自古无鱼不成宴。鱼以其无脂肪、多蛋白、味鲜美、易吸收等特点一直被人们所喜爱。
其实人们只知道鱼好吃，但对于鱼的营养价值认识得并不全面。科学研究表明：鱼为益智食品，对于儿童的智力
发育、中青年人缓解压力、提神醒脑、老年人的健康长寿等方面有着极大的作用。</span>
</body>
</html>
此段代码中首先在<head></head>之间，用<style>定义了h中的字体风格font-style为斜体italic，然后在正文中对文本应用h样式，在浏览器中的浏览效果如图4-3所示。
图4-3 字体风格为斜体
4.1.4 字体加粗font-weight
在HTML里使用<b>标签设置文字为粗体显示，而在CSS中则利用font-weight属性来设置字体的粗细。
语法：
font-weight:字体粗度值
说明：
font-weight的取值范围包括normal、bold、bolder、lighter、number。其中normal表示正常粗细；bold表示粗体；bolder表示特粗体；lighter表示特细体；number不是真正的取值，其范围是100～900，一般情况下都是整百的数字，如200、300等。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置加粗字体</title>
<style type="text/css">
<!--
.h {
font-family: "宋体";
font-size: 18px;
font-weight: bold;
}
-->
</style>
</head>
<body>
<span class="h">五岳是中国群山的代表，不仅是因为它们具有的非凡气度，更是因为它们在中华的五
千年长河中，积累沉淀下了关于历史关于岁月的印记和厚重的文化积层。对于五岳是向往已深，登五岳，看尽泰
山之雄、华山之险、衡山之秀、恒山之幽、嵩山之峻。泰山并不以美、奇、或者险著称，没有多少特别之处。人
们大多慕名而来，是因它深厚的底蕴以及历代帝王的光顾。</span>
</body>
</html>
此段代码中首先在<head></head>之间，用<style>定义了h中的加粗字体font-weight为粗体bold，然后在正文中对文本应用h样式，在浏览器中浏览效果，如图4-4所示，可以看到正文字体加粗了。
图4-4 设置加粗字体效果
4.1.5 字体变形font-variant
使用font-variant属性可以将小写的英文字母转变为大写。
语法：
font-variant:取值
说明：
在font-variant属性中，设置值只有两个，一个是normal，表示正常显示；另一个是small-caps，它能将小写的英文字母转化为大写字母且字体较小。
实例说明：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小型大写字母</title>
<style type="text/css">
<!--
.j {
font-family: "宋体";
font-size: 18px;
font-variant: small-caps;
}
-->
</style>
</head>
<body class="j">
We are experts at translating those needs into marketing solutions that work,look
great and communicate very very well.to your needs and those of your clients.We are
experts at translating those needs into marketing solutions that work,look great and
communicate very very well.
</body>
</html>
此段代码中首先在<head></head>之间，用<style>定义了j中的font-variant属性为small-caps，然后在正文中对文本应用j样式，在浏览器中浏览效果，如图4-5所示，可以看到小写的英文转变为大写了。
图4-5 小写字母转为大写
4.2 段落属性
利用CSS还可以控制段落的属性，主要包括单词间距、字符间隔、文字修饰、纵向排列、文本转换、文本排列、文本缩进和行高等。
4.2.1 单词间隔word-spacing
使用单词间隔word-spacing可以控制单词之间的间隔距离。
语法：
word-spacing:取值
说明：
可以使用normal，也可以使用长度值。normal指正常的间隔，是默认选项；长度是设置单词间隔的数值及单位，可以使用负值。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>单词间隔</title>
<style type="text/css">
<!--
.df {
font-family: "宋体";
font-size: 18px;
word-spacing: 5px;
}
-->
</style>
</head>
<body>
<span class="df">In a multiuser or network environment, the process by which the
system validates a user's logon information. <br />
A user's name and password are compared against an authorized list, validates a
user's logon information.
</span>
</body>
</html>
此段代码中首先在<head></head>之间，用<style>定义了df中的单词间隔word-spacing为#5px，然后对正文中的段落文本应用df样式，在浏览器中的浏览效果如图4-6所示。
图4-6 单词间隔效果
4.2.2 字符间隔letter-spacing
使用字符间隔可以控制字符之间的间隔距离。
语法：
letter-spacing:取值
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符间隔</title>
<style type="text/css">
<!--
.s {
font-family: "新宋体";
font-size: 14px;
letter-spacing: 5px;
}
-->
</style>
</head>
<body>
<span class="s">商厦始建于1986年12月，主营面积4万平方米，经营品种5万余种，下设服装、
鞋类、钟表珠宝、化妆品等8个专业商场，拥有一座建筑面积26000平方米，高22层的涉外三星级酒店和一座
1.8万平方米，可容纳500辆汽车的停车楼，以及面积达4000多平方米的现代化影院。它是集购物、住宿、餐
饮、娱乐于一体的现代化、多功能、综合性大型百货零售企业。<br />
在经营上，商厦充分发挥规模优势，全方位满足顾客需求，重点突出穿着类商品；在商品品牌引进方面，以
国内名牌为主，重点锁定市场占有率高、质量信誉好、大众消费群熟知的知名品牌，逐步引进国际大众品牌；坚
持品牌营销、文化营销，引导消费新时尚。多年来，商厦凭借准确的市场定位，丰富的服务内涵，先进的管理理
念，规范的管理制度跻身全国百家最大规模和最佳效益百货零售商店之列。</span>
</body>
</html>
此段代码中首先在<head></head>之间，用<style>定义了s中的字符间隔letter-spacing为#5px，然后对正文中的段落文本应用s样式，在浏览器中浏览效果，如图4-7所示。
图4-7 字符间隔效果
4.2.3 文字修饰text-decoration
使用文字修饰属性可以对文本进行修饰，如设置下画线、删除线等。
语法：
text-decoration:取值
说明：
none表示不修饰，是默认值；underline表示对文字添加下画线；overline表示对文字添加上画线；line-through表示对文字添加删除线；blink表示文字闪烁效果。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字修饰</title>
<style type="text/css">
<!--
.s {
font-family: "新宋体";
font-size: 18px;
text-decoration: underline;
}
-->
</style>
</head>
<body>
<span class="s">商厦始建于1986年12月，主营面积4万平方米，经营品种5万余种，下设服装、
鞋类、钟表珠宝、化妆品等8个专业商场，拥有一座建筑面积26000平方米，高22层的涉外三星级酒店和一座
1.8万平方米，可容纳500辆汽车的停车楼，以及面积达4000多平方米的现代化影院。它是集购物、住宿、餐
饮、娱乐于一体的现代化、多功能、综合性大型百货零售企业。<br />
在经营上，商厦充分发挥规模优势，全方位满足顾客需求，重点突出穿着类商品；在商品品牌引进方面，以
国内名牌为主，重点锁定市场占有率高、质量信誉好、大众消费群熟知的知名品牌，逐步引进国际大众品牌；坚
持品牌营销、文化营销，引导消费新时尚。多年来，商厦凭借准确的市场定位，丰富的服务内涵，先进的管理理
念，规范的管理制度跻身全国百家最大规模和最佳效益百货零售商店之列。</span>
</body>
</html>
此段代码中首先在<head></head>之间，用<style>定义了s中的文字修饰属性text-decoration为underline，然后对正文中的段落文本应用s样式，在浏览器中浏览效果，如图4-8所示，可以看到文本添加了下画线。
图4-8 文字修饰效果
4.2.4 垂直对齐方式vertical-align
使用垂直对齐方式可以设置段落的垂直对齐方式。
语法：
vertical-align:排列取值
说明：
vertical-align包括以下取值范围。
baseline：浏览器的默认垂直对齐方式。
sub：文字的下标。
super：文字的上标。
top：垂直靠上对齐。
text-top：使元素和上级元素的字体向上对齐。
middle：垂直居中对齐。
text-bottom：使元素和上级元素的字体向下对齐。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直对齐方式</title>
<style type="text/css">
<!--
.ch {
vertical-align: super;
font-family: "宋体";
font-size: 12px;
}
-->
</style>
</head>
<body>
10<span class="ch">2</span>-2<span class="ch">2</span>=96
</body>
</html>
此段代码中首先在<head></head>之间，用<style>定义了ch中的vertical-align属性为super，表示文字上标，然后对正文中的段落文本应用ch样式，在浏览器中的浏览效果如图4-9所示。
图4-9 纵向排列效果
4.2.5 文本转换text-transform
文本转换属性用来转换英文字母的大小写。
语法：
text-transform:转换值
说明：
text-transform包括以下取值范围。
none：表示使用原始值。
lowercase：表示使每个单词的第一个字母大写。
uppercase：表示使每个单词的所有字母大写。
capitalize：表示使每个字的所有字母小写。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本转换</title>
<style type="text/css">
<!--
.zh {
font-size: 14px;
text-transform: capitalize;
}
.zh1 {
font-size: 14px;
text-transform: uppercase;
}
.zh2 {
font-size: 14px;
text-transform: lowercase;
}
.zh3 {
font-size: 14px;
text-transform: none;
}
-->
</style>
</head>
<body>
<p>下面是一句话设置不同的转化值效果：</p>
<p class="zh">happy new year！</p>
<p class="zh1">happy new year！</p>
<p class="zh2">happy new year！</p>
<p class="zh3">happy new year！</p>
</body>
</html>
此段代码中首先在<head></head>之间，定义了zh、zh1、zh2、zh3四个样式，text-transform属性分别设置为capitalize（第一个字母大写）、uppercase（所有字母大写）、lowercase（所有字母小写）、none（原始值），在浏览器中的浏览效果如图4-10所示。
图4-10 文本转换效果
4.2.6 水平对齐方式text-align
使用text-align属性可以设置元素中文本的水平对齐方式。
语法：
text-align:排列值
说明：
水平对齐方式取值范围包括left、right、center和justify五种对齐方式。
left：左对齐。
right：右对齐。
center：居中对齐。
justify：两端对齐。
inherit：规定应该从父元素继承text-align属性的值。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本排列</title>
<style type="text/css">
<!--
.a {
font-family: "宋体";
font-size: 16pt;
text-align: left;
}
.b {
font-family: "宋体";
font-size: 16pt;
text-align: center;
}
.c {
font-family: "宋体";
font-size: 16pt;
text-align: right;
}
-->
</style>
</head>
<body >
<p class="a">珍珠泉乡<br>
珍珠泉乡是北京市人口密度最低的乡镇，林木绿化率88%，被誉为 “松林氧吧”。菜食河流域风景更加独
特。在这里住宿、吃饭很明智，民俗村农家院比较多，价格很公道，最主要是这里地面开阔景色怡人，又是通往
很多美景的中转地。</p>
<p class="b">珠泉喷玉<br>
相传永乐皇帝北征时饮此泉水并赐名“珠泉喷玉”。泉眼海拔 650 米，四季喷涌不断，泉水的温度常年保
持在16℃，泉水富含二氧化碳，万珠滚动争相而上，串串气泡晶莹潋滟，珍珠泉由此得名。</p>
<p class="c">望泉亭<br>
全长6公里，海拔900米，这里植被丰茂，到达山顶即是望泉亭，可观珍珠泉村全景和百亩花海。</p>
</body>
</html>
此段代码中首先在<head></head>之间，用<style>定义了text-align的不同属性，然后对不同的段落应用不同样式，在浏览器中浏览效果，如图4-11所示，可以看到文本的不同对齐方式。
图4-11 文本的不同对齐方式
4.2.7 文本缩进text-indent
在HTML中只能控制段落的整体向右缩进，如果不进行设置，浏览器则默认为不缩进，而在CSS中可以控制段落的首行缩进以及缩进的距离。
语法：
text-indent:缩进值
说明：
文本的缩进值必须是一个长度值或一个百分比。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本缩进</title>
<style type="text/css">
<!--
.k {
font-family: "宋体";
font-size: 16pt;
text-indent: 40px;
}
-->
</style>
</head>
<body>
<p class="k">为了赶上潮流，女士们每过一季都要把自己衣柜里的衣服淘汰，最好的服装永远都在商店
的橱窗里。在中国时尚女装井喷式消费热潮中，一枝独秀的韩国女装尽管售价比国内品牌高数倍，但消费需求依
然旺盛。携手国际品牌女装大鳄，独步鲜有对手的美丽事业，每季数百款靓丽女装为您带来千百万财富。</p>
</body>
</html>
此段代码中首先在<head></head>之间，用<style>定义了k中的text-indent属性为40px，表示缩进40 个像素，然后对正文中的段落文本应用k样式，在浏览器中的浏览效果如图4-12示。
图4-12 文本缩进效果
4.2.8 文本行高line-height
使用行高属性可以控制段落中行与行之间的距离。
语法：
line-height:行高值
说明：
行高值可以为长度、倍数或百分比。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本行高</title>
<style type="text/css">
<!--
.k {
font-family: "宋体";
font-size: 14pt;
line-height: 50px;
}
-->
</style>
</head>
<body>
<span class="k">延庆四海镇比市区海拔高，林木覆盖率高、日照充足，是一个天然大花圃，今年这里
种植的花卉有数千亩，四海镇种植了万寿菊、百合、茶菊、玫瑰、种籽种苗、宿根花卉和草盆花等等，这些花会
分季节开放，所以这里实现了四季鲜花不断的美景。延庆县四海镇、珍珠泉乡等地都形成了富有当地特色的旅游
模式。周边有很多民俗村、民俗户都在发展农家乐旅游，农家院好的标间也就一百多一间，普通的也就几十。
</span>
</body>
</html>
此段代码中首先在<head></head>之间，用<style>定义了k中的line-height属性为50px，表示行高为50像素，然后对正文中的段落文本应用k样式，在浏览器中浏览效果，如图4-13所示，可以看到行间距比默认的间距增大了。
图4-13 文本行高效果
4.2.9 处理空白white-space
white-space属性用于设置页面对象内空白的处理方式。
语法：
white-space:值
说明：
white-space包括三个值，其中normal是默认属性，即将连续的多个空格合并；pre会导致源中的空格和换行符被保留，但这一选项只有在IE 6中才能正确显示；nowrap强制在同一行内显示所有文本，直到文本结束或者遇到<br>对象。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>处理空白</title>
<style type="text/css">
<!--
.k {
font-family: "宋体";
font-size: 12pt;
white-space: nowrap;
}
-->
</style>
</head>
<body>
<p class="k">华丽、高贵、舒适、独立之餐贵宾房，定让您尽显身份。体会东方美食文化，品味各式佳
肴之佘，还可俯瞰西湖美景，乐趣无穷。一个美好的早餐至一顿丰俭随意的宵夜，湖边小馆均能为您提供合意的
轻食饮品。<br></p>
<p>在优扬的钢琴小调里坐饮一杯鸡尾酒，正是大堂酒吧无以上之的享受。事实上，任何时间这里都是市内
最受欢迎的约会地点。这里还可以深入田间，与花亲密接触，一幅幅优美的田园画作，游人来此驻足，无不流连
忘返，沉醉花间。</p>
</body>
</html>
此段代码中首先在<head></head>之间，用<style>定义了k中的white-space属性为nowrap，然后对正文中的段落文本应用k样式，用来规定第一段落中的文本不进行换行，在浏览器中的浏览效果如图4-14所示。
图4-14 处理空白效果
4.2.10 文本反排unicode-bidi、direction
unicode-bidi与direction属性经常一起使用，用来设置对象的阅读顺序。
1．unicode-bidi属性
语法：
unicode-bidi:bidi-override | normal | embed
说明：
在unicode-bidi属性中，bidi-override表示严格按照direction属性的值重排序；normal表示默认值；embed表示对象打开附加的嵌入层，direction属性的值指定嵌入层，在对象内部进行隐式重排序。
2．direction属性
语法：
direction:ltr | rtl | inherit
说明：
在direction属性的值中，ltr表示从左到右的顺序阅读；rtl表示从右到左的顺序阅读；inherit表示文本流的值不可继承。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本反排</title>
<style type="text/css">
<!--
.k {
font-family: "宋体";
font-size: 20pt;
direction:rtl;
unicode-bidi:bidi-override
}
-->
</style>
</head>
<body>
<span class="k">贵宾房华丽高贵</span>
</body>
</html>
此段代码中首先在<head></head>之间，用<style>定义了k中的direction属性为rtl，对文本反排，然后对正文中的段落文本应用k样式，在浏览器中的浏览效果如图4-15所示。
图4-15 文本反排效果
4.3 实例应用
CSS提供了丰富的属性来控制文字样式和段落样式。下面通过实例讲述用CSS控制网页中文字的样式。
4.3.1 控制文本的行高和间隔
在设计Web网页的工作中，行高和间隔的设置是最重要的内容之一。行高是指一行文字的高度，间隔是指两行文字之间的间隔。
下面是一个实例，通过line-height控制段落文本的行高。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p { /*设置p元素样式*/
font-family: "Times New Roman", Times, serif; /*设置字体*/
font-size: 18px; /*设置大小*/
line-height: 35px; /*设置行高*/
color: #000000; /*设置字体颜色*/
background-color: #0C3; /*设置背景颜色*/
}
</style>
</head>
<body>
<p> 长城脚下，群山环抱，坐落在延庆的世界葡萄博览园以其独特的人文自然艺术景观引来众多京城市民
一睹为快，成为今夏家庭欢聚呼朋唤友游延庆最值得一去的地方。整个园区集葡萄品种展示、观赏采摘、生态体
验、景区游览、科普教育、休闲娱乐等功能于一体，展示的葡萄品种多达1014种，50年以上的葡萄树有38株，
最大的一株树龄都已上百年，是目前国内最大的葡萄主题公园，也是北京地区最大的葡萄采摘基地，堪称“葡萄
业博物馆”。</p>
</body>
</html>
上述代码通过设置页面中p元素的样式实现了对文本行高的指定，效果如图4-16所示。
图4-16 CSS样式控制文本行高
如果上述实例中的行高值小于文本的字体大小，则会造成文本的叠加显示，代码如下所示。
<style type="text/css">
<!--
p{ /*设置p元素样式*/
line-height:28px;
font-size:18px;
background:# 0C3;
}
-->
</style>
由于行高是28px，字号是18px，行高小于字体大小，在浏览器中的效果如图4-17所示。
图4-17 文本的叠加显示
4.3.2 实现文本垂直居中
在CSS中没有设置专门的元素来定义页面内容垂直居中，但可以利用CSS的行高属性来实现。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.mm { /*设置块元素样式*/
font-size: 20px; /*设置字号*/
line-height: 300px; /*设置行高*/
color: #000000; /*设置字体颜色*/
background-color: #F90; /*设置背景颜色*/
height: 300px; /*设置高度*/
width: 800px; /*设置宽度*/
text-align: center; /*设置居中*/
border: thick solid #6C3; /*设置边框*/
}
</style>
<title>文本垂直居中</title>
</head>
<body>
<Div class="mm" >文本垂直居中</Div>
</body>
</html>
上面的代码详细设置了块元素的样式和其包含的文本样式，并通过设置行高line-height:300px实现了文本的垂直居中效果，如图4-18所示。一定要注意，实例中的行高值一定要和块元素的高度相同，否则将不能实现文本垂直居中的效果。
图4-18 文本垂直居中