🎨 第二课：CSS — 让网页变漂亮

CSS = Cascading Style Sheets（层叠样式表）

如果说 HTML 是房子的结构（墙、门、窗），那 CSS 就是装修（颜色、大小、位置）。

📝 1. CSS 能改变什么？

把鼠标移上去看看效果：

❌ 没加 CSS：

我就是一段普通文字

✅ 加了 CSS：

我变漂亮了！把鼠标移到我身上试试

上面两段文字用的是同一个 HTML，区别只是 CSS 不同。

📍 2. CSS 写在哪里？（三种方式）

方式一：行内样式（写在标签里）

<p style="color: red; font-size: 20px;">红色大字</p>

👈 效果：红色大字

✅ 简单直接 | ❌ 不方便批量修改

方式二：内部样式表（写在 <style> 标签里）

放在 <head> 里面，本页面通用。你正在看的这个页面就是用这种方式。

方式三：外部样式表（单独的 .css 文件）

<link rel="stylesheet" href="style.css">

✅ 多个页面共享一套样式 | ✅ 最推荐的做法

🧬 3. CSS 的语法（一条规则长这样）

h1 {
  color: blue;
  font-size: 28px;
}

选择器 — 选中"谁"要变（比如所有 <h1>）

属性: 值; — 改成什么样

每条规则 = 选择器 + { 属性: 值; 属性: 值; ... }

🎯 4. 最常用的 CSS 属性

🔴 颜色：color 和 background

#ef4444 #22c55e #3b82f6 #f59e0b #8b5cf6

颜色可以用 英文名（red, blue）、十六进制（#ff0000）、RGB（rgb(255,0,0)）来表示。

✍️ 文字：font-size、font-weight、text-align

font-size: 12px — 小字

font-size: 24px — 大字

font-weight: bold — 粗体

text-align: center — 居中

📏 间距：margin（外边距）和 padding（内边距）

这是 CSS 里最重要也最容易搞混的概念：

margin
元素与元素之间的距离
padding
内容与边框之间的距离

我是内容

🏷️ 5. 常用选择器

选择器写法选中什么示例
标签选择器p { }所有 <p> 标签全部段落统一风格
类选择器.card { }所有 class="card" 的元素卡片样式（最常用！）
ID 选择器#header { }id="header" 的元素（唯一）页面唯一元素
后代选择器.card p { }.card 里面的所有 <p>卡片里的段落

💡 最重要的选择器：类选择器（class）
给 HTML 标签加 class="名字"，然后在 CSS 里用 .名字 { } 来选中它。
这个页面里的卡片、提示框、按钮，全都是用 class 控制的。去 <style> 里找找看！

🛠️ 6. 动手试一试！

  1. 用记事本打开 C:\Users\HP\lesson1\lesson2-css.html
  2. 找到 <style> 标签（大约在第 7 行到 100 多行）
  3. 试试改下面这些值，保存后刷新浏览器看变化：
✏️ 三个小挑战：
① 把 h1 { color: #db2777; } 的颜色改成 #059669（墨绿色）
② 把 .card 的 border-radius 从 12px 改成 30px
③ 给 body 加一行 background: #1e1e2e;（暗色背景）

📋 7. 今日总结

CSS 属性作用示例
color文字颜色color: red;
background背景色background: #f0f0f0;
font-size字号font-size: 18px;
font-weight粗细font-weight: bold;
text-align对齐text-align: center;
margin外边距margin: 20px;
padding内边距padding: 15px;
border边框border: 2px solid blue;
border-radius圆角border-radius: 10px;
width / height宽 / 高width: 300px;

✅ 下一步？

学完 HTML 结构 + CSS 样式，你已经可以做出漂亮的静态页面了！

下一课是 JavaScript——让网页"活"起来：点击按钮、弹出提示、动态改内容。

准备好后说 "下一课" 🚀