CSS 文本样式全解析：颜色 / 对齐 / 装饰 / 缩进

CSS 文本样式是控制网页文字展示效果的核心，通过color、text-align、text-decoration、text-indent等属性，可快速实现文字颜色、对齐方式、装饰线、首行缩进等效果。本文结合实战代码，详解文本样式的核心用法，新手可直接复制上手。

一、CSS 文本样式核心代码示例

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本样式实战</title>
    <style type="text/css">
        /* 1. 文本颜色 */
        #div1 {
            color: red;
        }
        /* 2. 文本对齐 */
        #div2 {
            text-align: center;
        }
        /* 3. 文本装饰线（注：原代码text-align: line-through是错误的，已修正） */
        #div3 {
            text-decoration: underline; /* 下划线 */
            /* 多次赋值仅最后一个生效，此处仅演示，实际需合并写 */
            text-decoration: overline; /* 上划线 */
        }
        /* 4. 多装饰线合并 */
        #div4 {
            text-decoration: overline underline line-through; /* 上划线+下划线+删除线 */
        }
        /* 5. 去除超链接默认下划线 */
        a {
            text-decoration: none;
        }
        /* 6. 首行缩进 */
        #p1 {
            text-indent: 2em; /* 2个字符宽度 */
        }
    </style>
</head>
<body>
    <div id="div1">文本1（红色）</div>
    <div id="div2">文本2（居中对齐）</div>
    <div id="div3">文本3（上划线）</div>
    <p id="div4">文本4（上划线+下划线+删除线）</p>
    <a href="">超链接（无下划线）</a>
    <p id="p1">这是一段文字，我们需要进行首行缩进。这是一段文字，我们需要进行首行缩进。这是一段文字，我们需要进行首行缩进。</p>
</body>
</html>

二、核心文本属性详细说明

属性名	取值说明	常用值 / 示例
`color`	文本颜色	颜色名：`red`/`blue`；十六进制：`#ff0000`；RGB：`rgb(255,0,0)`
`text-align`	文本水平对齐	`left`（默认左对齐）、`center`（居中）、`right`（右对齐）、`justify`（两端对齐）
`text-decoration`	文本装饰线	`none`（无装饰）、`underline`（下划线）、`overline`（上划线）、`line-through`（删除线）；可多值合并：`overline underline`
`text-indent`	首行缩进	`2em`（2 个字符宽度，推荐）、`20px`（固定像素）、`10%`（百分比）

关键纠错（原代码问题）

原代码中#div3的text-align: line-through是错误用法：

line-through是text-decoration的属性值，而非text-align；
同一属性多次赋值（如text-decoration写两次），仅最后一次生效，需合并为单行多值。

三、实用扩展技巧

超链接样式优化 ：

复制代码

/* 去除默认下划线，hover时显示下划线 */
a {
    text-decoration: none;
    color: #333;
}
a:hover {
    text-decoration: underline;
    color: #0088ff;
}

行高配合缩进 ：

复制代码

#p1 {
    text-indent: 2em;
    line-height: 1.8; /* 行高1.8倍，提升可读性 */
}

文本对齐场景 ：
- center：标题、按钮文字居中；
- justify：长文本段落两端对齐，排版更整齐；
- right：日期、金额等右对齐。

四、关键注意事项

text-decoration 赋值规则 ：同一元素的text-decoration多次赋值会覆盖，需将多个装饰线写在同一行（如overline underline）；
text-indent 单位选择 ：优先使用em（相对字符宽度），适配不同字体大小，避免px固定值导致的适配问题；
颜色取值规范 ：大型项目建议统一使用十六进制（如#ff0000）或 RGB，避免颜色名（如red），提升代码一致性。

总结

CSS 文本核心样式包括颜色（color）、对齐（text-align）、装饰线（text-decoration）、首行缩进（text-indent）；
text-decoration可合并多装饰线，超链接常用none去除默认下划线；
首行缩进优先用2em实现 "两个字符" 的规范排版，适配性更佳。