CSS 文本属性

CSS 文本属性决定了文字的色彩、对齐方式、装饰效果及大小写格式。

通过合理运用这些属性，开发者能够大幅提升网页的可读性与视觉层次感。

本章将重点解析 color、text-align、text-decoration 和 text-transform 这四个最常用的文本属性。

1. 颜色属性：color

color 属性用于设置 HTML 元素的文本内容颜色。它是最直观的视觉属性，直接影响页面的品牌调性和可读性。

• 语法：可以使用关键字（如 red）、十六进制（如 #ff0000）、RGB/RGBA（如 rgb(255, 0, 0)）或 HSL/HSLA。
• 最佳实践：为了保证可访问性（Accessibility），请确保文字颜色与背景颜色之间有足够的对比度。

/* 使用十六进制 */
p { color: #333333; }
/* 使用 RGBA 设置带透明度的颜色 */
h1 { color: rgba(0, 0, 0, 0.8); }

2. 对齐属性：text-align

text-align 属性决定了块级元素内部行内内容（如文字、图片）的水平对齐方式。

• left：左对齐（默认值）。
• right：右对齐。
• center：居中对齐。
• justify：两端对齐，通过调整单词间距使每行长度相等。

.container {
    text-align: center; /* 使段落中的文字居中 */
}

3. 装饰属性：text-decoration

text-decoration 是一个复合属性，用于设置文本的修饰线。它常用于处理链接的下划线或标记文本状态。

• 属性值：
• 简写形式：可以同时定义颜色、样式和粗细（如 text-decoration: underline red wavy;）。

a {
    text-decoration: none; /* 移除默认下划线 */
}

.price-old {
    text-decoration: line-through; /* 显示折扣前的删除价 */
}

4. 大小写转换：text-transform

text-transform 属性用于控制元素中字母的大小写，无需更改 HTML 源码即可改变显示效果。

• uppercase：将所有字母转为大写。
• lowercase：将所有字母转为小写。
• capitalize：将每个单词的首字母转为大写。
• none：不进行任何转换。

.title-upper {
    text-transform: uppercase; /* 将标题变为全大写 */
}

5. 核心要点总结与对比

5.1 常见问题与注意事项

1. text-align 只能作用于行内元素吗？ 不，它作用于块级元素，通过影响其内部的行内级内容（Inline content）来实现对齐。它不能使块级元素本身居中（块级元素居中应使用 margin: 0 auto）。
2. 为什么链接的下划线去不掉？ 如果使用了 text-decoration: none 仍然有下划线，请检查是否有 border-bottom 模拟的下划线，或使用了 text-decoration-line 覆盖。
3. text-transform 会影响 SEO 吗？ 不会。搜索引擎会抓取原始 HTML 内容，text-transform 仅改变视觉呈现，不改变文档意义。
4. 如何为长段落设置两端对齐？ 使用 text-align: justify，但需注意在短句末尾可能导致单词间距过大，建议配合 hyphens 属性使用以优化排版。