熟练使用 color、text-align、text-transform 等基础属性控制文本外观
掌握 text-decoration 系列属性，自定义下划线、删除线的颜色、样式和位置
学会使用 text-indent、line-height、letter-spacing 优化文本间距与可读性
理解 text-overflow 处理溢出文本的机制，实现优雅的省略号效果
掌握 text-justify 和 bdo 标签，处理特殊对齐需求和文本方向控制
CSS 文本格式化属性是网页排版的基石。它们不仅决定了文字的颜色和大小，更控制了文字的对齐方式、装饰效果、间距以及溢出行为。优秀的文本排版能显著提升内容的可读性和页面的视觉美感。
在 HTML 中，文本内容通常包裹在 <p>、<h1>-<h6>、<span> 等标签中，通过 CSS 我们可以对这些元素进行精细的样式控制。
color 属性用于设置文本的前景色。它支持多种颜色格式，包括颜色名称、十六进制值、RGB/RGBA 以及 HSL/HSLA。
语法：
color: 颜色名 | #十六进制 | rgb(r, g, b) | rgba(r, g, b, a);示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本颜色示例</title>
<style>
.green-text {
color: green; /* 颜色名称 */
font-size: 24px;
}
.hex-text {
color: #4CAF50; /* 十六进制 */
font-size: 24px;
}
.rgba-text {
color: rgba(76, 175, 80, 0.8); /* 带透明度 */
font-size: 24px;
}
</style>
</head>
<body>
<p class="green-text">这是绿色文字 (颜色名称)</p>
<p class="hex-text">这是绿色文字 (十六进制 #4CAF50)</p>
<p class="rgba-text">这是半透明绿色文字 (RGBA)</p>
</body>
</html>text-align 属性定义块级元素内文本的水平对齐方式。除了传统的 left、right、center，它还支持 justify（两端对齐）以及逻辑属性 start 和 end（根据书写方向自动调整）。
语法：
text-align: left | right | center | justify | start | end;示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本对齐示例</title>
<style>
.center-box {
background-color: #7fffd4; /* 碧绿色 */
text-align: center;
border: 2px solid #333;
padding: 10px;
margin-bottom: 10px;
}
.justify-box {
text-align: justify; /* 两端对齐 */
border: 2px solid #333;
padding: 10px;
width: 300px;
}
</style>
</head>
<body>
<div class="center-box">
这段文字在容器内居中对齐。
</div>
<div class="justify-box">
这段文字使用了两端对齐 (justify)。浏览器会自动调整单词间的空格，使文字的左右边缘都整齐对齐，常用于报纸或书籍排版。
</div>
</body>
</html>当使用 text-align: justify 时，段落最后一行通常默认左对齐。text-align-last 允许你单独控制这“最后一行”的对齐方式。
语法：
text-align-last: auto | left | right | center | justify;应用场景： 希望两端对齐的段落，其最后一行也居中或右对齐。
text-transform 属性控制文本的大小写转换。重要的是，这只改变显示效果，不会修改 HTML 源代码中的实际内容。
常用值：
uppercase：全部转为大写。
lowercase：全部转为小写。
capitalize：每个单词首字母大写。
示例代码：
.upper-style {
text-transform: uppercase; /* 显示为：WELCOME TO TECH COMMUNITY */
}
.cap-style {
text-transform: capitalize; /* 显示为：Welcome To Tech Community */
}CSS3 将文本装饰拆分为多个子属性，提供了比传统 text-decoration 更强大的控制力。
定义装饰线的位置：underline (下划线), overline (上划线), line-through (删除线)。
单独设置装饰线的颜色，可以与文字颜色不同。
定义线条的样式：solid (实线), dashed (虚线), dotted (点线), wavy (波浪线)。
综合示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>高级文本装饰</title>
<style>
.fancy-text {
font-size: 20px;
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
text-decoration-thickness: 2px; /* 可选：设置线宽 */
}
.delete-text {
text-decoration-line: line-through;
text-decoration-color: gray;
text-decoration-style: double;
}
</style>
</head>
<body>
<p class="fancy-text">这是一段带有红色波浪下划线的文字。</p>
<p class="delete-text">这是一段带有灰色双删除线的文字。</p>
</body>
</html>良好的间距是提升可读性的关键。
常用于中文段落，将第一行向右缩进。
p {
text-indent: 2em; /* 缩进两个字符宽度 */
}控制行与行之间的垂直距离。推荐设置为无单位数值（如 1.5），表示相对于字体大小的倍数。
p {
line-height: 1.6; /* 舒适的阅读行高 */
}letter-spacing：调整字符间的距离。
word-spacing：调整单词间的距离（对中文影响较小，主要用于英文）。
当文本内容超出容器宽度时，可以使用 text-overflow: ellipsis 显示省略号（...）。
注意： 必须同时设置 white-space: nowrap 和 overflow: hidden 才能生效。
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本溢出省略</title>
<style>
.ellipsis-box {
width: 200px;
white-space: nowrap; /* 强制不换行 */
overflow: hidden; /* 隐藏溢出 */
text-overflow: ellipsis; /* 显示省略号 */
border: 1px solid #333;
padding: 5px;
}
</style>
</head>
<body>
<div class="ellipsis-box">
这是一段非常长的文本，当它超出容器宽度时，会自动显示省略号，保持界面整洁。
</div>
</body>
</html>配合 text-align: justify 使用，指定两端对齐时的具体算法。
inter-word：仅调整单词间空格（推荐用于英文）。
inter-character：调整字符间间距（常用于东亚文字）。
HTML 的 <bdo> (Bi-Directional Override) 标签用于强制改变文本方向，不受语言环境默认设置影响。
dir="ltr"：从左到右。
dir="rtl"：从右到左。
示例：
<bdo dir="rtl">这段文字将从右向左显示，即使是在中文环境中。</bdo>最佳实践：
使用 line-height: 1.5 到 1.8 之间通常能获得最佳的阅读体验。
在处理长标题或卡片摘要时，text-overflow: ellipsis 是保持布局整洁的标准做法。
避免在正文中过度使用 text-decoration，以免干扰阅读；但在链接状态（hover）或价格折扣展示中非常有用。
如果要实现一个“原价被红色删除线划掉，现价用粗体绿色显示”的商品价格标签，你会组合使用哪些 CSS 属性？
text-overflow: ellipsis 为什么必须配合 white-space: nowrap 和 overflow: hidden 才能生效？如果去掉其中任何一个会发生什么？
在制作多语言网站时，text-align: start 和 text-align: left 有什么区别？为什么推荐使用 start？