《第三章 CSS设置文本格式》由会员分享，可在线阅读，更多相关《第三章 CSS设置文本格式（8页珍藏版）》请在金锄头文库上搜索。
1、第三章 CSS设置文本格式在CSS中有关文字的控制，除了字体属性外还有文本属性，文本属性主要帮助实现对文本更加精细的控制，如字符、单词及行与行的间距等。1 调整字符间距letter-spacing字符间距letter-spacing属性用来控制字符之间的间距，这个间距实际就是在浏览器中所显示字符间的空格距离。同时间距的取值必须符合长度标准。基本语法：letter-spacing:normal|长度语法说明： normal表示间距正常显示，是默认设置。 长度包括长度值和长度单位，长度值可以使用负数。 长度单位可以使用2.2节讲解“设置字体”时介绍的所有单位。实例1.html。 应用letter-
2、spacing属性 设置字符间距 这段文字的字符间距为5像素 这段文字的字符间距为15像素定义标题样式类h字符间距为正常，定义段落的样式类p1字符间距为5像素，定义标题样式类p2字符间距为15像素。网页效果如图3-1。图3-1设置字符间距2 调整单词间距word-spacing单词间距主要用来设置单词之间的空格距离。基本语法：word-spacing:normal|长度语法说明： normal表示间距正常显示，是默认设置。 长度包括长度值和长度单位，长度值可以使用负数。 长度单位可以使用2.2节讲解“设置字体”时介绍的所有单位。实例2.html。 应用word-spacing属性 设置单词间距
3、 this is a good book,many people like.单词间距为正常显示this is a good book,many people like.单词间距为10像素网页效果如图3-2。图3-2 设置单词间距3 添加文字修饰text-decorationtext-decoration对文字添加一些常用的修饰，设置下划线和删除线等。基本语法：text-decoration: underline|oveline|line-through|blink|none语法说明：表3-1 text-decoration属性取值说明属性的取值描述underline给文字添加下划线overli
4、ne给文字添加上划线line-through给文字添加删除线blink添加文字闪烁效果none没有文本修饰，是默认值实例3.html。 应用text-decoration属性 添加文字修饰 这段文字为添加下划线的效果 这段文字为添加删除线的效果 这段文字为添加上划线的效果 网页效果如图3-3。图3-3添加文字修饰4 设置文本排列方式text-aligntext-align属性用来控制文本的排列和对齐方式。基本语法：text-align:left|right|center|justify语法说明： 该语法中的4个属性值可以任意选择其中一个。其中，left代表左对齐方式；right代表右对齐方式；
5、center代表居中对齐方式；justify代表两端对齐方式。 该属性可应用于HTML中的任何模块级标记，如， 等。实例4.html。 应用text-align属性 设置文本排列方式 这段文字为左对齐排列方式这段文字为左对齐排列方式 这段文字为左对齐排列方式 这段文字为右对齐排列方式这段文字为右对齐排列方式 这段文字为右对齐排列方式 这段文字为两端对齐排列方式这段文字为两端对齐排列方式这段文字为两端对齐排列方式这段文字为两端对齐方式 网页效果如图3-4。图3-4 设置文本排列方式5 设置段落缩进text-indenttext-indent用来控制每个文字段落的首行缩进距离的。该属性若没有设置值
6、时，默认值为不缩进。基本语法：text-indent:长度|百分比 长度包括长度值和长度单位，长度单位同样可以使用之前提到的所有单位。 百分比则是相对上一级元素的宽度而定的。实例5.html。 应用text-indent属性 设置段落缩进 这段文字的首行缩进为25%这段文字的首行缩进为25% 这段文字的首行缩进为30像素这段文字的首行缩进为30像素 这段文字的首行缩进为30点这段文字的首行缩进为30点 网页效果如图3-5。图3-5 设置段落缩进6 调整行高line-heightline-height属性可以控制文本内容之间的行间距。行间距通常是指上一行的下端到下一行上端之间的距离，调整行高也就
7、是调整行间距。基本语法：line-height:normal|数字|长度|百分比语法说明： normal为浏览器默认的行高，一般由字体大小属性来决定。 数字，表示行高为该元素字体大小与该数字相乘的结果。 长度，表示行高由长度值和长度单位确定。 百分比：表示行高是该元素字体大小的百分比。实例6.html。 应用line-height属性 调整行高 这段文字的行高为18像素 这段文字的行高为字号大小15像素的150%，即行高为22.5像素 这段文字的行高为字号大小15像素的2倍，即行高为15px乘2，30像素 网页效果如图3-6。图3-6调整行高7 转换英文大小写text-transform基本语法：text-transform:uppercase|lowercase|capitalize|none语法说明：可以选用text-transform属性中的任何一个属性值来转换英文单词的大小写。语法中具体的属性值说明见表3-2。表3-2 text-transform属性取值说明属性的取值描述uppercase使所有单词的字母都大写lowercase使所有单词的字母都小写capitalize使每个单词的首字母大写none默认值显示实例7.html。 应用text-transform属性
