正在加载...
CSS 颜色
你会选中元素了。现在上色。第一种颜色技能很简单：用 color 属性设置文字颜色。背景、渐变和完整的颜色计算以后再学——今天先练可读、可复用的前景色。
color 做什么？
color 属性设置前景颜色——主要是文字的颜色。浏览器也会把这个计算后的颜色用于跟随 currentColor 的东西（边框、部分 SVG、装饰）。它不会填充文字背后的盒子；那是 background-color（后续模块）。
命名色一览
CSS 自带许多命名色——像 teal、navy 这样的关键字。先记住一小套日常用法。精确的 hex 与 rgb() 在「颜色值」一课。
📊 日常命名色
| 名称 | 感觉 | 典型用途 |
|---|---|---|
black / white |
最大对比 | 正文或页面画布（谨慎） |
navy / teal |
沉稳品牌强调 | 链接、标题、提示 |
maroon / crimson |
强烈警告或强调 | 错误、促销标签（少用） |
gray / silver |
安静的次要文字 | 说明、弱化标签 |
transparent |
完全透明 | 隐藏边框又不删掉属性 |
用名称设置文字颜色
写一条普通声明：属性 color，值用命名色。先从段落开始，让页面有意图。
段落文字上的命名色
css
CSS Code
p {
color: teal;
}怎么读结果？
每个匹配的 <p> 把字母画成 teal。属性名永远是 color——不是 text-color，也不是 font-color。
标题可以和正文不同
你常常想要更深的标题、更安静的段落。不同选择器，不同颜色。
标题强调 vs 正文
css
CSS Code
h1 {
color: navy;
}
.lead {
color: gray;
}设计习惯
高对比标题便于扫读。柔和的次要文字避免说明“大喊”。但仍要留够可读对比度。
颜色会继承
子元素会拿父元素的 color，除非自己再设。所以容器上的颜色可以给整块文字定主题。
提示块上的继承色
css
CSS Code
.note {
color: maroon;
}继承什么？
在 <div class="note">…</div> 里，段落和 span 保持 maroon，直到更强的规则改掉它们。继承是特性——不是缺陷。
currentColor 跟文字一致
currentColor 表示「用该元素计算后的 color」。当边框或图标要和文字同步时很有用。
边框通过 currentColor 跟随文字
css
CSS Code
.badge {
color: teal;
border: 2px solid currentColor;
padding: 0.25rem 0.5rem;
}为什么值得？
只改一次 color——边框跟着走。不用再维护第二个写死的 teal。
主题卡片（合在一起）
把容器颜色、子元素更安静的覆盖，以及 currentColor 强调合起来。
带覆盖与 currentColor 的卡片主题
css
CSS Code
.card {
color: navy;
border: 1px solid currentColor;
padding: 1rem;
}
.card .muted {
color: gray;
}color 不是背景
初学者常把 color 写成想填文字背后的颜色。从第一天就分开：
color→ 文字（前景）background-color→ 内容背后的色块（很快会学）
自己动手
- 页面含标题、
<p class="lead">，以及带短段落的<div class="note">。 - 设置
h1 { color: navy; }、p { color: teal; }、.note { color: maroon; }——检查每个区域。 - 在小 span 上加
.badge { color: teal; border: 2px solid currentColor; }——边框应与文字一致。 - 在
.card里给卡片 navy、给.mutedcolor: gray——该行应由子覆盖胜出。 - 可选：在装饰标签上试
color: transparent——文字消失，布局占位仍在。
常见错误
- 用
color给盒子背景上色——稍后用background-color - 发明名字（
lightishblue）——用真实 CSS 关键字，或等 hex/rgb - 以为每个属性都像
color一样继承——很多不会 - 命名色还没熟就跳到很长的 hex
- 忽视对比度（白底浅灰）——好看但难读
小结
color设置前景文字颜色- 命名色（
teal、navy、maroon…）够入门 - 子元素继承
color，直到自己覆盖 currentColor把计算后的文字色复用到边框等- 更深格式（hex、rgb、hsl）留给颜色值；背景留给后面课程
- 用标题 / lead / note 练到属性成习惯
🧠 测试您的知识
准备开始
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
8
问题
70%
及格要求
∞
时间
∞
尝试次数
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部