CSS color 语法
在 CSS 中，color 属性用于设置文本的颜色，也可以间接影响一些其他视觉样式（如边框、下划线等的颜色）。
语法：
color: 颜色值;说明：
CSS 中的颜色可以通过多种方式表示，以下是常用的几种格式（前 4 种最常用）。
- 关键字，比如 red、orange、skyblue、transparent（透明色）等。
- 十六进制值，比如 #F1F1F1。
- RGB 值，比如 rgb(255, 255, 255) 或 rgb(255 0 0 / 50%)。
- RGBA 值，比如 rgba(255, 255, 255, 1.0)。
- HSL 值，比如 hsl(60deg 75% 45%)。
- HSLA 值，比如 hsla(60deg 75% 45% / 60%)。
- HWB 值，比如 hwb(120deg 0% 50% / 75%)。
对于 color 属性，小伙伴们还需要注意以下几点。
- color 是一个会被继承的属性。也就是说，如果你给父元素设置了颜色，子元素会自动继承这个颜色，除非它们自己有单独的 color 设置。
- color 设置的值会影响 border-color、text-decoration-color、outline-color 等属性的默认颜色，因为它们默认使用 currentColor 值。
注意: color 定义的是文本颜色（前景色），而 background-color 定义的是背景颜色（背景色）。
CSS color 摘要
| 属于 | CSS 文本颜色 |
|---|---|
| 使用频率 | 高 |
| 是否继承 | 是 |
| 默认值 | canvastext（系统颜色） |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS color 示例
接下来，我们通过几个简单的例子来讲解一下 CSS color 属性是如何使用的。
示例 1：color 取值为 “关键字”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div:nth-child(1) { color: red; }
div:nth-child(2) { color: green; }
div:nth-child(3) { color: blue; }
</style>
</head>
<body>
<div>绿叶网（red）</div>
<div>绿叶网（green）</div>
<div>绿叶网（blue）</div>
</body>
</html>页面效果如下图所示。
示例 2：color 取值为 “十六进制值”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div:nth-of-type(1) { color: #03FCA1; }
div:nth-of-type(2) { color: #048C02; }
div:nth-of-type(3) { color: #CE0592; }
</style>
</head>
<body>
<div>绿叶网（#03FCA1）</div>
<div>绿叶网（#048C02）</div>
<div>绿叶网（#CE0592）</div>
</body>
</html>页面效果如下图所示。
示例 3：color 取值为 “RGB 值”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div:nth-child(1) { color: rgb(249, 175, 56); }
div:nth-child(2) { color: rgb(10, 191, 116); }
div:nth-child(3) { color: rgb(155, 38, 222); }
</style>
</head>
<body>
<div>绿叶网：rgb(249, 175, 56)</div>
<div>绿叶网：rgb(10, 191, 116)</div>
<div>绿叶网：rgb(155, 38, 222)</div>
</body>
</html>页面效果如下图所示。
示例 4：color 取值为 “RGBA 值”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div:nth-child(1) { color: rgba(249, 175, 56, 0.8); }
div:nth-child(2) { color: rgba(10, 191, 116, 0.8); }
div:nth-child(3) { color: rgba(155, 38, 222, 0.8); }
</style>
</head>
<body>
<div>绿叶网：rgba(249, 175, 56, 0.8)</div>
<div>绿叶网：rgba(10, 191, 116, 0.8)</div>
<div>绿叶网：rgba(155, 38, 222, 0.8)</div>
</body>
</html>页面效果如下图所示。
CSS 与颜色相关的属性
在 CSS 中，与颜色相关的属性有很多，如下表所示。
| 属性 | 说明 |
|---|---|
| color | 文本颜色 |
| background-color | 背景颜色 |
| border-color | 边框颜色 |
| outline-color | 轮廓颜色 |
| text-decoration-color | 装饰线颜色 |
| text-emphasis-color | 强调线颜色 |
