3. 颜色与文本样式

这是什么：颜色与文本样式 = 用 color、background-color、font-size、line-height 给页面上色、把文字排整齐。

为什么用：掌握了选择器，接着学会最常用的样式：给页面配色和排版文字——不会这两手，页面能显示却不好看。

如何用：先从颜色的四种写法（颜色名 / HEX / RGB / HSL）里挑一个，再给文字设上字号和行高。

3.1 颜色的四种表示法

写法	含义	示例
颜色名	英文单词	`red`、`steelblue`
HEX	`#` 加 6 位十六进制	`#ff6600`
RGB	红绿蓝数值 0~255	`rgb(255, 102, 0)`
HSL	色相饱和度亮度	`hsl(24, 100%, 50%)`

h1 { color: steelblue; }        /* 蓝色标题 */
p  { color: #333333; }          /* 深灰正文，比纯黑柔和 */

实际开发多用 HEX（设计师给的色值直接抄）。需要透明度时在 HEX 加两位：#33333380，或用 rgba(51, 51, 51, 0.5)。

背景的写法相同，只是属性换成 background-color：

body { background-color: #f5f5f5; }

3.2 字体三件套：font-family / size / weight

body {
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 16px;
  font-weight: normal;
}

font-family 从前往后备选，找不到就自动降级；下 "sans-serif" 是兜底无衬线体
font-size 常用单位：px（固定像素）、rem（相对根字号，适合响应式）
font-weight：normal（400）到 bold（700），标题默认就是 bold

3.3 文本排版四件套：对齐 / 行高 / 间距 / 装饰

p {
  text-align: justify;   /* 两端对齐：left / center / right / justify */
  line-height: 1.8;      /* 行高：1.8 倍字号，阅读最舒服 */
  letter-spacing: 1px;   /* 字间距 */
  text-decoration: underline; /* 装饰线：underline / none */
}

行高给 1.5~1.8 倍，长段落不憋闷——这是排版中性价比超高的一条规则。

3.4 案例：给文章配一版「舒服的文本」

article {
  max-width: 680px;      /* 每行别太长 */
  margin: 0 auto;        /* 居中 */
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}
article h2 {
  font-size: 22px;
  color: steelblue;
  margin-top: 2em;       /* 标题距离上一段远一点 */
}

你会看到：一段正文变成长行不拥挤、有呼吸感的文章排版。

3.5 动手改

把 article 的宽改成 400px，观察行长变化
把 line-height 改成 1.2 和 2.4，对比阅读感受
给 h2 加 text-align: center，标题居中

3.6 小结

颜色通常写 HEX，透明度加后两位或用 rgba
字体：font-family 备选列表兜底，字号 px / rem
排版：line-height: 1.8 + max-width 限行宽，是长文阅读的基本功课

下一章：盒模型 🐸