CSS中设置文本颜色主要通过color属性实现，该属性可以作用于所有包含文本内容的HTML元素，用来定义元素内文本的前景色，也就是我们看到的文字颜色。不同的颜色表示方式可以满足不同的开发需求，适配从简单样式到复杂动态效果的各种场景。
CSS文本颜色的常见设置方式
1. 使用颜色名称
CSS预定义了147种标准的颜色名称，比如red、blue、black等，直接使用这些名称就可以设置文本颜色，这种方式简单直观，适合快速调试或者设置常见的固定颜色。
/* 设置段落文本为红色 */
p {
color: red;
}
/* 设置标题文本为深蓝色 */
h2 {
color: darkblue;
}
2. 使用十六进制颜色值
十六进制颜色值是最常用的颜色表示方式，格式为#RRGGBB，其中RR代表红色通道值，GG代表绿色通道值，BB代表蓝色通道值，每个通道的取值范围是00到FF。如果三个通道的两位数值相同，还可以简写为三位格式，比如#ff0000可以简写为#f00。
/* 十六进制完整格式 设置文本为纯绿色 */
.text-green {
color: #00ff00;
}
/* 十六进制简写格式 设置文本为紫色 */
.text-purple {
color: #f0f;
}
3. 使用RGB和RGBA颜色值
RGB颜色值通过rgb(红, 绿, 蓝)的格式定义，每个通道的取值范围是0到255。RGBA在RGB的基础上增加了alpha通道，用来设置颜色的透明度，取值范围是0到1，0表示完全透明，1表示完全不透明。
/* RGB格式 设置文本为橙色 */
.text-orange {
color: rgb(255, 165, 0);
}
/* RGBA格式 设置文本为半透明黑色 */
.text-transparent-black {
color: rgba(0, 0, 0, 0.5);
}
4. 使用HSL和HSLA颜色值
HSL颜色值通过hsl(色相, 饱和度%, 亮度%)的格式定义，色相取值范围是0到360，饱和度和亮度是百分比。HSLA同样增加了alpha通道设置透明度。
/* HSL格式 设置文本为青色 */
.text-cyan {
color: hsl(180, 100%, 50%);
}
/* HSLA格式 设置文本为半透明红色 */
.text-transparent-red {
color: hsla(0, 100%, 50%, 0.7);
}
color属性的特性
color属性具有继承性，也就是说如果一个元素没有直接设置color属性，它会继承父元素的文本颜色。这个特性可以减少重复代码的编写，比如给body元素设置统一的文本颜色，页面内的大部分文本都会默认使用这个颜色。
/* 给body设置默认文本颜色，子元素默认继承 */
body {
color: #333;
}
/* 单独给某个元素设置不同的文本颜色，覆盖继承值 */
.special-text {
color: #1890ff;
}
实际开发注意事项
- 设置文本颜色时要保证和背景颜色有足够的对比度，避免文字看不清影响可读性，尤其是面向普通用户的网页，建议对比度至少达到4.5:1。
- 不建议在大型项目中大量使用颜色名称，因为不同浏览器对部分非标准颜色名称的解析可能存在差异，优先使用十六进制或者RGB等标准格式。
- 如果需要设置动态变化的文本颜色，可以结合CSS变量使用，方便统一修改和维护。
/* 定义CSS变量存储主题文本颜色 */
:root {
--primary-text-color: #333;
--link-text-color: #1890ff;
}
/* 使用变量设置文本颜色 */
p {
color: var(--primary-text-color);
}
a {
color: var(--link-text-color);
}