编辑“︁CSS预定义颜色”︁

= CSS预定义颜色 =

'''CSS预定义颜色'''是CSS规范中预先定义的一组颜色名称，开发者可以直接使用这些名称来设置文本、背景、边框等元素的颜色，而无需使用十六进制（HEX）、RGB或HSL等颜色表示法。这些颜色名称是标准化的，所有现代浏览器均支持。

== 概述 ==

CSS预定义颜色（也称为“命名颜色”）是W3C CSS规范中定义的147种颜色名称，包括常见的“red”（红色）、“blue”（蓝色）、“green”（绿色）等。这些名称不区分大小写，例如“Red”和“red”表示相同的颜色。

预定义颜色的优点包括：
* '''易读性'''：名称比十六进制代码更直观。
* '''快速使用'''：无需记忆或查找颜色代码。
* '''标准化'''：所有浏览器解析一致。

== 完整的预定义颜色列表 ==

以下是CSS中所有预定义颜色的分类列表（按颜色组划分）：

=== 基本颜色 ===
* <span style="color: black; background: white;">black</span>（黑色）
* <span style="color: white; background: black;">white</span>（白色）
* <span style="color: red;">red</span>（红色）
* <span style="color: lime;">lime</span>（亮绿色）
* <span style="color: blue;">blue</span>（蓝色）

=== 扩展颜色 ===
* <span style="color: aqua;">aqua</span>（浅青色）
* <span style="color: fuchsia;">fuchsia</span>（紫红色）
* <span style="color: silver;">silver</span>（银色）
* <span style="color: gray;">gray</span>（灰色）
* <span style="color: maroon;">maroon</span>（褐红色）

=== 完整列表 ===
完整的147种颜色名称及对应十六进制值可参考[外部资源链接]。

== 代码示例 ==

以下示例展示如何在CSS中使用预定义颜色：

<syntaxhighlight lang="css">
/* 设置文本颜色 */
h1 {
  color: darkblue;
}

/* 设置背景颜色 */
body {
  background-color: lightgray;
}

/* 设置边框颜色 */
.button {
  border: 2px solid coral;
}
</syntaxhighlight>

输出效果：
* <span style="color: darkblue; font-size: 1.2em;">标题文字变为深蓝色</span>
* <span style="background: lightgray; padding: 5px;">页面背景变为浅灰色</span>
* <span style="border: 2px solid coral; padding: 5px;">按钮边框变为珊瑚色</span>

== 实际应用场景 ==

1. '''快速原型设计'''：在开发初期，使用预定义颜色快速搭建界面。
2. '''可读性优先的代码'''：在团队协作中，颜色名称比代码更易理解。
3. '''动态样式调整'''：通过JavaScript动态修改颜色时，名称比HEX更易操作。

=== 案例：按钮状态颜色 ===
<syntaxhighlight lang="css">
.button {
  background-color: dodgerblue;
  color: white;
}

.button:hover {
  background-color: royalblue;
}

.button:active {
  background-color: midnightblue;
}
</syntaxhighlight>

此代码实现按钮的悬停和点击状态颜色变化，全部使用预定义颜色。

== 技术细节 ==

=== 颜色名称的标准化 ===
所有预定义颜色对应固定的十六进制值，例如：
* <math>red = \#FF0000</math>
* <math>lime = \#00FF00</math>
* <math>blue = \#0000FF</math>

=== 浏览器支持 ===
所有现代浏览器均完全支持预定义颜色，包括：
* Chrome / Edge / Firefox / Safari
* 移动端浏览器（iOS/Android）

== 与其他颜色表示法的比较 ==

{| class="wikitable"
|+ 颜色表示法对比
! 类型 !! 示例 !! 优点 !! 缺点
|-
| 预定义颜色 || <code>color: gold;</code> || 易读易写 || 选择有限
|-
| 十六进制 || <code>color: #FFD700;</code> || 精确控制 || 不易记忆
|-
| RGB || <code>color: rgb(255, 215, 0);</code> || 数学可计算 || 不够直观
|}

== 视觉参考图表 ==

<mermaid>
pie
    title 预定义颜色使用场景
    "文本颜色" : 35
    "背景颜色" : 45
    "边框颜色" : 20
</mermaid>

== 注意事项 ==
1. 部分颜色名称在不同浏览器中可能有微小差异（如“darkgray”）。
2. 设计专业项目时，建议使用品牌色值而非预定义颜色。
3. 颜色名称无法实现透明度控制（需使用RGBA/HSLA）。

== 进阶技巧 ==
* 结合CSS变量使用：
  <syntaxhighlight lang="css">
  :root {
    --primary-color: teal;
  }
  header {
    background-color: var(--primary-color);
  }
  </syntaxhighlight>

* 通过JavaScript切换颜色：
  <syntaxhighlight lang="javascript">
  document.body.style.backgroundColor = "skyblue";
  </syntaxhighlight>

== 总结 ==
CSS预定义颜色为开发者提供了一种快速、直观的颜色指定方式，特别适合初学者学习和快速开发。虽然选择有限，但在大多数基础场景中完全够用。建议开发者同时掌握其他颜色表示法以应对复杂需求。

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS颜色与背景]]