第5章CSS文本常用属性
本章学习目标
掌握CSS常用的文本样式和排版属性。
理解CSS伪类的概念及作用。
掌握利用CSS设置超链接的4种状态的方法。
了解其他伪类的用法。
在掌握了CSS的语法规则和应用方法之后，想要书写结构层和样式层分离的页面，就要掌握CSS的属性，本章将讲解CSS文本的常用属性。
5.1文本属性
5.1.1文本颜色
文本颜色（color）被用来设置文字的颜色，属性的取值方法如下。
（1） 十六进制值，如#FF0000。
（2） RGB值，如RGB(255,0,0)。
（3） 颜色的名称，如red。
如例5.1所示，分别使用以上3种方法为文本颜色进行赋值，结果页面中的所有一级标题为红色，六级标题为绿色，段落文本为蓝色。
例5.1
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>文本颜色</title>
6<style type="text/css">
7h1{
8color:#ff0000;
9}
10h6{
11color:rgb(0,255,0);
12}
13p{
14color:blue;
15}
16</style>
17</head>
18<body>
19<h1>一级标题(红色)</h1>
20<h6>六级标题(绿色)</h6>
21<p>段落文本(蓝色)</p>
22</body>
23</html>
5.1.2文本字体
fontfamily用来设置文本字体。fontfamily可以用逗号隔开多个字体名称。假如客户端不认识第1种字体，就自动切换到第2种字体，第2种字体不认识就切换到第3种，以此类推。如果所有列出的字体都不认识，就使用默认字体显示。
body{font-family:"Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif}
如上例所示,定义了多个字体，一般将中文字体写在英文字体后面。因为英文字体只能渲染英文、数字和一些特殊符号，当遇到中文文本时，会向后寻找中文字体。
Web页面中，常用的中文字体有宋体、微软雅黑、华文细黑(Mac OS中)； 常用的英文字体有Tahaoma、Helvetica、Arial、sansserif。其中，Tahaoma和Arial分别用于早期Windows和现在Windows系统； Helvetica用于Mac OS； sansserif用于Linux系统。
字体文件存储于计算机磁盘中的C:/window/fonts位置。
5.1.3文本字号
文本字号（fontsize）属性可能的取值形式如表5.1所示。
表5.1fontsize属性可能的取值形式
值描述
length(常用)把fontsize设置成一个固定的值。如14px、16px
%把fontsize设置为基于父元素的一个百分比值
xxsmall
xsmall
small
medium
large
xlarge
xxlarge把字体尺寸设置为不同的尺寸，从xxsmall到xxlarge。
默认值： medium
续表
值描述
smaller把fontsize设置为比父元素更小的尺寸
larger把fontsize设置为比父元素更大的尺寸
inherit规定从父元素继承字体大小
如例5.2所示，将段落文本字号设置为12px。
例5.2
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>文本字号</title>
6<style type="text/css">
7p{
8font-size:12px;
9}
10</style>
11</head>
12<body>
13<p>段落一</p>
14<p>段落二</p>
15<p>段落三</p>
16</body>
17</html>
5.1.4字体风格
字体风格（fontstyle）属性用于将字体设置为斜体、倾斜体或正常字体。该属性可能的取值如表5.2所示。
表5.2fontstyle属性可能的取值
值描述
normal默认值。浏览器显示标准字体样式
italic浏览器显示斜体字体样式
oblique浏览器显示倾斜字体样式
inherit从父元素继承字体样式
如例5.3所示，分别为段落文本定义了普通样式、斜体样式和倾斜体样式，效果如图5.1所示。
例5.3
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>文本风格</title>
6<style type="text/css">
7p.normal {font-style:normal}
8p.italic {font-style:italic}
9p.oblique {font-style:oblique}
10</style>
11</head>
12<body>
13<p class="normal">段落一</p>
14<p class="italic">段落二</p>
15<p class="oblique">段落三</p>
16</body>
17</html>
图5.1fontstyle属性正常样式、斜体样式
和倾斜体样式效果
5.1.5小型大写字母
设置小型大写字母（fontvariant）的字体显示文本时，所有的小写字母均会被转换为大写字母。但是，小型的大写文本与其余文本相比，字体尺寸更小。这个属性可能的取值如表5.3所示。
表5.3fontvariant属性可能的取值
值描述
normal默认值。显示标准字体
smallcaps显示小型大写字母的字体
inherit从父元素继承属性值
如例5.4所示，分别为两个段落设置了不同的字母显示形式，效果如图5.2所示。
例5.4
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>小型大写字母</title>
6<style type="text/css">
7p.noraml{
8font-variant:normal;
9}
10p.small{
11font-variant:small-caps;
12}
13</style>
14</head>
15<body>
16<p class="normal">This is a paragraph.</p>
17<p class="small">This is a paragraph.</p>
18</body>
19</html>
图5.2小型大写字母和正常英文字体对比
5.1.6文本粗细
文本粗细（fontweight）用来设置文本显示的粗细，可能的取值如表5.4所示。
表5.4fontweight属性可能的取值
值描述
normal默认值。显示标准字符样式
bold粗体字符
bolder更粗体字符
lighter更细体字符
续表
值描述
100
200
300
400
500
600
700
800
900由细到粗的字符。其中，400等同于normal，700等同于bold
inherit从父元素继承字体粗细
如例5.5所示，分别为段落文本定义了正常粗细字体、粗体和细体，显示效果如图5.3所示。
例5.5
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>文本粗细</title>
6<style type="text/css">
7p.normal{
8font-weight:normal;
9}
10p.cu{
11font-weight: bold;
12}
13p.xi{
14font-weight: lighter;
15}
16</style>
17</head>
18<body>
19<p class="normal">段落文本，正常粗细</p>
20<p class="cu">段落文本，粗体</p>
21<p class="xi">段落文本，细体</p>
22</body>
23</html>
图5.3不同文本粗细效果对比
5.1.7行高
用于设置行间的距离，即行高（lineheight），不允许为负值。行高属性可能的取值如表5.5所示。
表5.5lineheight属性可能的取值
值描述
normal默认值。设置合理的行间距
number数字，用此数字与当前的字体尺寸相乘来设置行间距
length设置固定行距
%基于当前字体尺寸的百分比行距
inherit从父元素继承值
如例5.6所示，分别使用固定像素值、百分比和数值的形式设置了行距，效果如图5.4所示。
例5.6
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>行距</title>
6<style type="text/css">
7p.big{line-height: 35px;}
8p.small{line-height: 15px;}
9p.persents{line-height: 200%;}
10p.number{line-height: 2;}
11</style>
12</head>
13<body>
14<p>这是默认行高<br>多数浏览器的默认行高为20px <br>认行高段落 <br>默认行高段落 <br>
15</p>
16<p class="big">这是段落35像素行高<br>这个段落文本行高较大 <br>这个段落文本行高较大 <br>
17</p>
18<p class="small">这是段落15像素行高<br>这个段落文本行高较小 <br>这个段落文本行高较小 <br>
19</p>
20<p class="persents">这是段落200%行高<br>这个段落文本行高较大 <br>这个段落文本行高较大 <br>
21</p>
22<p class="number">这是段落2倍字号行高<br>这个段落文本行高较大 <br>这个段落文本行高较大 <br>
23</p>
24</body>
25</html>
图5.4lineheight设置不同值的效果
注意： lineheight与fontsize之间的差值(即行间距)分为两半，分别加到一个文本行内容的顶部和底部，包含这些内容的最小框就是行框。
5.1.8font综合设置属性
font综合设置属性在一个声明中设置所有字体的属性，其语法格式如下：
font: font-style font-variant font-weight font-size/line-height font-family
在CSS中，属性值可以拆分成多个属性表示的称为复合属性，如下所示。
font: 13px/22px Arial, Helvetica, sans-serif;
上述示例就是使用font复合属性同时设置了字号、行高和字体。字号和行高属性值之间有个斜杠，等同于下面的代码。
font-size:13px;
line-height:22px;
font-family:Arial, Helvetica, sans-serif;
在使用font综合设置属性时，不需要设置的属性可以省略(取默认值)。但是，必须保留fontsize和fontfamily属性，否则font属性将不起作用。
5.1.9文本对齐
文本对齐（textalign）属性设置元素中文本的水平对齐方式，该可能的取值如表5.6所示。
表5.6textalign属性可能的取值
值描述值描述
left左对齐，默认值center居中
right右对齐justify两端对齐
如例5.7所示，设置段落文本的3种对齐方式，效果如图5.5所示。
例5.7
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>水平对齐方式</title>
6<style type="text/css">
7p.right{text-align: right;}
8p.center{text-align: center;}
9p.left{text-align: left;}
10</style>
11</head>
12<body>
13<p>默认对齐方式文本</p>
14<p class="left">设置了左对齐文本</p>
15<p class="right">设置了右对齐文本</p>
16<p class="center">设置了居中对齐文本</p>
17</body>
18</html>
在例5.7中，第13行代码未设置textalign属性与第14行代码设置的textalign值为left对齐方式效果相同，可见默认的水平对齐方式为左对齐。
图5.5textalign水平对齐方式不同值的效果
5.1.10文本装饰
文本装饰（textdecoration）属性规定添加到文本的修饰，如上画线、下画线和中画线等，可能的取值如表5.7所示。
表5.7textdecoration属性可能的取值
值描述值描述
none标准文本，默认值overline带上画线
underline带下画线linethrough带中画线
在例5.8中，分别为3个三级标题定义了文本装饰为带下画线、带上画线、带中画线，效果如图5.6所示。
例5.8
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>文本装饰</title>
6<style type="text/css">
7h3.unline{text-decoration: underline;}
8h3.upline{text-decoration: overline;}
9h3.cenline{text-decoration: line-through;}
10</style>
11</head>
12<body>
13<h3>标准文本</h3>
14<h3 class="unline">带下画线文本</h3>
15<h3 class="upline">带上画线文本</h3>
16<h3 class="cenline">带中画线文本</h3>
17</body>
18</html>
图5.6textdecoration不同属性值效果
5.1.11文本缩进
文本缩进（textindent）属性定义文本块中首行文本的缩进。该属性值允许为负值。如果为负值，则首行会被缩进到左边。该属性可能的取值如表5.8所示。
表5.8textindent属性可能的取值
值描述
length固定的缩进。默认值为0
%基于父元素百分比缩进
在中文段落排版中，一般设置文字首行缩进两个中文字符。如例5.9所示，定义了段落标记缩进值为2em。由于采用了em为单位，左缩进2倍字号大小，达到缩进两个字符的效果，如图5.7所示。注意： 在段落的第1行会缩进，而换行之后的行不会缩进。
例5.9
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>段落缩进</title>
6<style type="text/css">
7p{text-indent: 2em;}
8</style>
9</head>
10<body>
11<p>这是第一个段落<br>第一个段落换行之后的文本<br>第一个段落再换行之后的文本</p>
12<p>这是第二个段落<br>第二个段落换行之后的文本<br>第二个段落再换行之后的文本</p>
13</body>
14</html>
图5.7textindent设置首行缩进两个字符效果
5.1.12字间隔
字间隔（wordspacing）属性定义元素中字之间插入多少空白符。“字”指的是由空白符包围的一个字符串，取值可以为正值或负值，0等同于取值为normal。
如例5.10所示，分别为两个段落定义了宽松的字间隔和紧凑的字间隔。从图5.8可以看出，当wordspacing取值为正时，字间隔较为宽松； 当wordspacing取值为负时，字间隔紧凑甚至缩在一起。
例5.10
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>字间距</title>
6<style type="text/css">
7p.big{word-spacing: 40px;}
8p.small{word-spacing: -1em;}
9</style>
10</head>
11<body>
12<p class="big">This is some text.</p>
13<p class="small">This is some text.</p>
14</body>
15</html>
图5.8wordspacing设置正值、负值效果
5.1.13字母间隔
字母间隔（letterspacing）属性修改的是字母之间的间隔，取值可为正值、负值或normal(0)。取值可使字母之间的间隔增加或减少指定的值。
如例5.11所示，定义了两个四级标题的字母间隔，取正值时字母间隔稀疏，取负值时紧凑在一起甚至文本显示不全，效果如图5.9所示。
例5.11
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>字母间隔</title>
6<style type="text/css">
7h4.big{letter-spacing: 16px;}
8h4.small{letter-spacing: -1em;}
9</style>
10</head>
11<body>
12<h4 class="big">This is the header 4.</h4>
13<h4 class="small">This is the header 4.</h4>
14</body>
15</html>
图5.9letterspacing设置正值和负值时的效果
5.1.14处理空白符
处理空白符（whitespace）属性设置布局过程中如何处理元素内的空白。在编辑代码时，会手动输入空格、换行等； 在浏览器渲染页面时，默认情况会合并手动输入的空格，对于按Enter键输入的换行则忽略，但是可以识别<br>标记进行换行，且内容会根据容器大小在边界换行。whitespace属性可能的取值及处理这些情况的方法如表5.9所示。
表5.9whitespace属性可能的取值及处理这些情况的方法
值源 码 空 格源 码 换 行<br>换行容器边界换行
normal合并忽略换行换行
pre保留换行换行不换行
nowrap合并忽略换行不换行
prewrap保留换行换行换行
preline合并换行换行换行
whitespace属性会导致文本排版形式的变化，经常与overflow属性一起使用。
在例5.12中，从第7行代码开始，定义<p>标记宽度为100px，overflow:hidden表示将超出定义大小的内容隐藏； 第11行代码中textoverflow:ellipsis表示溢出的文本将被截断并添加省略号，效果如图5.10所示。
例5.12
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>文本溢出显示省略号</title>
6<style>
7p{
8width:100px;
9overflow: hidden;
10white-space:nowrap;
11text-overflow: ellipsis;
12}
13</style>
14</head>
15<body>
16<p>前端开发订阅号专注前端开发和技术分享，如果描述超过100像素，则会隐藏，添加省略号</p>
17</body>
18</html>
图5.10溢出文本显示省略号效果
5.2应用案例
制作如图5.11所示的页面效果，其代码如例5.13所示。
图5.11文字排版效果
其中，发布日期之前的“0.775”为红色，之后的发布信息为比标题和正文浅些的灰色； 在段落正文“空白折叠现象……”“文档流指的是元素……”中行距为1.5em，还有个别词组需要加粗显示。
例5.13
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>CSS标准文档流-EASY BOOK</title>
6<style type="text/css">
7h1{
8color:#404040;
9font-size:30px;
10font-weight:700;
11}
12h1,p{
13color:#404040;
14}
15p img.author{
16width:44px;
17height:44px;
18}
19p.info{
20color:#969696;
21font-size: 12px;
22line-height: 0.1em;
23}
24.red{
25color:red;
26}
27.tit1{
28line-height: 1.5em;
29}
30.content{
31line-height: 1.5em;
32}
33.bold{
34font-weight: bold;
35}
36</style>
37</head>
38<body>
39<h1>CSS标准文档流</h1>
40<p>
41<img src="images/iconh.jpg" alt="" align="left" hspace="8px"class="author">
42天天向上
43<img src="images/attention.jpg" alt="">
44</p>
45<p class="info">
46<img src="images/diamond.gif" alt="">
47<font class="red">0.775</font>
482018.05.29 16:17:50 字数 920
49阅读 7,007
50</p>
51<h1 class="tit1">1.标准文档流</h1>
52<hr>
53<p class="content">
54<!-- 使用span标记本身不会改变文本任何样式 -->
55<span class="bold">空白折叠</span>现象。<span class="bold">高矮不齐，底边对齐;自动换行</span>，一行写不完时，换行写.
56</p>
57<h1 class="tit1">2. 标准流的微观现象： </h1>
58<hr>
59<p class="content">
60<!-- 使用span标记本身不会改变文本任何样式 -->
61<span class="bold">文档流</span>指的是元素排版布局过程中，元素会默认自动<span class="bold">从左往右，从上往下</span>的流式排列方式。并最终<span class="bold">窗体自上而下分成一行行</span>，并在每行中从左至右的顺序排放元素。
62</p>
63原文链接： https://www.jianshu.com/p/4921ba9e101d
64</body>
65</html>
例5.13中，“CSS标准文档流”用<h1>标记实现，没有采用<h1>标记默认的文本粗细，而是定义了值为700。
5.3超链接及CSS伪类选择器
CSS伪类用来给某些选择器添加特殊效果。
5.3.1锚伪类——超链接的4种状态
超链接<a>元素有4种不同的状态，在CSS中可以分别设置如下。
（1） a:link未访问的超链接(未被访问状态： 鼠标未被点击)。
（2） a:visited已访问的超链接(已被访问状态： 鼠标已被点击过)。
（3） a:hover鼠标指针滑过超链接(鼠标指针悬停状态： 鼠标指针位于链接上)。
（4） a:active已选中的超链接(活动状态： 鼠标按下的时候)。
如例5.14所示，未访问过的超链接文本“百度”显示为红色，访问过的超链接文本颜色为绿色，将鼠标指针移动到超链接文本上颜色为洋红，鼠标在超链接文本按下的时候文本显示为蓝色。
例5.14
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>超链接的4种状态</title>
6<style type="text/css">
7a:link{color:#f00;}/*红色*/
8a:visited{color:#0f0;}/*绿色*/
9a:hover{color:#f0f;}/*洋红*/
10a:active{color:#00f;}/*蓝色*/
11</style>
12</head>
13<body>
14<a href="http://www.baidu.com">百度</a>
15</body>
16</html>
注意： a:hover的定义必须位于a:link和a:visited之后才能生效； a:active必须位于a:hover之后才能生效。
伪类可以与CSS的选择器配合使用，如例5.15所示。
例5.15
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>伪类与其他选择器配合</title>
6<style type="text/css">
7a.noline:link{
8text-decoration: none;
9}
10</style>
11</head>
12<body>
13<a href="http://www.baidu.com">普通超链接</a>
14<br/>
15<a class="noline" href="http://www.sina.com.cn">使用noline类样式的超链接</a>
16</body>
17</html>
图5.12伪类与类选择器配合
使用的效果
只有使用了noline类样式的<a>标记才没有下画线，效果如图5.12所示。
如果想制作如图5.13所示仿百度搜索结果页面。大标题的超链接访问过与未访问过的显示颜色不同，且这两种样式中的关键字都显示红色； 站点名称的文本样式也不同。具体代码如例5.16所示。
图5.13仿百度搜索结果页面
注意： 搜索关键字标红显示，与所在标记文本颜色不同，将这类文本嵌套在<em>等这样的标记中； 再应用定义好的类样式，如例5.16中第7~10行代码和第34、35行代码所示。制作类似效果的时候也可以用<span>和<strong>等类似的行内标记(详见本书6.1.2节)。
例5.16
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>超链接标记CSS</title>
6<style type="text/css">
7a em,p em{
8color:red;
9font-style: normal;
10}
11p.des{
12color:#333;
13font:12px/1.5em "Microsoft Yahei";
14//微软雅黑字体
15}
16.date{
17color:#666;
18}
19.icon{
20width:14px;
21}
22.website{
23color:green;
24font-size: 12px;
25}
26a.m:visited,a.m:link{
27font-size:12px;
28color:#666;
29}
30</style>
31</head>
32<body>
33<p>
34<a href="#">关于<em>css超链接</em>样式的小<em>案例</em>-weishaohang的专栏-CSDN博客
35</a>
36</p>
37<p class="des">
38<!--span 标记本身不会产生任何样式上的变化-->
39<span class="date">2013年3月28日 -</span> 通过一个简单的对文本设置<em>css</em> a样式情况了解学习CSS a锚文本样式。1、案例<em>css</em>...一、HTMLHTML: 超文本标记语言."超文本" : 页面中包含图片、链接等...
40</p>
41<p>
42<img src="csdn.jpeg" alt="" class="icon">
43<a class="website" href="#">CSDN技术社区</a>
44<img src="down.gif" alt="">-
45<a href="#" class="m">百度快照</a>
46</p>
47<p> </p>
48<p>
49<a href="#123">HTML<em>超链接</em>a标记<em>CSS</em>样式写法示例- <em>CSS</em>教程_Web开发者-专业的开发...
50</a>
51</p>
52<p class="des">
53<!--span 标记本身不会产生任何样式上的变化-->
54<span class="date">2017年7月23日-</span> 下面我们介绍对于<em>css</em>初学者会有一点帮助了,主要告诉你HTML<em>超链接</em>标记<em>CSS</em>样式写法,这里简单举了一个实例。 定义链接样式的四个伪类 1 :link 2 :visite...
55</p>
56<p>
57<a class="website" href="#">www.webkfz.com/WEBkF/C...</a>
58<img src="down.gif" alt="">-
59<a href="#" class="m">百度快照</a>
60</p>
61</body>
62</html>
5.3.2其他伪类
在CSS2之前的版本中，定义的伪类如表5.10所示。
表5.10CSS2之前版本定义的伪类
属性描述CSS版本
:link向未被访问的超链接添加样式1
:visited向被访问过的超链接添加样式1
:hover当鼠标指针悬停在元素上方时，向元素添加样式1
:active向被激活的元素添加样式1
:focus向拥有键盘输入焦点的元素添加样式2
:firstchild向元素的第一个子元素添加样式2
:lang向带有指定lang属性的元素添加样式2
如例5.17所示，演示了:firstchild使用效果。p>em:firstchild表示选择<p>标记的第1个<em>元素。
例5.17
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>firstchild用法</title>
6<style type="text/css">
7p>em:first-child{
8font-weight: bold;
9}
10</style>
11</head>
12<body>
13<p><em>:hover"悬停"</em>： 鼠标<em>放到标记上</em>的时候。</p>
14<p><em>:active"激活"</em>： 鼠标<em>单击标记，但是不松开</em>鼠标。</p>
15</body>
16</html>
在例5.17中，第8行代码fontweight是字体粗细属性，bold表示粗体。由于选择器只选中了<p>标记中的第1个<em>标记，只有第1对<em>标记内文本加粗显示，效果如图5.14所示。
图5.14使用em:firstchild选择第1个<em>子元素