CSS 中的 color 属性

要设置文本颜色,我们最常用的 CSS 属性是 color，要设置背景颜色，我们使用 background-color 属性，它们的值可以是多种颜色格式。

网页中css设置颜色的代码
（图片来源网络，侵删）
p {
  color: red; /* 设置段落文本颜色为红色 */
}
body {
  background-color: #f0f0f0; /* 设置页面背景颜色为浅灰色 */
}

设置颜色的主要方法

CSS 提供了多种表示颜色的方式，下面是最常见的几种：

关键字

这是最简单、最直观的方式，直接使用颜色的英文单词。

常用颜色关键字:

  • red, green, blue
  • black, white, gray
  • yellow, orange, purple
  • pink, brown, cyan
  • 还有一些特殊的值,如 transparent（完全透明）。

代码示例:

网页中css设置颜色的代码
（图片来源网络，侵删）
h1 {
  color: blue; /* 蓝色标题 */
}
p {
  color: darkgray; /* 深灰色段落 */
}

优点: 非常易于阅读和理解。 缺点: 颜色选择有限，不够精确。

HEX (十六进制) 代码

这是目前最流行和最常用的方法之一,它使用 开头， followed by 3 或 6 个十六进制字符 (0-9, A-F)。

  • 6位 HEX: #RRGGBB，分别代表红、绿、蓝三个通道的强度，每个通道从 00 (最弱) 到 FF (最强)。
    • #FF0000 是红色，#00FF00 是绿色，#0000FF 是蓝色。
    • #FFFFFF 是白色，#000000 是黑色。
  • 3位 HEX: #RGB，是 6位 HEX 的简写形式，其中每个字符重复一次。#F00 等同于 #FF0000，#0F0 等同于 #00FF00。

代码示例:

h1 {
  color: #2c3e50; /* 深蓝灰色标题 */
}
.button {
  background-color: #3498db; /* 明亮的蓝色按钮 */
  color: #ffffff; /* 白色文本 */
}

优点: 颜色选择极其丰富，是 Web 设计的行业标准。 缺点: 对于不熟悉的人来说，可读性不如关键字。

网页中css设置颜色的代码
（图片来源网络，侵删）

RGB / RGBA

RGB 代表 "Red, Green, Blue" (红、绿、蓝)，它通过指定红、绿、蓝三个颜色通道的数值（0-255）来混合出颜色。

  • RGB: rgb(red, green, blue)
  • RGBA: rgba(red, green, blue, alpha)。alpha 通道代表透明度，取值范围从 0 (完全透明) 到 1 (完全不透明)。

代码示例:

/* 使用 RGB */
p {
  color: rgb(128, 128, 128); /* 灰色文本 */
}
/* 使用 RGBA (带透明度) */
.overlay {
  background-color: rgba(0, 0, 0, 0.5); /* 半透明的黑色遮罩 */
}

优点: 可以精确控制颜色，RGBA 非常适合需要透明度的场景。 缺点: 需要记住或查找数值，不如 HEX 简洁。

HSL / HSLA

HSL 代表 "Hue, Saturation, Lightness" (色相, 饱和度, 明度)，这种模式更符合人类对颜色的感知方式。

  • Hue (色相): 0-360 的度数，代表颜色在色轮上的位置，0/360 是红色，120 是绿色，240 是蓝色。
  • Saturation (饱和度): 0%-100%，颜色的鲜艳程度，0% 是灰色，100% 是最鲜艳。
  • Lightness (明度): 0%-100%，颜色的明暗，0% 是黑色，50% 是正常，100% 是白色。
  • HSLA: hsla(hue, saturation, lightness, alpha)，同样带有透明度通道。

代码示例:

/* 使用 HSL */
h1 {
  color: hsl(120, 100%, 50%); /* 鲜艳的绿色 */
}
/* 使用 HSLA (带透明度) */
.highlight {
  background-color: hsla(60, 100%, 50%, 0.2); /* 20% 透明度的黄色高亮 */
}

优点: 非常直观，易于调整颜色的鲜艳程度和明暗，是设计师的挚爱。 缺点: 需要理解 HSL 模型的概念。

当前颜色关键字 currentColor

这是一个非常方便的关键字,它的值是元素上 color 属性计算后的值，当你想确保边框、阴影或其他颜色与文本颜色保持一致时，它非常有用。

