接上文。
除了字体样式，在网页设计中，文本样式也是重要的组成部分。设置文本样式就是将文本进行合理的排版。接下来，我们来学习文本样式。
|--------------------------------------------------------------------------------|----------------------------------------------------------------------------|
| 和Word文档类似，我们可以通过CSS中的文本属性来设置文本的对齐方式、缩进等等。 在这里，我们将重点学习文本水平对齐、文本缩进、文本修饰、行高这四个属性。 | 
|
文本样式
|--------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 同时设置了文本样式的四个属性：文本水平对齐、文本缩进 、文本修饰和行高。 |
| <style> /* css设置文本样式 */ p { text-align: center; text-indent: 32px; text-decoration: underline; line-height: 32px; } </style> <p>夜曲编程</p> <p>网页开发</p> |
| 
|
文本对齐
|-------------------------------------------------------------------------------------------|
| text-align 属性，用于设置文本的水平对齐方式。 第4行，设置水平对齐方式为center，它表示文本居中对齐。常见的还有右对齐right，和默认的对齐方式左对齐left。 |
| <style> /* css设置文本的水平对齐方式 */ p { text-align: center; } </style> <p>夜曲编程</p> |
| 
|
文本缩进
|--------------------------------------------------------------------------------------------------------------|
| text-indent属性，用于指定文本的首行缩进，通常是将段落元素p的首行缩进。 第4行，设置文本缩进的长度为32px，即32++像素++ 。 当涉及到和长度有关的属性值时，我们推荐使用像素px这种长度单位来表示。 |
| <style> /* css设置文本缩进 */ p { text-indent: 32px; } </style> <p>夜曲编程</p> |
| 
|
文本修饰
|--------------------------------------------------------------------------------------------------------------------------------------------------------|
| text-decoration属性，用于为文本添加修饰。 第4行，设置属性值为underline，表示给文本添加下划线。 常见的还有上划线overline，和删除线line-through。 最常用的做法就是，设置text-decoration : none ; ，来清除<a>标签的默认下划线。 |
| <style> /* css设置文本修饰 */ p { text-decoration: underline; } </style> <p>给文本添加下划线</p> |
| 
|
行高
|-----------------------------------------------------------------------------------------------------------------------------------------------------|
| line-height属性，用于设置文本的行高。 第4行，设置行高为32px，表示行高固定为32像素。 当涉及到和长度有关的属性值时，我们推荐使用像素px这种长度单位来表示。 |
| <style> /* 类选择器设置文本行高 */ .big { line-height: 32px; } </style> <p>这是默认的标准行高<br>这是默认的标准行高</p> <p class="big">这是较大的行高<br>这是较大的行高</p> |
| 
|
Ps：
删除下划线
|--------------------------------------------------------------------------------------------------------------------------------|
| 前面，我们提到文本修饰属性text-decoration还有一种最常用的用法：清除<a>标签的默认下划线。第4行，设置属性text-decoration: none;，清除了链接默认的下划线。 |
| <style> /* css通过文本修饰属性删除链接的下划线 */ a { text-decoration: none; } </style> <a href="https://np.baicizhan.com/">夜曲编程</a> |
| 
|
单独数字设置行高
|--------------------------------------------------------------------------------------------------------------------|
| 类似于32px的这种方式，是采用数字和长度单位的方式来表示行高。 其实，行高还可以是单独的数字，数字表示字体大小的倍数。 比如p元素的字体大小为16px，则设置line-height: 3，表示行高为字体大小的3倍，为48px。 |
| 
|
总结：
学习完了CSS设置网页的各种样式。
之后要学习两种复合CSS选择器，以及在网页分组中的2个重要元素：div和span。