CSS文本样式用于控制文本的颜色、大小、字体、行高、对齐方式、文本装饰等属性。在网页设计中，合适的文本样式可以使文本更加美观、易读，提高网站的用户体验。本文将介绍一些常用的文本样式以及其使用方法。
颜色
在CSS中，可以使用color属性设置文本颜色。color属性可以接受多种颜色值，包括具体颜色名称、十六进制RGB值、RGB值、HSL值等。以下是一些常用的颜色值示例：
<p style="color: red;">这是红色文本</p><p style="color: #00FF00;">这是绿色文本</p><p style="color: rgb(0, 0, 255);">这是蓝色文本</p><p style="color: hsl(120, 100%, 50%);">这是绿色文本</p>
字体大小
在CSS中，可以使用font-size属性设置文本的字体大小。font-size属性可以接受多种单位，包括px、em、rem等。以下是一些常用的字体大小示例：
<p style="font-size: 12px;">这是12像素字体大小的文本</p><p style="font-size: 1.5em;">这是1.5倍字体大小的文本</p><p style="font-size: 2rem;">这是2倍根元素字体大小的文本</p>
字体类型
在CSS中，可以使用font-family属性设置文本的字体类型。font-family属性可以接受多个字体名称，如果第一个字体不存在，则会使用后续字体。以下是一些常用的字体类型示例：
<p style="font-family: 'Helvetica Neue', Arial, sans-serif;">这是Helvetica Neue字体的文本</p><p style="font-family: Georgia, 'Times New Roman', serif;">这是Georgia字体的文本</p>
字体样式
在CSS中，可以使用font-style属性设置文本的字体样式。font-style属性可以接受normal、italic、oblique等值。以下是一些常用的字体样式示例：
<p style="font-style: normal;">这是正常字体样式的文本</p><p style="font-style: italic;">这是斜体字体样式的文本</p><p style="font-style: oblique;">这是倾斜字体样式的文本</p>
字体粗细
在CSS中，可以使用font-weight属性设置文本的字体粗细。font-weight属性可以接受多个值，包括normal、bold、bolder、lighter等。以下是一些常用的字体粗细示例：
<p style="font-weight: normal;">这是正常字体粗细的文本</p><p style="font-weight: bold;">这是粗体字体粗细的文本</p><p style="font-weight: 700;">这是700粗体字体粗细的文本</p>
文本对齐
在CSS中，可以使用text-align属性设置文本的对齐方式。text-align属性可以接受多个值，包括left、right、center、justify等。以下是一些常用的文本对齐示例：
<p style="text-align: left;">这是左对齐的文本</p> <p style="text-align: right;">这是右对齐的文本</p> <p style="text-align: center;">这是居中对齐的文本</p> <p style="text-align: justify;">这是两端对齐的文本，会自动调整单词间距以使每一行文本长度相等</p>
文本装饰
在CSS中，可以使用text-decoration属性设置文本的装饰方式。text-decoration属性可以接受多个值，包括none、underline、overline、line-through等。以下是一些常用的文本装饰示例：
<html> <head></head> <body> <p style="text-decoration: none;">这是无装饰的文本</p> <p style="text-decoration: underline;">这是下划线的文本</p> <p style="text-decoration: overline;">这是上划线的文本</p> <p style="text-decoration: line-through;">这是删除线的文本</p> </body> </html>
行高
在CSS中，可以使用line-height属性设置文本的行高。line-height属性可以接受多个单位，包括px、em、%等。以下是一些常用的行高示例：
<p style="line-height: 20px;">这是行高为20像素的文本</p><p style="line-height: 1.5em;">这是行高为1.5倍字体大小的文本</p><p style="line-height: 150%;">这是行高为150%的文本</p>
文本阴影
在CSS中，可以使用text-shadow属性为文本添加阴影效果。text-shadow属性可以接受多个值，包括水平偏移量、垂直偏移量、模糊半径、颜色等。以下是一个添加阴影效果的文本示例：
<p style="text-shadow: 1px 1px 2px #000000;">这是带阴影效果的文本</p>
文本换行
在CSS中，可以使用white-space属性设置文本的换行方式。white-space属性可以接受多个值，包括normal、nowrap、pre、pre-wrap等。以下是一些常用的文本换行示例：
<html> <head></head> <body> <p style="white-space: normal;">这是正常换行的文本</p> <p style="white-space: nowrap;">这是不换行的文本</p> <p style="white-space: pre;">这是按照pre标签的换行方式显示的文本</p> <p style="white-space: pre-wrap;">这是按照pre标签的换行方式显示，并且允许在换行处自动换行的文本</p> </body> </html>
文本溢出
在CSS中，可以使用text-overflow属性设置文本的溢出方式。text-overflow属性可以接受多个值，包括clip、ellipsis等。以下是一个文本溢出的示例：
<div style="width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"> 这是一个超长的文本，当它超出了容器的宽度时，会使用省略号来表示溢出部分。</div>
字符间距
在CSS中，可以使用letter-spacing属性设置字符间距。letter-spacing属性可以接受多个单位，包括px、em、%等。以下是一些常用的字符间距示例：
<html> <head></head> <body> <p style="letter-spacing: 2px;">这是字符间距为2像素的文本</p> <p style="letter-spacing: 0.5em;">这是字符间距为0.5倍字体大小的文本</p> <p style="letter-spacing: 50%;">这是字符间距为50%的文本</p> </body> </html>
单词间距
在CSS中，可以使用word-spacing属性设置单词间距。word-spacing属性可以接受多个单位，包括px、em、%等。以下是一些常用的单词间距示例：
<html> <head></head> <body> <p style="word-spacing: 2px;">这是单词间距为2像素的文本</p> <p style="word-spacing: 0.5em;">这是单词间距为0.5倍字体大小的文本</p> <p style="word-spacing: 50%;">这是单词间距为50%的文本</p> </body> </html>
文本方向
在CSS中，可以使用direction属性设置文本的方向。direction属性可以接受多个值，包括ltr、rtl等。以下是一个设置文本方向的示例：
<p style="direction: rtl;">这是从右向左的文本</p>
垂直对齐
在CSS中，可以使用vertical-align属性设置文本的垂直对齐方式。vertical-align属性可以接受多个单位，包括top、middle、bottom等。以下是一些常用的垂直对齐示例：
<html> <head></head> <body> <div style="height: 200px; display: inline-block; vertical-align: top;"> 这是垂直对齐到顶部的文本 </div> <div style="height: 200px; display: inline-block; vertical-align: middle;"> 这是垂直居中对齐的文本 </div> <div style="height: 200px; display: inline-block; vertical-align: bottom;"> 这是垂直对齐到底部的文本 </div> </body> </html>