# 第 15 章 CSS 文本样式[下]  学习要点： 1.文本总汇 2.文本样式 3.文本控制 主讲教师：李炎恢 本章主要探讨 HTML5 中 CSS 文本样式，通过文本样式的设置，更改字体的大小、样式以及文本的方位。 **一．文本总汇** 本节课，我们重点了解一下 CSS 文本样式中文本内容的一些设置方法，样式表如下： | **属性名** | **说明** | **CSS 版本** | | --- | --- | | text-decoration | 装饰文本出现各种划线。 | 1 | | text-transform | 将英文文本转换大小写。 | 1 | | text-shadow | 给文本添加阴影 | 3 | | text-align | 设置文本对齐方式 | 1,3 | | white-space | 排版中的空白处理方式 | 1 | | letter-spacing | 设置字母之间的间距 | 1 | | word-spacing | 设置单词之间的间距 | 1 | | line-height | 设置行高 | 1 | | word-wrap | 控制段词 | 3 | | text-indent | 设置文本首行的缩进 | 1 | **二．文本样式** CSS 文本样式有三种：文本装饰、英文大小写转换和文本阴影。 **1.text-decoration** ``` p { text-decoration: underline; } ``` 解释：设置文本出现下划线。属性值如下表： | **值** | **说明** | | --- | --- | | none | 让本身有划线装饰的文本取消掉 | | underline | 让文本的底部出现一条下划线 | | overline | 让文本的头部出现一条上划线 | | line-through | 让文本的中部出现一条删除划线 | | blink | 让文本进行闪烁，基本不支持了 | //让本来有下划线的超链接取消  ``` a { text-decoration: none; } ``` **2.text-transform** ``` p { text-transform: uppercase; } ``` 解释：设置英文文本转换为大小写。 | **值** | **说明** | | --- | --- | | none | 将已被转换大小写的值恢复到默认状态 | | capitalize | 将英文单词首字母大写 | | uppercase | 将英文转换为大写字母 | | lowercase | 将英文转换为小写字母 | **3.text-shadow** ``` p { text-shadow: 5px 5px 3px black; } ``` 解释：给文本添加阴影。其中四个值，第一个值：水平偏移；第二个值：垂直偏移；第三个值：阴影模糊度（可选）；第四个值：阴影颜色（可选）。 **三．文本控制** CSS 文本样式中还有一组对文本进行访问、形态进行控制的样式。 **1.text-align** ``` p { text-align: center; } ``` 解释：指定文本的对齐方式。 | **值** | **说明** | | --- | --- | | left | 靠左对齐，默认 | |  right |  靠右对齐 | | center | 居中对齐 | |  justify |  内容两端对齐 | | start | 让文本处于结束的边界 | |  end |  让文本处于结束的边界 | start 和 end 属于 CSS3 新增的功能，但目前 IE 和 Opera 尚未支持。 **2.white-space** ``` p { white-space: nowrap; } ``` 解释：处理空白排版方式。 | **值** | **说明** | | --- | --- | | normal | 默认值，空白符被压缩，文本自动换行 | | nowrap | 空白符被压缩，文本不换行 | | pre | 空白符被保留，遇到换行符则换行 | | pre-line | 空白符被压缩，文本会在排满或遇换行符换行 | | pre-wrap | 空白符被保留，文本会在排满或遇换行符换行 | **3.letter-spacing** ``` p { letter-spacing: 4px; } ``` 解释：设置文本之间的间距。 | **值** | **说明** | | --- | --- | | normal | 设置默认间距 | | 长度值 | 比如：“数字”+“px” | **4.word-spacing** ``` p { word-spacing: 14px; } ``` 解释：设置英文单子之间的间距。 | **值** | **说明** | | --- | --- | | normal | 设置默认间距 | | 长度值 | 比如：“数字”+“px” | **5.line-height** ``` p { line-height: 200%; } ``` 解释：设置段落行高。 | **值** | **说明** | | --- | --- | | normal | 设置默认间距 | | 长度值 | 比如：“数字”+“px” | | 数值 | 比如：1,2,3 | | % | 比如：200% | **6.word-wrap** ``` p { word-wrap: break-word; } ``` 解释：让过长的英文单词断开。 | **值** | **说明** | | --- | --- | | normal | 单词不断开 | | break-word | 断开单词 | **7.text-indent** ``` p { text-indent: 20px; } ``` 解释：设置文本首行的缩进。 | **值** | **说明** | | --- | --- | | normal | 设置默认间距 | | 长度值 | 比如：“数字”+“px” |