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.

CSS文本外观属性内容(知识点1)_第1张图片

图1

保存运行代码如图2

CSS文本外观属性内容(知识点1)_第2张图片

图2

4.line-height:行间距

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

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

先写代码,如图3

CSS文本外观属性内容(知识点1)_第3张图片

图3

保存后运行代码如图4

CSS文本外观属性内容(知识点1)_第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

CSS文本外观属性内容(知识点1)_第5张图片

图6

保存运行如图7

CSS文本外观属性内容(知识点1)_第6张图片

图7

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

你可能感兴趣的:(#html,css,前端,dreamweaver,html5,html)