第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 2 3 4 5文本颜色 6 17 18 19

一级标题(红色)

20
六级标题(绿色)
21

段落文本(蓝色)

22 23 5.1.2文本字体 fontfamily用来设置文本字体。fontfamily可以用逗号隔开多个字体名称。假如客户端不认识第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、sansserif。其中，Tahaoma和Arial分别用于早期Windows和现在Windows系统； Helvetica用于Mac OS； sansserif用于Linux系统。 字体文件存储于计算机磁盘中的C:/window/fonts位置。 5.1.3文本字号 文本字号（fontsize）属性可能的取值形式如表5.1所示。 表5.1fontsize属性可能的取值形式 值描述 length(常用)把fontsize设置成一个固定的值。如14px、16px %把fontsize设置为基于父元素的一个百分比值 xxsmall xsmall small medium large xlarge xxlarge把字体尺寸设置为不同的尺寸，从xxsmall到xxlarge。 默认值： medium 续表 值描述 smaller把fontsize设置为比父元素更小的尺寸 larger把fontsize设置为比父元素更大的尺寸 inherit规定从父元素继承字体大小 如例5.2所示，将段落文本字号设置为12px。 例5.2 1 2 3 4 5文本字号 6 11 12 13

段落一

14

段落二

15

段落三

16 17 5.1.4字体风格 字体风格（fontstyle）属性用于将字体设置为斜体、倾斜体或正常字体。该属性可能的取值如表5.2所示。 表5.2fontstyle属性可能的取值 值描述 normal默认值。浏览器显示标准字体样式 italic浏览器显示斜体字体样式 oblique浏览器显示倾斜字体样式 inherit从父元素继承字体样式 如例5.3所示，分别为段落文本定义了普通样式、斜体样式和倾斜体样式，效果如图5.1所示。 例5.3 1 2 3 4 5文本风格 6 11 12 13

段落一

14

段落二

15

段落三

16 17 图5.1fontstyle属性正常样式、斜体样式 和倾斜体样式效果 5.1.5小型大写字母 设置小型大写字母（fontvariant）的字体显示文本时，所有的小写字母均会被转换为大写字母。但是，小型的大写文本与其余文本相比，字体尺寸更小。这个属性可能的取值如表5.3所示。 表5.3fontvariant属性可能的取值 值描述 normal默认值。显示标准字体 smallcaps显示小型大写字母的字体 inherit从父元素继承属性值 如例5.4所示，分别为两个段落设置了不同的字母显示形式，效果如图5.2所示。 例5.4 1 2 3 4 5小型大写字母 6 14 15 16

This is a paragraph.

17

This is a paragraph.

18 19 图5.2小型大写字母和正常英文字体对比 5.1.6文本粗细 文本粗细（fontweight）用来设置文本显示的粗细，可能的取值如表5.4所示。 表5.4fontweight属性可能的取值 值描述 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 2 3 4 5文本粗细 6 17 18 19

段落文本，正常粗细

20

段落文本，粗体

21

段落文本，细体

22 23 图5.3不同文本粗细效果对比 5.1.7行高 用于设置行间的距离，即行高（lineheight），不允许为负值。行高属性可能的取值如表5.5所示。 表5.5lineheight属性可能的取值 值描述 normal默认值。设置合理的行间距 number数字，用此数字与当前的字体尺寸相乘来设置行间距 length设置固定行距 %基于当前字体尺寸的百分比行距 inherit从父元素继承值 如例5.6所示，分别使用固定像素值、百分比和数值的形式设置了行距，效果如图5.4所示。 例5.6 1 2 3 4 5行距 6 12 13 14

这是默认行高
多数浏览器的默认行高为20px
认行高段落
默认行高段落
15

16

这是段落35像素行高
这个段落文本行高较大
这个段落文本行高较大
17

18

这是段落15像素行高
这个段落文本行高较小
这个段落文本行高较小
19

20

这是段落200%行高
这个段落文本行高较大
这个段落文本行高较大
21

22

这是段落2倍字号行高
这个段落文本行高较大
这个段落文本行高较大
23

24 25 图5.4lineheight设置不同值的效果 注意： lineheight与fontsize之间的差值(即行间距)分为两半，分别加到一个文本行内容的顶部和底部，包含这些内容的最小框就是行框。 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综合设置属性时，不需要设置的属性可以省略(取默认值)。但是，必须保留fontsize和fontfamily属性，否则font属性将不起作用。 5.1.9文本对齐 文本对齐（textalign）属性设置元素中文本的水平对齐方式，该可能的取值如表5.6所示。 表5.6textalign属性可能的取值 值描述值描述 left左对齐，默认值center居中 right右对齐justify两端对齐 如例5.7所示，设置段落文本的3种对齐方式，效果如图5.5所示。 例5.7 1 2 3 4 5水平对齐方式 6 11 12 13

