在 CSS 中，文本样式的设置非常重要，它决定了文本的显示效果，包括字体、颜色、大小、间距、对齐等。以下是常用的 CSS 文本相关属性及其解释。

1️⃣ 字体相关属性

  • font-family：设置字体类型。可以指定多个字体，浏览器会按照优先级选择可用的字体。 p { font-family: Arial, Helvetica, sans-serif; }
  • font-size：设置字体大小。可以使用像素（px）、百分比（%）等单位。 p { font-size: 16px; }
  • font-weight：设置字体粗细。常用值有 normal、bold、lighter 或数值（100 到 900）。 p { font-weight: bold; }
  • font-style：设置字体样式。常用值有 normal（常规），italic（斜体），oblique（倾斜体）。 p { font-style: italic; }
  • font-variant：设置字体的变体，例如小型大写字母。 p { font-variant: small-caps; }
  • line-height：设置行高，影响文本行之间的间距。 p { line-height: 1.5; }
  • letter-spacing：设置字符之间的间距。 p { letter-spacing: 2px; }
  • word-spacing：设置单词之间的间距。 p { word-spacing: 5px; }

2️⃣ 文本对齐与方向

  • text-align：设置文本对齐方式。常用值有 left、right、center 和 justify。 p { text-align: center; }
  • text-decoration：设置文本的装饰。常用值有 none、underline（下划线）、overline（上划线）、line-through（删除线）。 p { text-decoration: underline; }
  • text-transform：设置文本的大小写转换。常用值有 uppercase、lowercase、capitalize。 p { text-transform: uppercase; }
  • direction：设置文本的书写方向，常用值有 ltr（从左到右）和 rtl（从右到左）。 p { direction: rtl; }

3️⃣ 文本颜色

  • color：设置文本的颜色。 p { color: red; }

4️⃣ 文本阴影

  • text-shadow：设置文本的阴影。可以通过 x-offset, y-offset, blur-radius 和 color 来定义阴影的效果。 p { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }

5️⃣ 文本缩进与换行

  • text-indent：设置文本的首行缩进。 p { text-indent: 20px; }
  • white-space：控制元素内文本如何处理空格和换行。
    • normal：合并空格，文本换行。
    • nowrap：不换行，文本会在一行内显示。
    • pre：保留空格和换行，文本将按原样显示。
    • pre-wrap：保留空格和换行，且文本换行。
    • pre-line：合并空格，但保留换行。
    p { white-space: nowrap; }

6️⃣ 文本溢出与截断

  • text-overflow：当文本内容溢出元素框时，定义如何显示溢出的内容。常用值有 clip（默认，不显示溢出的内容）和 ellipsis（用省略号表示溢出的内容）。 p { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

7️⃣ 文本缩放与动态效果

  • transform：用于控制文本的旋转、缩放、平移等效果。 p { transform: rotate(45deg); /* 旋转文本 */ }

8️⃣ 文本列表样式

  • list-style-type：设置无序列表的项标记（例如，圆点、数字等）。 ul { list-style-type: square; /* 设置方形列表标记 */ }
  • list-style-position：设置列表项标记的位置。常用值有 inside（标记放在文本内）和 outside（标记放在文本外）。 ul { list-style-position: inside; }

9️⃣ 高级文本样式

  • writing-mode：设置文本的书写模式。可以设置为垂直或横向书写。 p { writing-mode: vertical-rl; /* 垂直从右到左 */ }
  • text-combine-upright：使文本垂直显示，主要用于亚洲字符的文本排版。 p { text-combine-upright: all; }

总结

CSS 提供了多种方式来控制文本的外观和布局。通过使用字体、颜色、对齐、装饰、缩进等属性，开发者能够精确地调整网页文本的显示效果。此外，还可以通过高级功能如文本阴影、动态效果、文本溢出控制等来进一步提升文本的表现力。掌握这些文本相关的 CSS 属性，将有助于你设计出更加美观且具有可读性的网页。