CSS 颜色

在本教程中，您将学习在 CSS 中定义颜色值的不同方法。

设置颜色属性

color 属性定义了元素的文本颜色（一般为前景色）。

例如，在 body 选择器中指定的 color 属性定义了整个页面的默认文本颜色。 让我们试试下面的例子，看看它是如何工作的：

body {
    color: #ff5722;
}

定义颜色值

CSS 中的颜色最常以以下格式指定：

• 颜色关键字 - 例如"red", "green", "blue", "transparent" 等。
• 十六进制值 - 例如"#ff0000"、"#00ff00"等。
• 一个 RGB 值 - 例如"rgb(255, 0, 0)"

CSS3 引入了其他几种颜色格式，例如 HSL、HSLA 和 RGBA，它们也支持 alpha 透明度。 我们将在 CSS3 color 一章中更详细地了解它们。

现在，让我们坚持定义颜色值的基本方法：

颜色关键字

CSS 定义了几个颜色关键字，让您可以轻松地指定颜色值。

这些基本颜色关键字是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white,和 yellow。 颜色名称不区分大小写。

h1 {
    color: red;
}
p {
    color: purple;
}

然而，现代网络浏览器实际上支持的颜色名称比 CSS 标准中定义的颜色名称多得多，但为了更安全，您应该改用十六进制颜色值。

请参阅 CSS 颜色名称 上的参考，了解可能的颜色名称的完整列表。

十六进制颜色值

Hex（十六进制的缩写）是迄今为止在网络上定义颜色最常用的方法。

Hex 使用六位代码表示颜色，前面有一个哈希字符，如 #rrggbb，其中 rr、gg 和 bb 分别代表颜色的红、绿、蓝分量。

每个组件的值可以从十六进制表示法的 00（无颜色）和 FF（全色）或十进制等效表示法的 0 和 255 变化。 因此 #ffffff 代表白色，#000000 代表黑色。 让我们看一下下面的例子：

h1 {
    color: #ffa500;
}
p {
    color: #00ff00;
}

RGB 颜色值

可以使用 rgb() 函数符号在 RGB 模型（红色、绿色和蓝色）中定义颜色。

rgb() 函数接受三个逗号分隔的值，它们指定颜色的红色、绿色和蓝色分量的数量。 这些值通常指定为 0 到 255 之间的整数，其中 0 表示无颜色，而 255 表示全或最大颜色。

以下示例指定与前一个示例相同的颜色，但使用 RGB 表示法。

h1 {
    color: rgb(255, 165, 0);
}
p {
    color: rgb(0, 255, 0);
}

p.one {
    color: #0000ff;
    border: 2px solid;
}
p.two {
    color: #00ff00;
    outline: 2px solid;
}