CSS文本样式详解：color、text-align、text-decoration、text-transform、letter-spacing属性

/* 关键字 */
color: red;

/* 十六进制 */
color: #ff0000;
color: #f00;        /* 简写 */
color: #ff0000ff;   /* 8位（含透明度） */

/* RGB */
color: rgb(255, 0, 0);
color: rgb(255 0 0);       /* 现代语法 */
color: rgba(255, 0, 0, 0.5);

/* HSL */
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5);

/* currentColor - 继承当前元素的color值 */
border: 1px solid currentColor;

text-align: left;       /* 左对齐 */
text-align: center;     /* 居中对齐 */
text-align: right;      /* 右对齐 */
text-align: justify;    /* 两端对齐 */
text-align: start;      /* 行首对齐（跟随direction） */
text-align: end;        /* 行尾对齐 */

text-decoration-style: solid;    /* 实线 */
text-decoration-style: double;   /* 双线 */
text-decoration-style: dotted;   /* 点线 */
text-decoration-style: dashed;   /* 虚线 */
text-decoration-style: wavy;     /* 波浪线 */

/* 完整简写：线型 颜色 样式 */
text-decoration: underline wavy red;

/* 分别精细控制 */
text-decoration-color: red;      /* 装饰线颜色 */
text-decoration-thickness: 2px;  /* 装饰线粗细 */
text-underline-offset: 5px;      /* 下划线偏移 */

text-transform: uppercase;   /* 全部大写：hello → HELLO */
text-transform: lowercase;   /* 全部小写：HELLO → hello */
text-transform: capitalize;  /* 首字母大写：hello world → Hello World */
text-transform: none;        /* 不转换（默认） */

letter-spacing: normal;   /* 默认间距 */
letter-spacing: 2px;      /* 增加间距 */
letter-spacing: -0.5px;   /* 减小间距 */
letter-spacing: 0.1em;    /* 相对单位 */

/* 首行缩进 */
text-indent: 2em;

/* 词间距 */
word-spacing: 5px;

/* 行高 */
line-height: 1.6;
line-height: 24px;

/* 空白处理 */
white-space: nowrap;    /* 不换行 */
white-space: pre;       /* 保留空白和换行 */
white-space: pre-wrap;  /* 保留空白，自动换行 */

/* 文本溢出 */
text-overflow: clip;     /* 裁剪 */
text-overflow: ellipsis; /* 省略号 */

.ellipsis {
    white-space: nowrap;      /* 不换行 */
    overflow: hidden;         /* 隐藏溢出 */
    text-overflow: ellipsis;  /* 显示省略号 */
}

.line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;         /* 最多显示3行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ❌ 不推荐：使用过小的行高 */
p { line-height: 1.0; }

/* ❌ 不推荐：纯靠颜色区分链接 */
a { color: blue; text-decoration: none; }

/* ✅ 推荐：合适的行高 */
p { line-height: 1.8; }

/* ✅ 推荐：链接有明确的视觉区分 */
a {
    color: #3498db;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s;
}
a:hover {
    border-bottom-color: #3498db;
}

/* ✅ 推荐：单行省略完整写法 */
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}