通过color和background-color属性可分别设置文本与背景颜色，支持颜色名、十六进制、RGB、RGBA、HSL、HSLA等多种表示方式，推荐使用CSS变量统一管理配色以提升维护性。
在CSS中设置颜色是网页设计中最基础也是最重要的部分之一。通过 color 和 background-color 两个属性，我们可以控制文字颜色和元素背景颜色。下面详细介绍如何使用这两个属性以及常见的颜色表示方法。
color 属性：设置文本颜色
color 属性用于定义HTML元素内文本的显示颜色。它只影响文字本身，不会改变背景或其他装饰颜色。
常见用法：- 使用颜色名称（如 red、blue、green）
- 使用十六进制值（如 #ff0000、#0000ff）
- 使用RGB函数（如 rgb(255, 0, 0)）
- 使用RGBA（支持透明度，如 rgba(255, 0, 0, 0.5)）
- 使用HSL或HSLA（如 hsl(120, 100%, 50%)）
示例：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
p {
color: #333333; /* 深灰色 */
}
.error {
color: rgb(255, 0, 0); /* 红色文字 */
}
.highlight {
color: hsla(60, 100%, 50%, 0.8); /* 带透明度的黄色 */
}
background-color 属性：设置背景颜色
background-color 用于设置一个元素的背景颜色。这个颜色会填充元素的内容区域以及内边距（padding），如果设置了边框，则也可能延伸到边框下（取决于 background-clip）。
立即学习“前端免费学习笔记（深入）”；
注意：- 默认值为 transparent（透明），即没有背景色
- 可以与图片背景同时设置，但颜色通常作为备用或叠加层
- 支持所有颜色格式，包括带透明度的 RGBA 和 HSLA
示例：
div {
background-color: #f0f0f0; /* 浅灰色背景 */
}
.header {
background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色，常用于遮罩 */
}
.alert {
background-color: hsl(0, 100%, 90%); /* 淡红色背景 */
}
常用颜色表示方式对比
CSS支持多种颜色写法，各有适用场景：
- 颜色名称：易读但种类有限，适合简单项目（如 black、white、orange）
- 十六进制 (#RRGGBB 或 #RGB)：最常用，简洁直观，例如 #ff6600 或简写 #f60
- RGB/RGBA：适合需要精确控制红绿蓝通道的场景，RGBA 可添加透明度
- HSL/HSLA：基于色相、饱和度、亮度，更符合人类对色彩的理解，便于调色
举例：同一颜色的不同写法
.color-example {
color: red;
color: #ff0000;
color: rgb(255, 0, 0);
color: hsl(0, 100%, 50%);
}
以上四种写法效果完全相同。
实际应用建议
在真实项目中，合理使用颜色属性能提升可读性和用户体验。
- 确保文字与背景之间有足够的对比度，尤其是可访问性要求高的网站
- 使用变量（CSS自定义属性）统一管理主题色，便于维护
- 避免过度使用鲜艳颜色，保持界面协调
- 在移动端注意背景色在不同光照环境下的可视性
示例：使用CSS变量统一配色
:root {
--primary-color: #007bff;
--text-dark: #212529;
--bg-light: #f8f9fa;
}
<p>body {
color: var(--text-dark);
background-color: var(--bg-light);
}
.btn-primary {
background-color: var(--primary-color);
color: white;
}</p>基本上就这些。掌握 color 和 background-color 的用法，并熟悉各种颜色格式，就能灵活地为网页添加合适的色彩表现。不复杂但容易忽略细节，比如透明度和对比度，值得多加留意。
