CSS Text（文本）

CSS 提供一系列文本样式属性，用于控制文字的颜色、对齐方式、行高、字间距、缩进和装饰等，让段落和标题更易读、更美观。

常用文本属性一览

属性	作用
color	文字颜色
text-align	水平对齐
text-indent	首行缩进
line-height	行高
letter-spacing	字间距
word-spacing	词间距（英文）
text-decoration	下划线、删除线等
text-transform	大小写转换
white-space	空白与换行处理
text-shadow	文字阴影

---

1. color（文字颜色）

设置文字颜色，写法与背景色相同。

p {
  color: #333;
}

.title {
  color: rgb(50, 50, 50);
}

.link {
  color: blue;
}

---

2. text-align（水平对齐）

设置块级元素内文本的水平对齐方式。

p {
  text-align: left;    /* 左对齐（默认） */
}

.center {
  text-align: center;  /* 居中 */
}

.right {
  text-align: right;   /* 右对齐 */
}

.justify {
  text-align: justify; /* 两端对齐，段落常用 */
}

只对块级元素（如 div、p、h1）有效；对内联元素设置通常要在其父级块上设置。

---

3. text-indent（首行缩进）

指定第一行的缩进距离，常用于段落。

p {
  text-indent: 2em;   /* 缩进 2 个字符宽度 */
}

.article p {
  text-indent: 24px;
}

• 可用 px、em（相对当前字号）等。
• 负值会产生「悬挂」效果（第一行往左突出）。

---

4. line-height（行高）

控制每行文字所占的垂直空间，影响可读性。

p {
  line-height: 1.6;   /* 无单位：相对当前字号的比例，常用 */
}

.article {
  line-height: 28px;   /* 固定行高 */
}

• 无单位数字（如 1.5、1.6）：推荐，随字号自动缩放。
• 带单位（如 24px、1.5em）：固定或相对当前字号的数值。

---

5. letter-spacing（字间距）

增加或减少字符之间的间距。

h1 {
  letter-spacing: 2px;   /* 字距加大 */
}

.cramped {
  letter-spacing: -1px;  /* 字距缩小 */
}

---

6. word-spacing（词间距）

只对「单词」之间的空格有效，对中文影响不大，多用于英文排版。

.en {
  word-spacing: 0.2em;
}

---

7. text-decoration（装饰线）

为文字添加下划线、删除线、上划线等。

a {
  text-decoration: none;     /* 去掉链接默认下划线 */
}

.underline {
  text-decoration: underline;
}

.line-through {
  text-decoration: line-through;  /* 删除线 */
}

.overline {
  text-decoration: overline;      /* 上划线 */
}

还可配合 text-decoration-color、text-decoration-style 等做更细控制。

---

8. text-transform（大小写）

改变英文大小写显示（不改变原文内容）。

.upper {
  text-transform: uppercase;   /* 全大写 */
}

.lower {
  text-transform: lowercase;   /* 全小写 */
}

.capitalize {
  text-transform: capitalize;  /* 每个单词首字母大写 */
}

---

9. white-space（空白与换行）

控制空格、换行是否保留，以及是否自动换行。

.pre {
  white-space: pre;       /* 保留空格和换行，不自动换行 */
}

.nowrap {
  white-space: nowrap;    /* 不换行，一行显示 */
}

.pre-wrap {
  white-space: pre-wrap;  /* 保留空格和换行，但会自动换行 */
}

---

10. text-shadow（文字阴影）

为文字添加阴影，增强层次感。

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

语法：text-shadow: 水平偏移 垂直偏移 模糊半径 颜色;
可写多个阴影，用逗号分隔。

---

小结

• 颜色：color；对齐：text-align；首行缩进：text-indent。
• 行高：line-height（建议用无单位数值）；字间距：letter-spacing。
• 装饰：text-decoration；大小写：text-transform；空白：white-space；阴影：text-shadow。

下一节学习 CSS Fonts（字体）：字体族、字号、粗细等。