CSS 文本样式是 CSS 中非常重要的部分，它不仅影响文本的外观，还决定了用户体验。本文将从基础到高级，全面介绍如何使用 CSS 来设置文本样式。

一、基础文本属性

 1. 字体族 (font-family)

 font-family 属性用于定义文本使用的字体。

p {
    font-family: Arial, sans-serif;
}

这里 Arial 是首选字体，如果用户的系统中没有安装 Arial，则会回退到 sans-serif。

2. 字体大小 (font-size)

font-size 定义了文本的大小。

h1 {
    font-size: 2em; /* 相对于父元素的字体大小 */
}

可以使用 px, %, em, rem 等单位来设置字体大小。

3. 字体粗细 (font-weight)

font-weight 控制字体的粗细。

strong {
    font-weight: bold;
}

值可以是 normal, bold, bolder, lighter 或具体的数字如 100, 200 等。

4. 字体风格 (font-style)

 font-style 用于设置字体是否为斜体。

em {
    font-style: italic;
}

通常用于强调文字。

5. 文字转换 (text-transform)

 text-transform 可以改变文本的大小写。

.uppercase {
    text-transform: uppercase;
}

可选值包括 uppercase, lowercase, 和 capitalize。

二、文本对齐与装饰

6. 文本对齐 (text-align)

 text-align 控制文本在容器中的水平对齐方式。

.center {
    text-align: center;
}

常见值有 left, right, center, justify。

7. 文本装饰 (text-decoration)

text-decoration 添加或移除文本装饰。

a {
    text-decoration: none;
}

常用值包括 none, underline, overline, line-through。

8. 行高 (line-height)

line-height 设置行之间的垂直间距。

p {
    line-height: 1.6;
}

有助于提高可读性。

三、高级文本效果

9. 阴影 (text-shadow)

text-shadow 为文本添加阴影效果。

h2 {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

参数依次表示水平偏移、垂直偏移、模糊半径和颜色。

10. 水平对齐 (text-indent) 

text-indent 将段落首行缩进。

p {
    text-indent: 50px;
}

适合新闻类文章。

11. 方向 (direction) 

direction 设置文本方向。

p {
    direction: rtl; /* 右到左 */
}

默认值为 ltr（左到右）。

四、其他文本相关属性

12. 文本溢出处理 (text-overflow)

当文本超出容器时，text-overflow 指定如何显示多余的内容。

div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

效果是在超出时显示省略号。

 13. 单词间距 (letter-spacing) 和字间距 (word-spacing)

这两个属性分别控制字母之间和单词之间的间距。

span {
    letter-spacing: 2px;
    word-spacing: 5px;
}