字体款式针对的是“文字自身”的形体成果，而文本款式针对的是“整个段落”的排版成果。字体款式重视个体，文本款式重视整体。常见的文本款式如下表。
| 属性 | 阐明 |
|---|---|
| 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>
发表回复