CSS文本外观属性内容（知识点1）

知识引入

使用HTML可以对文本外观进行简单的控制，但是效果并不理想，为此CSS提供了一系列的文本外观样式属性，具体如下。

1. color:文本颜色

color属性用于定义文本的颜色，其取值方式有以下三种。

（1）预定义的颜色值，如red、green、blue等。

（2）十六进制，例如#FF6600,#29D794，#FF0000等，实际工作中，十六进制是最常用定义颜色的方式。

（3）RGB代码，如红色可表示为rgb(255，0，0)或rgb(100%,0%,0%)。

例如要把一段文本颜色变为红色，可以写以下代码：p{ color:red; }

*注意：如果使用RGB代码的百分比颜色值，即使是取值为0也不能够省略百分号。

2.letter-spacing:字间距

Letter-spacing属性用于定义字间距，所谓字间距就是字符和字符之间的空白。其属性值可以是不同单位的数值。定义字间距时，允许使用负值，默认属性为normal，例如下面的代码分别为h2和h3定义了不同的间距。

h2{letter-spacing:20px;}

h3{letter-spacing:-0.5em;}

3.word-spacing：单词间距

（1）word-spacing的属性是定义单词和单词之间的距离,对中文字符无效。与letter-spacing一样，其属性值可以是不同单位的数值，允许用负值，默认为normal。

（2）word-spacing和letter-spacing均可以对英文进行设置。不同的是letter-spacing定义的是字母与字母之间的距离，而word-spacing定义的是单词和单词之间的距离，下面通过一个案例来演示一下它们的使用方法。

先写代码，如图1.

图1

保存运行代码如图2

图2

4.line-height:行间距

line-height属性一般用于设置行间距，意思就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性单位有三种，分别是像素px、相对值em、百分比%，实际工作中最常用的还是像素px.。

下面通过一个案例来演示一下line-height属性的使用方法。

先写代码，如图3

图3

保存后运行代码如图4

图4

5.text-transform:文本转换

text-transform属性用于控制英文字符的大小写，其可用属性值如下。

（1）none:不转换，（默认值）。

（2）capitalize:首字母大写。

(3)uppercase:全部字符转换成大写。

（4）lowercase:全部字符转换成小写。

6.text-decoration:文本装饰

text-decoration:属性用于定义文本的下划线、删除线等装饰效果，其可用属性值如下。

（1）none:没有装饰。

（2）underline:下画线。

（3）overline: 上画线。

（4）line-through:删除线。

text-decoration可以赋多个值，中间用空格隔开，用于给文本添加多种显示效果，下面通过案例来演示一下text-decoration的使用方法。

先写代码，如图5

图6

保存运行如图7

图7

7.以上就是CSS文本外观属性内容（知识点1）了，下期我们讲CSS文本外观属性内容（知识点2）。