默认对齐方式文本

14

设置了左对齐文本

15

设置了右对齐文本

16

设置了居中对齐文本

17 18 在例5.7中，第13行代码未设置textalign属性与第14行代码设置的textalign值为left对齐方式效果相同，可见默认的水平对齐方式为左对齐。 图5.5textalign水平对齐方式不同值的效果 5.1.10文本装饰 文本装饰（textdecoration）属性规定添加到文本的修饰，如上画线、下画线和中画线等，可能的取值如表5.7所示。 表5.7textdecoration属性可能的取值 值描述值描述 none标准文本，默认值overline带上画线 underline带下画线linethrough带中画线 在例5.8中，分别为3个三级标题定义了文本装饰为带下画线、带上画线、带中画线，效果如图5.6所示。 例5.8 1 2 3 4 5文本装饰 6 11 12 13

标准文本

14

带下画线文本

15

带上画线文本

16

带中画线文本

17 18 图5.6textdecoration不同属性值效果 5.1.11文本缩进 文本缩进（textindent）属性定义文本块中首行文本的缩进。该属性值允许为负值。如果为负值，则首行会被缩进到左边。该属性可能的取值如表5.8所示。 表5.8textindent属性可能的取值 值描述 length固定的缩进。默认值为0 %基于父元素百分比缩进 在中文段落排版中，一般设置文字首行缩进两个中文字符。如例5.9所示，定义了段落标记缩进值为2em。由于采用了em为单位，左缩进2倍字号大小，达到缩进两个字符的效果，如图5.7所示。注意： 在段落的第1行会缩进，而换行之后的行不会缩进。 例5.9 1 2 3 4 5段落缩进 6 9 10 11

这是第一个段落
第一个段落换行之后的文本
第一个段落再换行之后的文本

12

这是第二个段落
第二个段落换行之后的文本
第二个段落再换行之后的文本

13 14 图5.7textindent设置首行缩进两个字符效果 5.1.12字间隔 字间隔（wordspacing）属性定义元素中字之间插入多少空白符。“字”指的是由空白符包围的一个字符串，取值可以为正值或负值，0等同于取值为normal。 如例5.10所示，分别为两个段落定义了宽松的字间隔和紧凑的字间隔。从图5.8可以看出，当wordspacing取值为正时，字间隔较为宽松； 当wordspacing取值为负时，字间隔紧凑甚至缩在一起。 例5.10 1 2 3 4 5字间距 6 10 11 12

This is some text.

13

This is some text.

14 15 图5.8wordspacing设置正值、负值效果 5.1.13字母间隔 字母间隔（letterspacing）属性修改的是字母之间的间隔，取值可为正值、负值或normal(0)。取值可使字母之间的间隔增加或减少指定的值。 如例5.11所示，定义了两个四级标题的字母间隔，取正值时字母间隔稀疏，取负值时紧凑在一起甚至文本显示不全，效果如图5.9所示。 例5.11 1 2 3 4 5字母间隔 6 10 11 12

This is the header 4.

13

This is the header 4.

14 15 图5.9letterspacing设置正值和负值时的效果 5.1.14处理空白符 处理空白符（whitespace）属性设置布局过程中如何处理元素内的空白。在编辑代码时，会手动输入空格、换行等； 在浏览器渲染页面时，默认情况会合并手动输入的空格，对于按Enter键输入的换行则忽略，但是可以识别
标记进行换行，且内容会根据容器大小在边界换行。whitespace属性可能的取值及处理这些情况的方法如表5.9所示。 表5.9whitespace属性可能的取值及处理这些情况的方法 值源 码 空 格源 码 换 行
换行容器边界换行 normal合并忽略换行换行 pre保留换行换行不换行 nowrap合并忽略换行不换行 prewrap保留换行换行换行 preline合并换行换行换行 whitespace属性会导致文本排版形式的变化，经常与overflow属性一起使用。 在例5.12中，从第7行代码开始，定义

标记宽度为100px，overflow:hidden表示将超出定义大小的内容隐藏； 第11行代码中textoverflow:ellipsis表示溢出的文本将被截断并添加省略号，效果如图5.10所示。 例5.12 1 2 3 4 5文本溢出显示省略号 6 14 15 16

前端开发订阅号专注前端开发和技术分享，如果描述超过100像素，则会隐藏，添加省略号

17 18 图5.10溢出文本显示省略号效果 5.2应用案例 制作如图5.11所示的页面效果，其代码如例5.13所示。 图5.11文字排版效果 其中，发布日期之前的“0.775”为红色，之后的发布信息为比标题和正文浅些的灰色； 在段落正文“空白折叠现象……”“文档流指的是元素……”中行距为1.5em，还有个别词组需要加粗显示。 例5.13 1 2 3 4 5CSS标准文档流-EASY BOOK 6 37 38 39

