CSS 文本

使用 CSS 设置文本样式

学习如何使用各种 CSS 属性控制网页中文本的外观。

文本格式化示例下方您将看到常见的文本样式示例。标题可能使用 text-align、text-transform 和 color 等属性。段落可以使用缩进、对齐、字母间距（letter-spacing）和行高（line-height）进行样式设置。我们还将看到如何移除链接的默认下划线。

文本颜色

color 属性设置元素文本内容的前景颜色。

在现代 CSS 中，颜色通常使用以下方式指定：

十六进制值：#ff0000（简写形式 #f00 也适用）
RGB / RGBA 值：rgb(255, 0, 0) 或 rgba(255, 0, 0, 0.8)（添加透明度）
HSL / HSLA 值：hsl(0, 100%, 50%) 或 hsla(0, 100%, 50%, 0.8)（色相、饱和度、亮度、Alpha 透明度）
预定义颜色名称：red、cornflowerblue 等。

提示：使用 RGBA 或 HSLA 可以实现半透明的文本颜色。HSL 对于调整颜色可能更直观。

在 body 选择器中为整个页面设置默认文本颜色是个好习惯。

/* 定义默认文本颜色 */
body {
  color: #333; /* 深灰色以便阅读 */
  background-color: #fff; /* 定义背景以便对比 */
}

/* 设置不同风格的标题 */
h1 {
  color: hsl(210, 80%, 45%); /* 漂亮的蓝色 */
}

.subsection-title {
  /* 使用 RGBA 示例实现略微褪色的效果 */
  color: rgba(0, 0, 0, 0.75);
}

无障碍性提示：务必确保文本颜色和背景颜色之间有足够的对比度以便阅读。浏览器开发者工具或在线对比度检查器等工具可以提供帮助。请参考 WCAG 指南。

文本对齐

text-align 属性控制块容器内联内容（如文本）的水平对齐方式。

常用值包括 left（左对齐）、right（右对齐）、center（居中）和 justify（两端对齐，就像报纸一样）。start 和 end 是较新的值，它们尊重文档的书写方向。

.page-title {
  text-align: center;
}

.meta-data {
  text-align: right;
}

.article-body {
  text-align: justify;
}

/* 基于书写方向的对齐（例如，默认为从左到右） */
.sidebar-title {
    text-align: start; /* 在 LTR（从左到右）中等同于 'left' */
}

文本装饰

text-decoration 属性为文本添加装饰线。它是 text-decoration-line、text-decoration-color、text-decoration-style 和 text-decoration-thickness 的简写形式。

一个非常常见的用途是移除锚点（<a>）标签的默认下划线：

a {
  text-decoration: none; /* 移除下划线 */
  color: blue; /* 确保链接仍然视觉上可识别 */
}

/* 鼠标悬停时添加下划线以提高可点击性提示 */
a:hover {
  text-decoration: underline;
}

您还可以添加其他装饰：

.section-header {
  text-decoration: underline wavy red; /* 下划线，波浪线样式，红色 */
}

.deleted-text {
  text-decoration: line-through;
}

.important-note {
  /* 使用单独的属性 */
  text-decoration-line: underline;
  text-decoration-style: double;
  text-decoration-color: green;
  text-decoration-thickness: 2px;
}

可用性提示：避免给不是链接的文本添加下划线，因为用户通常会将下划线与可点击元素关联起来。

文本转换

text-transform 属性控制文本的大小写。

值包括 uppercase（全部大写）、lowercase（全部小写）和 capitalize（每个单词的首字母大写）。none 是默认值。

.button-label {
  text-transform: uppercase;
  letter-spacing: 0.5px; /* 常用于样式组合 */
}

.note {
  text-transform: lowercase;
}

.proper-noun-example {
  /* 注意：capitalize 会影响每个单词的首字母 */
  text-transform: capitalize;
}

文本缩进

text-indent 属性指定块容器内文本第一行的缩进。

它接受长度值（例如 px、em、rem）或百分比。

article > p {
  /* 缩进 article 元素内每个段落的第一行 */
  text-indent: 2em;
}

.quote {
    /* 负值缩进可以创建悬挂缩进效果 */
    text-indent: -1.5em;
    padding-left: 1.5em; /* 添加内边距进行补偿 */
}

其他有用的文本属性

letter-spacing：调整字符之间的间距。

line-height：设置行框的高度。常用于控制文本行之间的间距（行距）。建议使用无单位的值（例如 1.6）以提高可伸缩性。

word-spacing：调整单词之间的间距。

white-space：控制元素内部空白符的处理方式（例如，nowrap 防止文本换行）。

text-shadow：为文本添加阴影效果。示例：text-shadow: 2px 2px 5px rgba(0,0,0,0.3);

vertical-align：指定内联、内联块或表格单元格元素的垂直对齐方式。对于在文本中对齐图片或在表格单元格中对齐元素很有用。

direction & unicode-bidi：用于处理文本方向性（例如，从右到左的语言）。

/* 组合使用多个属性的示例 */
.emphasized-block {
    line-height: 1.7;
    letter-spacing: 0.2px;
    word-spacing: 1px;
    text-shadow: 1px 1px 1px #ccc;
}

核心 CSS 文本属性参考

属性	描述
`color`	设置文本内容的颜色。
`direction`	指定文本方向（例如 `ltr`、`rtl`）。
`letter-spacing`	调整字符之间的间距。
`line-height`	设置文本行之间的距离。
`text-align`	指定文本的水平对齐方式。
`text-decoration`	为文本添加装饰线（下划线、上划线、删除线）。
`text-indent`	指定第一行的缩进。
`text-shadow`	为文本应用阴影效果。
`text-transform`	控制文本的大小写。
`unicode-bidi`	与 `direction` 一起用于双向文本。
`vertical-align`	设置内联级别元素的垂直对齐方式。
`white-space`	控制空白符和换行的处理方式。
`word-spacing`	调整单词之间的间距。

有关每个属性及其值的详细信息，请查阅 MDN Web 文档。