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