CSS 属性：颜色、字体与文本
CoreCSS Properties本文涵盖 CSS 最常用的三类属性——颜色、字体 和 文本，以及如何使用 Chrome DevTools 检视和调试 CSS。
一、🎨 CSS 颜色（Color Properties）
CSS 中有两个核心颜色属性：
| 属性 | 作用 | 示例 |
|---|---|---|
color | 设置 文字 颜色 | color: blue; |
background-color | 设置 背景 颜色 | background-color: red; |
1.1 命名颜色（Named Colors）
CSS 预定义了一系列颜色名称，可直接使用：
css
h1 { color: cornflowerblue; }
body { background-color: antiquewhite; }CSS 共有 140+ 命名颜色，涵盖基础色（Level 1）到扩展色（Level 3/4），包括 coral、cadetblue、olivedrab 等。
完整列表参见 MDN — <named-color>
1.2 十六进制颜色（Hex Code）
更灵活的颜色表示方式，格式为 #RRGGBB：
css
h2 { color: #5D3891; }原理：每两位十六进制数对应一个颜色通道（红 R / 绿 G / 蓝 B），取值范围 00（0）到 FF（255）。
| 十进制 R-G-B | 十六进制 | 颜色 |
|---|---|---|
| 93, 56, 145 | #5D3891 | 紫色 |
| 255, 0, 0 | #FF0000 | 红色 |
| 0, 0, 0 | #000000 | 黑色 |
| 255, 255, 255 | #FFFFFF | 白色 |
1.3 配色资源
| 资源 | 地址 | 特点 |
|---|---|---|
| Color Hunt | colorhunt.co | 设计师精选配色方案 |
| Coolors | coolors.co | 快速生成配色 |
| MDN Color Docs | MDN | 官方规范 |
二、🔤 字体属性（Font Properties）
2.1 字体大小（font-size）
| 单位 | 含义 | 特点 | 示例 |
|---|---|---|---|
px | 像素（1/96 英寸 ≈ 0.26mm） | 静态，固定不变 | font-size: 20px; |
pt | 磅（1/72 英寸 ≈ 0.35mm） | 静态，与 Word 一致 | font-size: 12pt; |
em | 相对于 父元素 的字体大小 | 相对，会层层累积 | font-size: 2em; |
rem | 相对于 根元素 (<html>) 的字体大小 | 相对，稳定可控 | font-size: 2rem; |
| 关键字 | 预定义尺寸 | 浏览器默认 | font-size: x-large; |
em vs rem 的区别
html
<html style="font-size: 20px;"> <!-- 根元素 -->
<body>
<footer style="font-size: 80px;">
<h2 style="font-size: 2em;"> <!-- 2 × 80px = 160px -->
<h2 style="font-size: 2rem;"> <!-- 2 × 20px = 40px -->
</footer>
</body>
</html>| 单位 | 参照对象 | font-size: 2em | font-size: 2rem |
|---|---|---|---|
em | 父元素 (footer: 80px) | 160px | — |
rem | 根元素 (html: 20px) | — | 40px |
推荐使用 rem
em 的参照会随嵌套层级变化，容易混淆。rem 始终参照根元素，一致性更好，是字体大小的首选单位。
2.2 字体粗细（font-weight）
css
h1 { font-weight: bold; } /* 关键字 */
h2 { font-weight: 700; } /* 数值（100-900） */
p { font-weight: lighter; } /* 相对值（相对于父元素） */| 值 | 说明 |
|---|---|
normal | 默认，等同于 400 |
bold | 加粗，等同于 700 |
lighter / bolder | 相对于父元素 ±100 |
100 ~ 900 | 精确控制粗细 |
2.3 字体族（font-family）
css
/* 特定字体 + 通用备选字体 */
h1 { font-family: Helvetica, sans-serif; }
h2 { font-family: "Times New Roman", serif; }关键规则：
| 规则 | 说明 |
|---|---|
| 多词字体名需 引号 | "Times New Roman" |
| 始终提供 通用字体 作为备选 | serif、sans-serif、monospace、cursive、fantasy |
| 逗号分隔，按优先级排列 | 浏览器从左到右依次尝试 |
通用字体类型
| 通用类型 | 特征 | 典型字体 |
|---|---|---|
serif | 有衬线（笔画末端有装饰） | Times New Roman |
sans-serif | 无衬线（笔画末端平直） | Helvetica、Arial |
monospace | 等宽（每个字符宽度相同） | Courier New |
cursive | 手写风格 | — |
fantasy | 装饰性/奇特风格 | — |
使用 Google Fonts
通过 fonts.google.com 引入自定义字体：
html
<!-- 1. 在 <head> 中添加 Google Fonts 链接 -->
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet" />
<!-- 2. 在 CSS 中使用 -->
<style>
h1 { font-family: "Libre Baskerville", serif; }
</style>链接位置
Google Fonts 的 <link> 标签应放在 <head> 内、<style> 标签 外部。
2.4 文本对齐（text-align）
css
h1 { text-align: center; }
p { text-align: right; }| 值 | 说明 |
|---|---|
left | 左对齐（默认） |
right | 右对齐 |
center | 居中对齐 |
start | 文字起始方向（国际化友好） |
end | 文字结束方向 |
三、🔍 CSS 检视（Chrome DevTools）
3.1 打开开发者工具
| 方式 | 操作 |
|---|---|
| 菜单 | Chrome → 更多工具 → 开发者工具 |
| 快捷键（Mac） | ⌘ + ⌥ + I |
| 快捷键（Win） | Ctrl + Shift + I 或 F12 |
| 右键菜单 | 右键元素 → 检查（Inspect） |
3.2 Elements → Styles 面板
- 选择元素：点击左上角箭头按钮 🔍，然后在页面上点击目标元素
- 查看样式：右侧 Styles 面板显示所有应用的 CSS 规则
- 来源追踪：每条规则旁标注了来源文件（如
styles.css:12） - 实时编辑：可以直接修改属性值，页面即时更新（不影响源文件）
- 切换开关：点击属性前的复选框可启用/禁用该规则
3.3 Computed 面板
显示元素 最终生效 的所有样式值，去除了被覆盖的冲突规则。当 Styles 面板中有大量划线（被覆盖）的规则时，Computed 面板一目了然。
3.4 CSS Overview
菜单路径：DevTools 三点菜单 → More Tools → CSS Overview
| 功能 | 说明 |
|---|---|
| 颜色总览 | 页面使用的所有背景色、文字色 |
| 字体总览 | 页面使用的所有字体族、大小 |
实用场景
遇到喜欢的网站，用 CSS Overview 快速获取其配色方案和字体选择。
3.5 重要提醒
在 DevTools 中做的所有修改都是 临时的，仅影响当前浏览器会话中的本地副本，不会 修改服务器上的文件或影响其他用户。