第2章 为网页穿上"衣服"

CSS让素面朝天的HTML容光焕发 ｜ 课型：实习课 ｜ 建议课时：2节

🏠 返回总目录 / 第2章

🎯 学习目标

知识目标

  • 理解CSS的作用与三种引入方式（行内/内部/外部）
  • 掌握颜色、背景、字体、字号等基础样式属性
  • 掌握CSS常用单位：px、rem、em、vw、%

能力目标

  • 能用内部样式表为网页设置颜色与背景
  • 能用开发者工具实时调试样式
  • 能根据场景选择合适的CSS单位

德育目标

  • 培养审美意识与"细节决定品质"的工匠精神
  • 理解内容与表现分离的专业分工思想

教学重点

  • CSS三种引入方式
  • color、background、font系列属性

教学难点

  • 理解样式优先级：行内>内部>外部
  • rem与em的区别及响应式意义

💻 实例演示1个实例 · 可在线运行

▶ 一键换装：美化前后对比

点击按钮切换"素颜/盛装"两种状态，直观感受CSS的威力。

新窗口运行 下载源码

操作步骤

  1. 打开demo1.html，先观察"素颜"状态
  2. 点击右上角"一键换装"按钮，观察变化
  3. 用开发者工具查看.dressed类下新增的所有样式
  4. 尝试修改渐变颜色为其他色值
  5. 修改letter-spacing观察字间距变化

效果观察点

  • HTML结构完全未变，仅切换class即改头换面
  • transition让变化平滑过渡
  • 渐变色、圆角、阴影均由CSS实现
查看核心代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>一键换装：CSS的威力</title>
<style>
  body { font-family: "Microsoft YaHei", sans-serif; margin: 0; transition: all .5s; }
  body.dressed { background: linear-gradient(135deg, #0e2a3c, #1b5a7a); color: #fff; }
  main { max-width: 640px; margin: 40px auto; padding: 0 20px; }
  .dressed h1 { color: #38d6c4; letter-spacing: 4px; }
  .dressed .card { background: rgba(255,255,255,.08); border-radius: 16px;
                   padding: 24px; box-shadow: 0 8px 30px rgba(0,0,0,.3); }
  .dressed p { line-height: 1.9; }
  button { position: fixed; top: 16px; right: 16px; padding: 10px 20px;
           border: none; border-radius: 8px; background: #c77728; color: #fff;
           font-size: 15px; cursor: pointer; }
</style>
</head>
<body>
  <button onclick="document.body.classList.toggle('dressed')">一键换装</button>
  <main>
    <h1>我的爱好</h1>
    <div class="card">
      <p>我喜欢编程，因为代码能创造出无限可能。</p>
      <p>同一个HTML，穿上CSS这件衣服，气质完全不同。</p>
    </div>
  </main>
</body>
</html>

📋 实习任务书

任务目标：为上一章页面添加完整内部样式表，掌握CSS基础属性

任务内容与评分
任务1：为页面添加<style>区域并设置背景色（15分）
任务2：设置标题颜色、居中、字间距（20分）
任务3：设置正文字体、字号、1.8倍行高（20分）
任务4：用开发者工具实时调试出满意配色并记录色值（20分）
任务5：对比实验：同一内容分别用px和rem设置字号并观察（25分）

自我评价

📚 课后作业与预习