第 15 章 CSS 文本样式[下]

学习要点：

1.文本总汇

2.文本样式

3.文本控制

主讲教师：李炎恢

本章主要探讨 HTML5 中 CSS 文本样式，通过文本样式的设置，更改字体的大小、样式以及文本的方位。

一．文本总汇

本节课，我们重点了解一下 CSS 文本样式中文本内容的一些设置方法，样式表如下：

二．文本样式

CSS 文本样式有三种：文本装饰、英文大小写转换和文本阴影。

1.text-decoration

p {
    text-decoration: underline;
}

解释：设置文本出现下划线。属性值如下表：

//让本来有下划线的超链接取消

a {
    text-decoration: none;
}

2.text-transform

p {
    text-transform: uppercase;
}

解释：设置英文文本转换为大小写。

3.text-shadow

p {
    text-shadow: 5px 5px 3px black;
}

解释：给文本添加阴影。其中四个值，第一个值：水平偏移；第二个值：垂直偏移；第三个值：阴影模糊度（可选）；第四个值：阴影颜色（可选）。

三．文本控制

CSS 文本样式中还有一组对文本进行访问、形态进行控制的样式。

1.text-align

p {
    text-align: center;
}

解释：指定文本的对齐方式。

start 和 end 属于 CSS3 新增的功能，但目前 IE 和 Opera 尚未支持。

2.white-space

p {
    white-space: nowrap;
}

解释：处理空白排版方式。

3.letter-spacing

p {
    letter-spacing: 4px;
}

解释：设置文本之间的间距。

4.word-spacing

p {
    word-spacing: 14px;
}

解释：设置英文单子之间的间距。

5.line-height

p {
    line-height: 200%;
}

解释：设置段落行高。

6.word-wrap

p {
    word-wrap: break-word;
}

解释：让过长的英文单词断开。

7.text-indent

p {
    text-indent: 20px;
}

解释：设置文本首行的缩进。