CSS文本颜色[编辑 | 编辑源代码]

CSS文本颜色是控制网页中文字颜色的基础属性，通过修改颜色值可以改变文本的视觉表现。它是网页设计中建立视觉层次、传递品牌风格或提升可读性的关键工具。

基本语法[编辑 | 编辑源代码]

文本颜色通过color属性设置，语法结构如下：

selector {
    color: value;
}

其中value可以是以下任意一种颜色表示方式：

CSS预定义了140+种颜色名称（如red, cornflowerblue）

p {
    color: darkcyan;
}

6位或3位简写的十六进制码（带#前缀）

h1 {
    color: #336699;  /* 完全形式 */
}
h2 {
    color: #369;     /* 简写形式 */
}

红绿蓝三通道数值（0-255）及透明度（0-1）

li {
    color: rgb(210, 105, 30);       /* 传统RGB */
    color: rgba(210, 105, 30, 0.8); /* 带透明度 */
}

色相（0-360）、饱和度（0-100%）、明度（0-100%）表示法

blockquote {
    color: hsl(39, 100%, 50%);      /* 纯橙色 */
    color: hsla(39, 100%, 50%, 0.6); /* 半透明 */
}

继承规则说明：

通过修改根元素颜色实现主题切换：

:root {
    --text-color: #333;
}
body.dark-mode {
    --text-color: #e0e0e0;
}
p {
    color: var(--text-color);
}

确保文本与背景的对比度符合WCAG标准： $对比度 = \frac{L 1 + 0.05}{L 2 + 0.05}$ 其中L1和L2分别是较亮和较暗颜色的相对亮度

使用currentColor建立动态关联：

div {
    color: blue;
    border: 2px solid currentColor; /* 边框自动匹配文字颜色 */
}

使用操作系统主题颜色（谨慎使用）：

.error {
    color: CanvasText;  /* 跟随系统文本色 */
    background-color: Canvas;
}

1. 优先使用高对比度组合（至少4.5:1常规文本） 2. 避免纯黑（#000）在白色背景上，建议使用#333 3. 在CSS变量中集中管理颜色方案 4. 使用工具（如Chrome DevTools）检查对比度 5. 考虑色盲用户的视觉体验

尝试创建以下效果：