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

== 颜色表示方法 ==

=== 1. 颜色关键字 ===

CSS提供了一组预定义的颜色名称，如 <code>red</code>、<code>blue</code>、<code>green</code> 等。这些关键字简单易用，但可选颜色有限。

<syntaxhighlight lang="css">
p {
    color: red; /* 使用关键字设置文本颜色为红色 */
    background-color: lightblue; /* 使用关键字设置背景颜色为浅蓝色 */
}
</syntaxhighlight>

'''输出效果'''：段落文本显示为红色，背景为浅蓝色。

=== 2. 十六进制颜色值 ===

十六进制颜色值以 <code>#</code> 开头，后跟6位（或3位缩写）十六进制数字，分别表示红、绿、蓝（RGB）通道的强度。格式为 <code>#RRGGBB</code> 或 <code>#RGB</code>（缩写）。

<syntaxhighlight lang="css">
div {
    color: #ff0000; /* 红色 */
    background-color: #00ff00; /* 绿色 */
}
</syntaxhighlight>

'''输出效果'''：<div> 元素的文本为红色，背景为绿色。

=== 3. RGB 和 RGBA 颜色值 ===

RGB颜色值使用 <code>rgb()</code> 函数表示，参数为红、绿、蓝的强度（0-255）。RGBA增加了透明度通道（Alpha），取值范围为0（完全透明）到1（完全不透明）。

<syntaxhighlight lang="css">
h1 {
    color: rgb(255, 0, 0); /* 红色 */
    background-color: rgba(0, 255, 0, 0.5); /* 半透明绿色 */
}
</syntaxhighlight>

'''输出效果'''：标题文本为红色，背景为半透明绿色。

=== 4. HSL 和 HSLA 颜色值 ===

HSL（色相、饱和度、亮度）和HSLA（带透明度）提供更直观的颜色控制方式：
- 色相（Hue）：0-360度（如0为红色，120为绿色，240为蓝色）。
- 饱和度（Saturation）：0%（灰色）到100%（全饱和）。
- 亮度（Lightness）：0%（黑色）到100%（白色）。

<syntaxhighlight lang="css">
button {
    color: hsl(120, 100%, 50%); /* 纯绿色 */
    background-color: hsla(240, 100%, 50%, 0.3); /* 半透明蓝色 */
}
</syntaxhighlight>

'''输出效果'''：按钮文本为纯绿色，背景为半透明蓝色。