知识引入
使用HTML可以对文本外观进行简单的控制,但是效果并不理想,为此CSS提供了一系列的文本外观样式属性,具体如下。
- 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)。