字体样式针对的是“文字本身”的形体效果，而文本样式针对的是“整个段落”的排版效果。字体样式注重个体，文本样式注重整体。常见的文本样式如下表。
属性 | 说明 |
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-indent值应该是font-size值的2倍。
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">I'm really handsomep>
<p class="p2">I'm really handsomep>
<p class="p3">I'm really handsomep>
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">I'm really handsome. 我真的帅p>
<p class="p2">I'm really handsome. 我真的帅p>
<p class="p3">I'm really handsome. 我真的帅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">I'm really handsome. 我真的帅p>
<p class="p2">I'm really handsome. 我真的帅p>
<p class="p3">I'm really handsome. 我真的帅p>
body>
html>
———————————————————————————————本节主要学习了文本样式 ，最后总结一下。
- text-indent首行缩进
- text-align水平对齐
- text-decoration文本修饰
- line-height行高
- text-transform大小写
- letter-spacing字间距
- word-spacing词间距
