CSS 文本颜色 - 绿叶网

在 CSS 中，我们可以使用 color 属性来定义文本的颜色。

语法：

color: 颜色值 ;

说明：

color 属性的取值是一个颜色值，包括以下几种情况（常用的是前 4 种）。

关键字：关键字是最简单的颜色表示方式，直接使用颜色的英文单词。比如 red、orange、skyblue 等。
十六进制值：十六进制值由 “#” 加上 6 位十六进制字符组成。比如 #F1F1F1。
RGB 值：RGB 值使用 rgb(red, green, blue) 函数表示，其中 red、green、blue 是 0 到 255 之间的整数，或者 0.0% 到 100.0% 之间的百分比值，表示颜色的红、绿、蓝分量。比如 rgb(255, 255, 255)。
RGBA 值：RGBA 值在 RGB 值的基础上增加了透明度设置，使用 rgba(red, green, blue, alpha) 函数表示，其中 alpha 是 0.0（完全透明）到 1.0（完全不透明）之间的数值。比如 rgba(255, 255, 255, 1.0)。
HSL 值，比如 hsl(60deg 75% 45%)。
HSLA 值，比如 hsla(60deg 75% 45% / 60%)。
HWB 值，比如 hwb(120deg 0% 50% / 75%)。

可能有小伙伴会问：“我怎么知道这个颜色的代码是多少？” 其实在 VS Code 等编辑器中，当我们输入颜色代码时，通常会弹出一个 “取色器”，我们可以直接在里面选择颜色，然后编辑器会自动帮你生成代码。

示例 1：CSS 文本颜色为 “关键字”

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .div1 { color: red; }
        .div2 { color: green; }
        .div3 { color: blue; }
    </style>
</head>
<body>
    <div class="div1">绿叶网（red）</div>
    <div class="div2">绿叶网（green）</div>
    <div class="div3">绿叶网（blue）</div>
</body>
</html>

页面效果如下图所示。

CSS 文本颜色为关键字

示例 2：CSS 文本颜色为 “十六进制值”

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .div1 { color: #03FCA1; }
        .div2 { color: #048C02; }
        .div3 { color: #CE0592; }
    </style>
</head>
<body>
    <div class="div1">绿叶网（#03FCA1）</div>
    <div class="div2">绿叶网（#048C02）</div>
    <div class="div3">绿叶网（#CE0592）</div>
</body>
</html>

页面效果如下图所示。

CSS 文本颜色为十六进制值

示例 3：CSS 文本颜色为 “RGB 值”

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .div1 { color: rgb(249, 175, 56); }
        .div2 { color: rgb(10, 191, 116); }
        .div3 { color: rgb(155, 38, 222); }
    </style>
</head>
<body>
    <div class="div1">绿叶网：rgb(249, 175, 56)</div>
    <div class="div2">绿叶网：rgb(10, 191, 116)</div>
    <div class="div3">绿叶网：rgb(155, 38, 222)</div>
</body>
</html>

页面效果如下图所示。

CSS 文本颜色为 RGB 值

示例 4：CSS 文本颜色为 “RGBA 值”

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .div1 { color: rgba(249, 175, 56, 0.8); }
        .div2 { color: rgba(10, 191, 116, 0.8); }
        .div3 { color: rgba(155, 38, 222, 0.8); }
    </style>
</head>
<body>
    <div class="div1">绿叶网：rgba(249, 175, 56, 0.8)</div>
    <div class="div2">绿叶网：rgba(10, 191, 116, 0.8)</div>
    <div class="div3">绿叶网：rgba(155, 38, 222, 0.8)</div>
</body>
</html>

页面效果如下图所示。

CSS 文本颜色为 RGBA 值

与颜色相关的 CSS 属性

在 CSS 中，与颜色相关的属性有很多，如下表所示。

颜色相关的属性
属性	说明
color	文本颜色
background-color	背景颜色
border-color	边框颜色
outline-color	轮廓颜色
text-decoration-color	装饰线颜色
text-emphasis-color	强调线颜色