代码示例:

.button {
  color: #3498db; /* 设置文本颜色 */
  border: 2px solid currentColor; /* 边框颜色会自动继承文本颜色，变为 #3498db */
  text-decoration: underline;
  text-decoration-color: currentColor; /* 下划线颜色也会继承 */
}

完整示例代码

下面是一个完整的 HTML 文件，你可以将它保存为 .html 文件并在浏览器中打开，查看不同颜色设置方法的效果。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">CSS 颜色设置示例</title>
    <style>
        body {
            font-family: sans-serif;
            line-height: 1.6;
            padding: 20px;
            background-color: #f4f4f4; /* 使用 HEX 设置背景色 */
        }
        h1 {
            /* 使用 HEX 设置标题颜色 */
            color: #2c3e50; 
        }
        .section {
            border: 1px solid #ddd;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 5px;
        }
        /* 使用关键字设置颜色 */
        .keyword-example {
            color: crimson;
        }
        /* 使用 RGB 设置颜色 */
        .rgb-example {
            color: rgb(70, 130, 180); /* 钢蓝色 */
        }
        /* 使用 RGBA 设置带透明度的背景色 */
        .rgba-example {
            background-color: rgba(255, 215, 0, 0.3); /* 30% 透明度的金色背景 */
            padding: 10px;
            border: 1px solid #ccc;
        }
        /* 使用 HSL 设置颜色 */
        .hsl-example {
            color: hsl(280, 70%, 60%); /* 紫色 */
        }
        /* 使用 currentColor */
        .current-color-example {
            color: #e74c3c; /* 设置文本为红色 */
            border: 3px solid currentColor; /* 边框也会是红色 */
            padding: 10px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <h1>CSS 设置颜色的不同方法</h1>
    <div class="section">
        <h2>1. 关键字</h2>
        <p class="keyword-example">这段文字的颜色是通过关键字 "crimson" 设置的。</p>
    </div>
    <div class="section">
        <h2>2. HEX (十六进制)</h2>
        <p>这个页面的背景色和标题色都是通过 HEX 代码设置的。</p>
    </div>
    <div class="section">
        <h2>3. RGB</h2>
        <p class="rgb-example">这段文字的颜色是通过 RGB (70, 130, 180) 设置的。</p>
    </div>
    <div class="section">
        <h2>4. RGBA (带透明度)</h2>
        <p class="rgba-example">这个段落的背景色是通过 RGBA (255, 215, 0, 0.3) 设置的，它有30%的透明度，可以看到后面的灰色背景。</p>
    </div>
    <div class="section">
        <h2>5. HSL</h2>
        <p class="hsl-example">这段文字的颜色是通过 HSL (280, 70%, 60%) 设置的。</p>
    </div>
    <div class="section">
        <h2>6. currentColor</h2>
        <p>下面的盒子，它的文本和边框颜色都是通过 <code>currentColor</code> 继承的。</p>
        <div class="current-color-example">
            我和我的边框颜色是一样的！
        </div>
    </div>
</body>
</html>

总结与建议

方法 格式示例 优点 缺点 适用场景
关键字 color: red; 简单易读 颜色有限 快速原型、不精确的颜色需求
HEX color: #ff0000; 颜色丰富，是行业标准 可读性差 绝大多数生产环境，精确颜色控制
RGB/RGBA color: rgb(255,0,0); 精确控制，支持透明度 不如 HEX 简洁 需要透明度的场景，或与动态语言结合
HSL/HSLA color: hsl(0, 100%, 50%); 直观，易于调整 需要学习概念 设计师友好，需要微调颜色时
currentColor border: 1px solid currentColor; 保持颜色一致性 依赖父元素的 color 确保多个元素颜色联动时

给初学者的建议：

  1. 从 HEX 开始： 这是最通用、最常用的方法，掌握它就足够应对大部分情况。
  2. 学习 RGBA： 当你需要制作遮罩、半透明元素时，RGBA 是必不可少的。
  3. 了解 HSL： 如果你对设计感兴趣，HSL 会让你对颜色的掌控提升一个层次。
  4. 善用浏览器工具： 在 Chrome 或 Firefox 中右键检查元素，可以实时看到和修改任何元素的 CSS 颜色，这是学习 CSS 颜色的最佳途径。