网站
引入
颜色是 CSS 中最常用的样式之一。
网页中的文字颜色、背景颜色、边框颜色、阴影颜色等，都可以通过 CSS 来控制。
正文
定义
定义
CSS 颜色用于控制元素在页面中的颜色显示效果，常见位置包括文字、背景、边框和阴影。
CSS 中设置颜色，本质上就是给某个颜色相关的属性指定一个颜色值。
语法
最常见的写法：
选择器 {
属性: 颜色值;
}例如：
p {
color: red;
}这里的 color 用于设置文字颜色，red 是颜色值。
常见颜色属性
| 属性 | 作用 |
|---|---|
color | 设置文字颜色 |
background-color | 设置背景颜色 |
border-color | 设置边框颜色 |
outline-color | 设置轮廓颜色 |
box-shadow | 可以设置阴影颜色 |
text-shadow | 可以设置文字阴影颜色 |
颜色值写法
CSS 中颜色值有多种写法。
颜色名称
直接使用英文颜色名。
h1 {
color: red;
}
p {
background-color: lightblue;
}这种写法简单直观，适合初学和临时测试。
十六进制颜色
使用 # 加颜色值。
h1 {
color: #ff0000;
}
body {
background-color: #f5f5f5;
}#ff0000 表示红色，#f5f5f5 是一种很浅的灰色。
十六进制颜色在实际开发中很常见，因为设计稿里经常会直接给出这种颜色值。
rgb()
rgb() 通过红、绿、蓝三个通道表示颜色。
p {
color: rgb(255, 0, 0);
}这里的 rgb(255, 0, 0) 表示红色。
- 第一个值表示红色
- 第二个值表示绿色
- 第三个值表示蓝色
- 每个值通常在
0到255之间
rgba()
rgba() 比 rgb() 多了一个透明度。
.box {
background-color: rgba(0, 0, 0, 0.5);
}这里表示一个半透明的黑色背景。
最后一个值是透明度：
0表示完全透明1表示完全不透明0.5表示半透明
现在也可以使用新的写法：
.box {
background-color: rgb(0 0 0 / 50%);
}hsl()
hsl() 通过色相、饱和度、亮度表示颜色。
button {
background-color: hsl(210, 100%, 50%);
}其中：
- 第一个值表示色相
- 第二个值表示饱和度
- 第三个值表示亮度
hsl() 适合做一组有规律的颜色，例如同一种颜色的深浅变化。
例子
设置文字颜色和背景颜色
<p class="notice">这是一条提示信息</p>.notice {
color: #ffffff;
background-color: #2563eb;
}这个例子中，文字颜色是白色，背景颜色是蓝色。
设置边框颜色
<div class="card">卡片内容</div>.card {
border: 1px solid #dddddd;
}这里的 #dddddd 用于设置边框颜色，让卡片边界更明显。
设置半透明背景
.mask {
background-color: rgba(0, 0, 0, 0.6);
}这种写法常用于遮罩层，让背景变暗但不完全挡住内容。
特点
color主要控制文字颜色background-color控制背景颜色border-color控制边框颜色- 颜色名称简单，但可选范围有限
- 十六进制颜色更常见，适合和设计稿配合使用
rgb()更直观地表示红、绿、蓝三个颜色通道rgba()或rgb(… / …)可以设置透明度- 颜色不只是装饰，也会影响可读性和可访问性
注意事项
- 文字颜色和背景颜色要有足够对比度，否则阅读会很吃力
- 不要只用颜色表达重要信息，例如错误提示最好同时配文字说明
- 同一个页面中颜色不要太杂，容易显得混乱
- 如果使用透明色，要注意下面内容是否会影响最终显示效果
color会被子元素继承，但background-color通常不会直接继承
理解
可以把 CSS 颜色理解为网页的视觉标记。
它不只是让页面变好看，也能帮助用户区分重点、状态和层级。
比如红色常用来表示错误或危险，绿色常用来表示成功，灰色常用来表示次要内容。
学习颜色时，重点不是背所有颜色值，而是知道颜色可以写在哪里、有哪些常见写法，以及什么时候需要注意可读性。
引出
理解了颜色之后，可以继续学习 CSS 背景，因为背景中也会大量使用颜色、图片和渐变效果。