《第13章CSS控制文本的显示》由会员分享，可在线阅读，更多相关《第13章CSS控制文本的显示（28页珍藏版）》请在金锄头文库上搜索。
1、第第1313章章 CSSCSS控制文本的显示控制文本的显示CSS中，文本的控制包括两个方面的内容，一方面控制文本中，文本的控制包括两个方面的内容，一方面控制文本中字体的各种显示效果（例如，控制字体的大小等），另一方面中字体的各种显示效果（例如，控制字体的大小等），另一方面控制文本的显示效果（例如，文本的缩进等）。在控制文本的显示效果（例如，文本的缩进等）。在CSS中文本的控中文本的控制是很重要的内容，文本的显示效果，直接影响读者对页面信息制是很重要的内容，文本的显示效果，直接影响读者对页面信息的读取。通过本章学习，应该掌握以下知识要点：的读取。通过本章学习，应该掌握以下知识要点：重点掌握重点掌
2、握CSS控制字体的显示方法并能熟练应用控制字体的显示方法并能熟练应用了解了解CSS控制文本的显示方法及其使用方法控制文本的显示方法及其使用方法能熟练使用字体综合属性能熟练使用字体综合属性13.1 13.1 控制字体的显示控制字体的显示在在CSS中，字体的控制有控制文本的字体、字体的中，字体的控制有控制文本的字体、字体的大小、字体的样式、字体的颜色、字体的修饰等方面的大小、字体的样式、字体的颜色、字体的修饰等方面的内容。本节将分别进行详细讲解。内容。本节将分别进行详细讲解。13.1.1 13.1.1 字体选择属性字体选择属性font-familyfont-family字体选择属性（字体选择属性（
3、font-family），），用来定义文本中使用的用来定义文本中使用的那种字体。字体选择属性的值为字体名称，其语法结构如下那种字体。字体选择属性的值为字体名称，其语法结构如下所示。所示。13.1.2 13.1.2 字体颜色属性字体颜色属性colorcolor字体颜色属性，用来定义字体使用的颜色。在定义字体字体颜色属性，用来定义字体使用的颜色。在定义字体颜色的时候，要注意字体颜色和背景之间的对比，方便读者颜色的时候，要注意字体颜色和背景之间的对比，方便读者的阅读。的阅读。13.1.3 13.1.3 字体大小属性字体大小属性font-sizefont-size字体大小属性（字体大小属性（font-
4、size），），用来控制元素中字体的显示尺寸。在用来控制元素中字体的显示尺寸。在字体的大小属性中，可以使用几个属性值，通常使用的是以字体的大小属性中，可以使用几个属性值，通常使用的是以px为单位的长为单位的长度值，其语法结构如下所示。度值，其语法结构如下所示。13.1.4 13.1.4 字体样式属性字体样式属性font-stylefont-style字体样式属性（字体样式属性（font-style），），用来定义字体的显示样用来定义字体的显示样式。在字体样式属性中，可以使用几个属性值，包括，式。在字体样式属性中，可以使用几个属性值，包括，norma、italic、oblique。13.1.5
5、13.1.5 字体加粗属性字体加粗属性font-weightfont-weight字体加粗属性（字体加粗属性（font-weight），），用来定义字体是否显示加粗用来定义字体是否显示加粗和变细的效果。在字体样式属性中，可以使用两类属性值，一类和变细的效果。在字体样式属性中，可以使用两类属性值，一类是用名称命名的属性值，例如是用名称命名的属性值，例如blod等。另一类是用数字命名的属性等。另一类是用数字命名的属性值，例如值，例如200、300等。等。13.1.6 13.1.6 字体修饰属性字体修饰属性text-decorationtext-decoration字体修饰属性（字体修饰属性（tex
6、t-decoration），），用来定义字体的修饰效用来定义字体的修饰效果，例如下划线等。在字体修饰属性中，可以使用果，例如下划线等。在字体修饰属性中，可以使用5个属性值，包个属性值，包括，括，none、underline、blink、overline、line-through等。等。13.1.7 13.1.7 字体下划线位置属性字体下划线位置属性text-underline-text-underline-positionposition字体下划线位置属性（字体下划线位置属性（text-underline-position），），用来用来定义下划线的位置。在字体下划线位置属性中，可以使用两定义
7、下划线的位置。在字体下划线位置属性中，可以使用两个属性值，包括，个属性值，包括，below、above。13.1.8 13.1.8 小型大写字母属性小型大写字母属性font-variantfont-variant小型大写字母属性（小型大写字母属性（font-variant），），用来定义英文中用来定义英文中是否显示小型大写字母的效果。小型大写字母是介于大写字是否显示小型大写字母的效果。小型大写字母是介于大写字母和小写字母之间的一种字母显示效果。在小型大写字母属母和小写字母之间的一种字母显示效果。在小型大写字母属性中，可以使用两个属性值，性中，可以使用两个属性值，normal、above。13.
8、1.9 13.1.9 转换大小写属性转换大小写属性text-transformtext-transform转换大小写属性（转换大小写属性（text-transform），），用来定义英文字母大小用来定义英文字母大小写之间转换的效果。在转换大小写属性中，可以使用写之间转换的效果。在转换大小写属性中，可以使用4个属性值，个属性值，包括，包括，none、capitalize、uppercase、lowercase。13.1.10 13.1.10 字母间隔属性字母间隔属性letter-spacingletter-spacing字母间隔属性（字母间隔属性（letter-spacing），），用来定义字母
9、（或中用来定义字母（或中文文字）之间的间隔大小。在字母间隔属性中，可以使用两文文字）之间的间隔大小。在字母间隔属性中，可以使用两个属性值个属性值normal和长度值。和长度值。13.1.11 13.1.11 单词间隔属性单词间隔属性word-spacingword-spacing单词间隔属性（单词间隔属性（word-spacing），），用来定义英文单词之用来定义英文单词之间的间隔。在单词间隔属性中，可以使用间的间隔。在单词间隔属性中，可以使用2个属性值个属性值normal和长度值。和长度值。13.1.12 13.1.12 行高属性行高属性line-heightline-height行高属性（
10、行高属性（line-height），），用来定义文本中行高的大小。在用来定义文本中行高的大小。在行高属性中，可以使用行高属性中，可以使用2个属性值个属性值normal和长度值。和长度值。13.1.13 13.1.13 字体综合属性字体综合属性fontfont字体综合属性（字体综合属性（font），），用来统一定义字体的各种属性用来统一定义字体的各种属性值。在字体综合属性中，可以使用以上几个小节中讲解的部值。在字体综合属性中，可以使用以上几个小节中讲解的部分属性。分属性。13.2 13.2 控制文本的显示控制文本的显示在在CSS中文本的控制，是指控制文本的缩进、对齐、空白、显中文本的控制，是指控
11、制文本的缩进、对齐、空白、显示方向等内容。在实际制作网页时，文本的控制对整个页面的排版示方向等内容。在实际制作网页时，文本的控制对整个页面的排版起着决定性的作用，好的文本效果，不但美观，更加便于读者的阅起着决定性的作用，好的文本效果，不但美观，更加便于读者的阅读。下面进行详细讲解。读。下面进行详细讲解。13.2.1 13.2.1 文本缩进属性文本缩进属性text-indenttext-indent文本缩进属性（文本缩进属性（text-indent），），用来定义文本段落中段首的用来定义文本段落中段首的缩进效果。在文本的缩进属性中，使用的属性值为长度值，其语缩进效果。在文本的缩进属性中，使用的属
12、性值为长度值，其语法结构如下所示。法结构如下所示。13.2.2 13.2.2 文本空白属性文本空白属性white-spacewhite-space文本空白属性（文本空白属性（text-overflow），），用来把文本中使用空格，换用来把文本中使用空格，换行等空白元素的内容显示出来。在文本的空白属性中，可以使用行等空白元素的内容显示出来。在文本的空白属性中，可以使用3个个属性值，包括属性值，包括normal、pre、nowrap，其语法结构如下所示。其语法结构如下所示。white-space : normal | pre | nowrap;13.2.3 13.2.3 文本溢出属性文本溢出属性t
13、ext-overflowtext-overflow当文本内容超出元素大小的时候，就要用到文本溢出属性（当文本内容超出元素大小的时候，就要用到文本溢出属性（text-overflow）来定义这些文本的显示效果。在文本溢出属性中，可以使用两来定义这些文本的显示效果。在文本溢出属性中，可以使用两个属性值，个属性值，clip和和ellipsis，其语法结构如下所示。其语法结构如下所示。13.2.4 13.2.4 水平对齐属性水平对齐属性text-aligntext-align水平对齐属性（水平对齐属性（text-align），），用来定义元素的水平对用来定义元素的水平对齐效果。在水平对齐属性中，可以使
14、用齐效果。在水平对齐属性中，可以使用3个属性值，分别定个属性值，分别定义元素内容的左对齐、居中对齐、右对齐和两边对齐。义元素内容的左对齐、居中对齐、右对齐和两边对齐。13.2.5 13.2.5 垂直对齐属性垂直对齐属性vertical-alignvertical-align垂直对齐属性（垂直对齐属性（vertical-align），），用来定义元素的用来定义元素的垂直对齐效果。在垂直对齐属性中，可以使用垂直对齐效果。在垂直对齐属性中，可以使用10个属性个属性值。值。13.2.5 13.2.5 垂直对齐属性垂直对齐属性vertical-alignvertical-align13.2.6 13.2
15、.6 文本流向属性文本流向属性layout-flowlayout-flow文本流向属性（文本流向属性（layout-flow），），用来定义元素中文本流的显用来定义元素中文本流的显示方式。在文本流向属性中，可以使用两个属性值示方式。在文本流向属性中，可以使用两个属性值horizontal和和vertical-ideographic。13.2.7 13.2.7 文本方向属性文本方向属性directiondirection文本方向属性（文本方向属性（direction），），用来定义元素中文本的用来定义元素中文本的显示方向。在文本方向属性中，可以使用两个属性值显示方向。在文本方向属性中，可以使用两
16、个属性值ltr和和rtl，其语法结构如下所示。其语法结构如下所示。13.2.8 13.2.8 文本排序属性文本排序属性unicodeunicode- -bidibidi文本排序属性，用来定义文本内容的显示顺序。在文本文本排序属性，用来定义文本内容的显示顺序。在文本排序属性中，可以使用排序属性中，可以使用3个属性值，分别为个属性值，分别为norma、bidi-override、embed。13.2.9 13.2.9 单词换行属性单词换行属性word-breakword-break单词换行属性（单词换行属性（word-break），），用来定义文本中，能用来定义文本中，能否在单词内部换行显示。在单
17、词换行属性中，可以使用否在单词内部换行显示。在单词换行属性中，可以使用3个个属性值，分别为属性值，分别为norma、break-all、keep-all。13.2.10 13.2.10 文本断开换行属性文本断开换行属性word-wrapword-wrap文本换行属性（文本换行属性（word-wrap），），用来定义文本在容器中用来定义文本在容器中能否断开换行显示。在文本换行属性中，可以使用能否断开换行显示。在文本换行属性中，可以使用2个属性个属性值，分别为值，分别为norma、break-word。13.3 13.3 本章习题本章习题一，选择题。一，选择题。二填空题二填空题三，实战练习三，实战练习
