共计 3187 个字符，预计需要花费 8 分钟才能阅读完成。
字体款式针对的是“文字自身”的形体成果，而文本款式针对的是“整个段落”的排版成果。字体款式重视个体，文本款式重视整体。常见的文本款式如下表。
| 属性 | 阐明 |
|---|---|
| text-indent | 首行缩进 |
| text-align | 程度对齐 |
| text-decoration | 文本润饰 |
| line-height | 行高 |
| text-transform | 大小写转换 |
| letter-spacing、word-spacing | 字母间距、词间距 |
接下来，咱们一起来看看这些属性的使用。
text-indent
p 元素的首行是不会主动缩进的，因而咱们在 HTML 中往往应用 6 个 （空格）来实现首行缩进两个字的空格。然而这种形式会导致冗余代码很多。因而应用 text-indent 属性来定义 p 元素的首行缩进。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> 首行缩进 </title>
<style type="text/css">
p{
font-size: 14px;
text-indent: 28px;
}
</style>
</head>
<body>
<p> 从今天起，做一个幸福的人，喂马，劈柴，周游世界；从今天起，关怀食粮和蔬菜，我有一所房子，面朝大海，春暖花开；从今天起，和每一个亲人通信，通知他们我的幸福。那幸福的闪电通知我的，我将通知每一个人；给每一条河每一座山取一个和煦的名字。陌生人，我也为你祝愿，愿你有一个璀璨的前程；愿你有情人终成眷属；愿你在尘世获的幸福；我也愿面朝大海，春暖花开。</p>
</body>
</html>text-align
应用 text-align 属性来管制文本在程度方向上的对齐形式。
text-align 属性值：
- left（左对齐）
- center（居中对齐）
- right（右对齐）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> 程度对齐 </title>
<style type="text/css">
.p1{text-align: center;}
.p2{text-align: right;}
.p3{text-align: left;}
</style>
</head>
<body>
<p class="p1"> 我爱学习 </p>
<p class="p2"> 我爱学习 </p>
<p class="p3"> 我爱学习 </p>
</body>
</html>text-decoration
应用 text-decoration 属性来定义文本的润饰成果（下划线、中划线、顶划线）。text-decoration 属性取值有 4 个，如下表。
| 属性值 | 阐明 |
|---|---|
| none | 去掉所有划线成果 |
| underline | 下划线 |
| line-through | 中划线 |
| overline | 顶划线 |
在 HTML 中，能够应用 s 元素实现中划线，用 u 元素实现下划线。然而有了 CSS 之后，都是应用 text-decoration 属性来实现。构造用 html 标签，外观个别都要用 CSS。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> 文本润饰 </title>
<style type="text/css">
.p1{text-decoration: underline;}
.p2{text-decoration: line-through;}
.p3{text-decoration: overline;}
</style>
</head>
<body>
<p class="p1"> 我爱学习 </p>
<p class="p2"> 我爱学习 </p>
<p class="p3"> 我爱学习 </p>
</body>
</html>line-height
能够应用 line-height 属性来管制一行文本的高度。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> 行高 </title>
<style type="text/css">
.p1{line-height: 15px;}
.p2{line-height: 30px;}
.p3{line-height: 50px;}
</style>
</head>
<body>
<p class="p1"> 我爱学习 </p><hr />
<p class="p2"> 我爱学习 </p><hr />
<p class="p3"> 我爱学习 </p>
</body>
</html>text-transform
能够应用 text-transform 属性来将文本进行大小写转换。text-transform 属性取值有 4 个，如下表。
| 属性值 | 阐明 |
|---|---|
| none | 无转换 |
| uppercase | 转换为大写 |
| lowercase | 转换为小写 |
| capitalize | 只将每个英文单词首字母大写 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> 大小写 </title>
<style type="text/css">
.p1{text-transform: uppercase;}
.p2{text-transform: lowercase;}
.p3{text-transform: capitalize;}
</style>
</head>
<body>
<p class="p1">Study hard and make progress every day</p>
<p class="p2">Study hard and make progress every day</p>
<p class="p3">Study hard and make progress every day</p>
</body>
</html>letter-spacing
能够应用 letter-spacing 属性来管制字与字之间的间隔。每一个中文汉字都被当作一个“字”，而每一个英文字母也被当作一个“字”。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> 字间距 </title>
<style type="text/css">
.p1{letter-spacing: 0px;}
.p2{letter-spacing: 5px;}
.p3{letter-spacing: 10px;}
</style>
</head>
<body>
<p class="p1">Study hard and make progress every day. 好好学习，天天向上 </p>
<p class="p2">Study hard and make progress every day. 好好学习，天天向上 </p>
<p class="p3">Study hard and make progress every day. 好好学习，天天向上 </p>
</body>
</html>word-spacing
应用 word-spacing 属性来定义两个单词之间的间隔。一般来说，word-spacing 只针对英文单词而言。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> 词间距 </title>
<style type="text/css">
.p1{word-spacing: 0px;}
.p2{word-spacing: 5px;}
.p3{word-spacing: 10px;}
</style>
</head>
<body>
<p class="p1">Study hard and make progress every day. 好好学习，天天向上 </p>
<p class="p2">Study hard and make progress every day. 好好学习，天天向上 </p>
<p class="p3">Study hard and make progress every day. 好好学习，天天向上 </p>
</body>
</html>
正文完
