编辑“︁CSS文本颜色”︁（章节）

= CSS文本颜色 =

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

== 基本语法 ==
文本颜色通过<code>color</code>属性设置，语法结构如下：

<syntaxhighlight lang="css">
selector {
    color: value;
}
</syntaxhighlight>

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

=== 颜色表示方法 ===
==== 1. 颜色关键词 ====
CSS预定义了140+种颜色名称（如<code>red</code>, <code>cornflowerblue</code>）

<syntaxhighlight lang="css">
p {
    color: darkcyan;
}
</syntaxhighlight>

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

<syntaxhighlight lang="css">
h1 {
    color: #336699;  /* 完全形式 */
}
h2 {
    color: #369;     /* 简写形式 */
}
</syntaxhighlight>

==== 3. RGB/RGBA值 ====
红绿蓝三通道数值（0-255）及透明度（0-1）

<syntaxhighlight lang="css">
li {
    color: rgb(210, 105, 30);       /* 传统RGB */
    color: rgba(210, 105, 30, 0.8); /* 带透明度 */
}
</syntaxhighlight>

==== 4. HSL/HSLA值 ====
色相（0-360）、饱和度（0-100%）、明度（0-100%）表示法

<syntaxhighlight lang="css">
blockquote {
    color: hsl(39, 100%, 50%);      /* 纯橙色 */
    color: hsla(39, 100%, 50%, 0.6); /* 半透明 */
}
</syntaxhighlight>

== 颜色继承机制 ==
<mermaid>
graph TD
    A[body元素] -->|设置color| B[所有子元素]
    B --> C[未单独设置的段落]
    B --> D[设置了color的div]
    D --> E[div内的文本]
</mermaid>

继承规则说明：
* 文本颜色默认会从父元素继承
* 显式设置<code>color</code>会中断继承链
* 某些表单元素（如input）可能不继承颜色

== 实际应用案例 ==
=== 情景1：夜间模式切换 ===
通过修改根元素颜色实现主题切换：

<syntaxhighlight lang="css">
:root {
    --text-color: #333;
}
body.dark-mode {
    --text-color: #e0e0e0;
}
p {
    color: var(--text-color);
}
</syntaxhighlight>

=== 情景2：可访问性对比 ===
确保文本与背景的对比度符合WCAG标准：
<math>
\text{对比度} = \frac{L1 + 0.05}{L2 + 0.05}
</math>
其中L1和L2分别是较亮和较暗颜色的相对亮度

== 高级技巧 ==
=== 1. 当前颜色关键字 ===
使用<code>currentColor</code>建立动态关联：

<syntaxhighlight lang="css">
div {
    color: blue;
    border: 2px solid currentColor; /* 边框自动匹配文字颜色 */
}
</syntaxhighlight>

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

<syntaxhighlight lang="css">
.error {
    color: CanvasText;  /* 跟随系统文本色 */
    background-color: Canvas;
}
</syntaxhighlight>

== 浏览器兼容性说明 ==
{| class="wikitable"
|-
! 颜色格式 !! 支持版本
|-
| 关键词 || CSS1（所有浏览器）
|-
| HEX || CSS1
|-
| RGB || CSS1
|-
| RGBA || CSS3
|-
| HSL || CSS3
|-
| HSLA || CSS3
|-
| currentColor || CSS3
|}

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

== 练习建议 ==
尝试创建以下效果：
* 悬停时渐变动画颜色
* 使用HSLA实现半透明重叠文本
* 通过JavaScript动态修改文本颜色

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS文本与字体]]