CSS控制文本的显示.ppt

《CSS控制文本的显示.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第13章CSS控制文本的显示CSS中，文本的控制包括两个方面的内容，一方面控制文本中字体的各种显示效果（例如，控制字体的大小等），另一方面控制文本的显示效果（例如，文本的缩进等）。在CSS中文本的控制是很重要的内容，文本的显示效果，直接影响读者对页面信息的读取。通过本章学习，应该掌握以下知识要点：重点掌握CSS控制字体的显示方法并能熟练应用了解CSS控制文本的显示方法及其使用方法能熟练使用字体综合属性13.1控制字体的显示在CSS中，字体的控制有控制文本的字体、字体的大小、字体的样式、字体的颜色、字体的修饰等方面的内容。本节将

2、分别进行详细讲解。13.1.1字体选择属性font-family字体选择属性（font-family），用来定义文本中使用的那种字体。字体选择属性的值为字体名称，其语法结构如下所示。13.1.2字体颜色属性color字体颜色属性，用来定义字体使用的颜色。在定义字体颜色的时候，要注意字体颜色和背景之间的对比，方便读者的阅读。13.1.3字体大小属性font-size字体大小属性（font-size），用来控制元素中字体的显示尺寸。在字体的大小属性中，可以使用几个属性值，通常使用的是以px为单位的长度值，其语法结构如下所示。13.

3、1.4字体样式属性font-style字体样式属性（font-style），用来定义字体的显示样式。在字体样式属性中，可以使用几个属性值，包括，norma、italic、oblique。13.1.5字体加粗属性font-weight字体加粗属性（font-weight），用来定义字体是否显示加粗和变细的效果。在字体样式属性中，可以使用两类属性值，一类是用名称命名的属性值，例如blod等。另一类是用数字命名的属性值，例如200、300等。13.1.6字体修饰属性text-decoration字体修饰属性（text-decorat

4、ion），用来定义字体的修饰效果，例如下划线等。在字体修饰属性中，可以使用5个属性值，包括，none、underline、blink、overline、line-through等。13.1.7字体下划线位置属性text-underline-position字体下划线位置属性（text-underline-position），用来定义下划线的位置。在字体下划线位置属性中，可以使用两个属性值，包括，below、above。13.1.8小型大写字母属性font-variant小型大写字母属性（font-variant），用来定义英文

5、中是否显示小型大写字母的效果。小型大写字母是介于大写字母和小写字母之间的一种字母显示效果。在小型大写字母属性中，可以使用两个属性值，normal、above。13.1.9转换大小写属性text-transform转换大小写属性（text-transform），用来定义英文字母大小写之间转换的效果。在转换大小写属性中，可以使用4个属性值，包括，none、capitalize、uppercase、lowercase。13.1.10字母间隔属性letter-spacing字母间隔属性（letter-spacing），用来定义字母（或

6、中文文字）之间的间隔大小。在字母间隔属性中，可以使用两个属性值normal和长度值。13.1.11单词间隔属性word-spacing单词间隔属性（word-spacing），用来定义英文单词之间的间隔。在单词间隔属性中，可以使用2个属性值normal和长度值。13.1.12行高属性line-height行高属性（line-height），用来定义文本中行高的大小。在行高属性中，可以使用2个属性值normal和长度值。13.1.13字体综合属性font字体综合属性（font），用来统一定义字体的各种属性值。在字体综合属性中，可

7、以使用以上几个小节中讲解的部分属性。13.2控制文本的显示在CSS中文本的控制，是指控制文本的缩进、对齐、空白、显示方向等内容。在实际制作网页时，文本的控制对整个页面的排版起着决定性的作用，好的文本效果，不但美观，更加便于读者的阅读。下面进行详细讲解。13.2.1文本缩进属性text-indent文本缩进属性（text-indent），用来定义文本段落中段首的缩进效果。在文本的缩进属性中，使用的属性值为长度值，其语法结构如下所示。13.2.2文本空白属性white-space文本空白属性（text-overflow），用来把文

8、本中使用空格，换行等空白元素的内容显示出来。在文本的空白属性中，可以使用3个属性值，包括normal、pre、nowrap，其语法结构如下所示。white-space:normal

9、pre

10、nowrap;13.2.3文本溢出属性text-overflow当文本内容超出元素大小