第 02 节 · 用 CSS 让它好看

颜色、字体、布局。CSS 是审美工具的入门版。

步骤

在 <head> 里加一段 <style>：
```
<style>
  body {
    font-family: sans-serif;
    max-width: 600px;
    margin: 4rem auto;
```
第 1 块 · 设置网页的整体布局

body { ... } 就是给整个网页身体定规则。font-family: sans-serif = 用无衬线字体（现代、清爽）。max-width: 600px = 内容宽度最多 600px（不要全屏铺开，那样很难看）。margin: 4rem auto = 上下 4 倍字号的空白，左右自动居中。

👉 试改：把 max-width: 600px 改成 max-width: 800px 或 max-width: 400px，看网页的宽度怎么变。
```
    background: #FAF4DF;
    padding: 0 1rem;
  }
```
第 2 块 · 背景色和内边距

background: #FAF4DF = 网页背景色是米黄色（这个颜色代码很温暖）。padding: 0 1rem = 上下没有内边距，左右各 1 倍字号的内边距（给文字留点喘气的空间）。

💡 颜色代码：# 后面 6 个数字/字母就是色号。#FAF4DF 这种米色很适合"温暖教育"的感觉。

👉 试改：改成 background: white 或 background: #E0F2FE（淡蓝色），看哪个你喜欢。
```
  h1 { color: #DC5C44; }
  p { line-height: 1.8; }
</style>
```
第 3 块 · 标题和段落的细节

h1 { color: #DC5C44; } = 所有 h1 标题都用这个红橘色。p { line-height: 1.8; } = 所有段落的行间距是 1.8 倍字号（充足的空间让文字易读）。</style> 关闭这个样式块。

💡 为什么 line-height 要 1.8？太紧凑（1.0）让眼睛疲劳；太稀疏（2.5）会显得内容不连贯。1.6-1.8 是黄金比例。

👉 试改：把 line-height: 1.8 改成 line-height: 1.2，感受"拥挤"的感觉。
📋 看 / 复制完整代码
```
<style>
  body {
    font-family: sans-serif;
    max-width: 600px;
    margin: 4rem auto;
    background: #FAF4DF;
    padding: 0 1rem;
  }
  h1 { color: #DC5C44; }
  p { line-height: 1.8; }
</style>
```
刷新浏览器 —— 网页变好看了。
玩颜色：把 #DC5C44 换成 #5598AD、#D69830、#2A5C8C。
问 Qwen Chat："给我推荐 3 套米黄+墨蓝色的 CSS 方案。"

动手练习 1：用颜色和字体让文字更漂亮

动手 CSS 让网页好看

任务：改改下面网页里 <style> 标签的 CSS。试试改色号 (color)、改字号 (font-size)、改字体 (font-family)。按"运行"看效果。可以试试 color: tomato / gold / steelblue，或者试试 font-size: 32px 或 48px。

参考答案

这是一个彩色升级版。注意看 CSS 规则的变化：

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 标题用大字、金黄色、花体字 */
    h1 {
      color: #ff6b6b;
      font-size: 48px;
      font-family: cursive;
      background: #fffbe7;
      padding: 10px;
      border-radius: 8px;
    }
    /* 段落用较小的字、深灰色 */
    p {
      color: #555;
      font-size: 18px;
      line-height: 1.8;
    }
  </style>
</head>
<body>
  <h1>这是标题</h1>
  <p>这是一个段落。用 CSS 我就可以改它的颜色、大小、背景和很多其他东西。</p>
</body>
</html>

新概念：background（背景）、padding（内边距）、border-radius（圆角）。试试自己改这些值！

动手练习 2：做一个彩色卡片

动手设计你的卡片

任务：从零设计一个卡片。要求：① 有一个标题；② 有描述文字；③ 用 CSS 给它上色、加边框、加圆角。让它看起来像一张真的卡片。

参考答案

一个漂亮的卡片设计。注意 CSS 的组织 —— 先定义 .card 的通用样式，再定义它里面元素的样式：

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 40px;
      font-family: sans-serif;
    }
    .card {
      background: white;
      border-radius: 12px;
      padding: 24px;
      max-width: 350px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .card h2 {
      color: #667eea;
      margin: 0 0 12px 0;
      font-size: 24px;
    }
    .card p {
      color: #666;
      line-height: 1.6;
      margin: 0;
    }
  </style>
</head>
<body>
  <div class="card">
    <h2>欢迎来访</h2>
    <p>这个卡片用了渐变背景、阴影和圆角。CSS 的力量就在这些细节里。</p>
  </div>
</body>
</html>

进阶技巧：linear-gradient（渐变）、box-shadow（阴影）。这些都是 CSS 的核心工具。

动手练习 3：让两个卡片并排放

动手用 CSS 排列卡片

任务：下面的网页有两个卡片，但它们是上下排列。试试改 CSS，让它们并排显示。提示：看看 body 的 display 属性，可以试试改成 display: flex 或 display: grid。按"运行"看效果。

参考答案

改 .cards 的 display 属性就行。这里是用 flexbox 的做法：

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      padding: 20px;
      background: #f9f9f9;
    }
    .cards {
      display: flex;
      gap: 20px;
    }
    .card {
      background: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      flex: 1;
    }
    .card h3 {
      margin-top: 0;
      color: #333;
    }
  </style>
</head>
<body>
  <div class="cards">
    <div class="card">
      <h3>卡片一</h3>
      <p>这是第一个卡片，现在和另一个并排。</p>
    </div>
    <div class="card">
      <h3>卡片二</h3>
      <p>这是第二个卡片。用 flex: 1，它们会自动平均分宽度。</p>
    </div>
  </div>
</body>
</html>

关键技巧：display: flex 把容器变成"弹性盒"，里面的元素会自动并排。gap: 20px 是间距，flex: 1 是"平均分宽度"。

小测验：CSS 的作用

小测 CSS 是用来干什么的？

下面哪个说法最对？

CSS 是用来写网页内容的，比如文字和图片。
CSS 是用来"打扮"HTML 的 —— 控制颜色、字体、布局、动画等等。
没有 CSS，浏览器就没办法显示网页。

解释：HTML 定义"这是什么"（结构），CSS 定义"它长什么样"（样式）。分开写的好处是：改样式不用改内容，改内容不用改样式。这叫"关注点分离"。

小测 CSS 里 color 和 background 有什么区别？

下面哪个说法最对？

color 改文字颜色，background 改背景颜色。
color 和 background 是一样的，只是叫法不同。
color 用来改大小，background 用来改颜色。

解释：记住这个区别很重要。color: red 把文字变红，background: red 把背景变红。两个都改，就是"红文字、红背景"，但那样太丑了。设计就是在这些细节里均衡的艺术。

这一节学到什么

CSS 不是装饰 —— 是设计。同一段内容，用不同 CSS 包装，给人的感觉完全不同。

第 02 节 · 用 CSS 让它好看

步骤

第 1 块 · 设置网页的整体布局

第 2 块 · 背景色和内边距

第 3 块 · 标题和段落的细节

动手练习 1：用颜色和字体让文字更漂亮

动手练习 2：做一个彩色卡片

动手练习 3：让两个卡片并排放

小测验：CSS 的作用

这一节学到什么