CSS标准文档流

40

41 42天天向上 43 44

45

46 470.775 482018.05.29  16:17:50  字数 920  49阅读 7,007 50

51

1.标准文档流

52
53

54 55空白折叠现象。高矮不齐，底边对齐;自动换行，一行写不完时，换行写. 56

57

2. 标准流的微观现象：

58
59

60 61文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。 62

63原文链接： https://www.jianshu.com/p/4921ba9e101d 64 65 例5.13中，“CSS标准文档流”用

标记实现，没有采用

标记默认的文本粗细，而是定义了值为700。 5.3超链接及CSS伪类选择器 CSS伪类用来给某些选择器添加特殊效果。 5.3.1锚伪类——超链接的4种状态 超链接元素有4种不同的状态，在CSS中可以分别设置如下。 （1） a:link未访问的超链接(未被访问状态： 鼠标未被点击)。 （2） a:visited已访问的超链接(已被访问状态： 鼠标已被点击过)。 （3） a:hover鼠标指针滑过超链接(鼠标指针悬停状态： 鼠标指针位于链接上)。 （4） a:active已选中的超链接(活动状态： 鼠标按下的时候)。 如例5.14所示，未访问过的超链接文本“百度”显示为红色，访问过的超链接文本颜色为绿色，将鼠标指针移动到超链接文本上颜色为洋红，鼠标在超链接文本按下的时候文本显示为蓝色。 例5.14 1 2 3 4 5超链接的4种状态 6 12 13 14百度 15 16 注意： a:hover的定义必须位于a:link和a:visited之后才能生效； a:active必须位于a:hover之后才能生效。 伪类可以与CSS的选择器配合使用，如例5.15所示。 例5.15 1 2 3 4 5伪类与其他选择器配合 6 11 12 13普通超链接 14
15使用noline类样式的超链接 16 17 图5.12伪类与类选择器配合 使用的效果 只有使用了noline类样式的标记才没有下画线，效果如图5.12所示。 如果想制作如图5.13所示仿百度搜索结果页面。大标题的超链接访问过与未访问过的显示颜色不同，且这两种样式中的关键字都显示红色； 站点名称的文本样式也不同。具体代码如例5.16所示。 图5.13仿百度搜索结果页面 注意： 搜索关键字标红显示，与所在标记文本颜色不同，将这类文本嵌套在等这样的标记中； 再应用定义好的类样式，如例5.16中第7~10行代码和第34、35行代码所示。制作类似效果的时候也可以用和等类似的行内标记(详见本书6.1.2节)。 例5.16 1 2 3 4 5超链接标记CSS 6 31 32 33

34关于css超链接样式的小案例-weishaohang的专栏-CSDN博客 35 36

37

38 392013年3月28日 - 通过一个简单的对文本设置css a样式情况了解学习CSS a锚文本样式。1、案例css...一、HTMLHTML: 超文本标记语言."超文本" : 页面中包含图片、链接等... 40

41

42 43CSDN技术社区 44- 45百度快照 46

47

 

48

49HTML超链接a标记CSS样式写法示例- CSS教程_Web开发者-专业的开发... 50 51

52

53 542017年7月23日- 下面我们介绍对于css初学者会有一点帮助了,主要告诉你HTML超链接标记CSS样式写法,这里简单举了一个实例。 定义链接样式的四个伪类 1 :link 2 :visite... 55

56

57www.webkfz.com/WEBkF/C... 58- 59百度快照 60

61 62 5.3.2其他伪类 在CSS2之前的版本中，定义的伪类如表5.10所示。 表5.10CSS2之前版本定义的伪类 属性描述CSS版本 :link向未被访问的超链接添加样式1 :visited向被访问过的超链接添加样式1 :hover当鼠标指针悬停在元素上方时，向元素添加样式1 :active向被激活的元素添加样式1 :focus向拥有键盘输入焦点的元素添加样式2 :firstchild向元素的第一个子元素添加样式2 :lang向带有指定lang属性的元素添加样式2 如例5.17所示，演示了:firstchild使用效果。p>em:firstchild表示选择

标记的第1个元素。 例5.17 1 2 3 4 5firstchild用法 6 11 12 13

:hover"悬停"： 鼠标放到标记上的时候。

14

:active"激活"： 鼠标单击标记，但是不松开鼠标。

15 16 在例5.17中，第8行代码fontweight是字体粗细属性，bold表示粗体。由于选择器只选中了

标记中的第1个标记，只有第1对标记内文本加粗显示，效果如图5.14所示。 图5.14使用em:firstchild选择第1个子元素