2.css的继承性，层叠性，优先级
1.继承性
### 🌱 什么是“继承性”？
想象一下：你家客厅墙上挂了一幅画，写着“全家人都要用黑色字体写字”。然后你家孩子在自己的房间里写作业，虽然这幅画不在他屋里，但他也自动用了黑色字。
这就是 **“继承”** —— 孩子（内部标签）**自动沿用了** 家长（外部标签）的某个规定。
在网页中：
- 爸妈 = 外层的 HTML 标签（比如 `<body>` 或 `<div>`）
- 孩子 = 里面的标签（比如 `<p>`、`<span>`、`<strong>`）
如果爸妈设置了某些“能被继承”的样式，孩子们不用单独设置，也会**自动长成那个样子**。
---
### ✅ 哪些样式能“传给后代”？（可继承的属性）
这些通常是跟**文字外观**有关的，因为一家人说话写字风格相似嘛！
| 属性 | 通俗解释 |
|------|----------|
| `color` | 字是什么颜色（比如黑色字） |
| `font-size` | 字有多大（比如 16px） |
| `font-family` | 用什么字体（比如微软雅黑、宋体） |
| `text-align` | 文字对齐方式（居中、左对齐等） |
| `line-height` | 行与行之间的高度（行间距） |
👉 **例子：**
```css
body {
color: blue;
font-family: "微软雅黑";
font-size: 18px;
}
```
你不需要给每个 `<p>`、`<span>`、`<div>` 单独设置颜色和字体，它们都会**自动变成蓝色、微软雅黑、18px大小**，就像孩子继承了父母的说话风格。
---
### ❌ 哪些样式不能“传给后代”？（不可继承的属性）
这些是**自己的个性装扮**，不会自动传下去。就像爸妈穿西装打领带，不代表孩子也要穿。
| 属性 | 通俗解释 |
|------|----------|
| `border` | 边框（比如红色边框）→ 是“自己画个圈”，别人看不到 |
| `padding` | 内边距（内容离边的距离）→ 是“我自己呼吸的空间” |
| `margin` | 外边距（和其他人之间的距离）→ 是“我和别人的社交距离” |
| `background` | 背景颜色或图片 → 是“我房间的墙纸”，孩子房间不是同一个墙 |
| `width` / `height` | 宽高 → 是“我自己的身材”，孩子长得不一样 |
👉 **例子：**
```css
div {
border: 2px solid red;
padding: 20px;
background: yellow;
}
```
即使你在 `<div>` 里放了一个 `<p>`，这个 `<p>` 不会自动有红边框、黄背景或内边距。它还是“素颜”的，除非你单独给它设置。
---
### 🧠 打个比方总结：
> 把网页看作一个**家庭族谱**：
>
> - **能继承的样式**：口音、写字风格、说话语气 → 孩子天生就会。
> - **不能继承的样式**：衣服、发型、身高体重、房间装修 → 每个人得自己打扮。
所以：
- 文字类样式（color, font…）在子标签内是可以自动继承的
- 盒子类样式（border, margin, padding…）在子标签内是不能自动继承的
---
### 💡 小提示：怎么知道能不能继承？
记住一句话：
> **凡是“写出来的内容”相关的，一般能继承；
> 凡是“盒子本身的样子”相关的，一般不能继承。**
---
2.层叠性
> 💡 CSS 的“层叠性”就是这样：
> **谁在最后，谁最显眼，谁说了算！**
---
### ✅ 真实例子：改字体颜色
假设你有一个网站，所有页面都用同一个 CSS 文件：
```css
/* 全局样式：common.css */
h1 {
color: blue; /* 标题默认是蓝色 */
}
```
但现在，有一个特别的页面，你想让标题变成红色：
```css
/* 特殊页面样式：special.css */
h1 {
color: red; /* 我就要红色！ */
}
```
你在 HTML 里这样引入：
```html
<link rel="stylesheet" href="common.css"> <!-- 先加载 -->
<link rel="stylesheet" href="special.css"> <!-- 后加载 -->
```
👉 浏览器会怎么处理？
它会说：“同一个 `h1`，颜色设了两次？那我听**最后一个**的。”
✅ 最终效果：标题是 **红色**！
---
### 🧱 再打个比方：贴海报
你在墙上贴了一张海报：“禁止喧哗”（蓝色字）。
第二天，你觉得不够醒目，又在它上面贴了一张新海报：“**请安静！**”（红色大字）。
结果呢？
原来那张被盖住了，大家只看到新的。
> 🔁 后贴的覆盖先贴的 —— 这就是“层叠”！
---
### ✅ 为什么这很有用？
想象一个网站有 100 个页面，它们都用同一套“基础样式”（比如字体、颜色、布局）。
但其中有一个页面是节日活动页，你想让它**标题更大、颜色更喜庆**。
你不需要从头写一套样式，只需要：
1. 保留原来的通用样式（基础装修）
2. 再加一点点“新样式”覆盖你想改的地方（后期装饰）
👉 浏览器自动把它们“叠”起来，显示最终效果。
---
### ⚠️ 注意：顺序很重要！
CSS 的“谁在后面，谁赢”规则，就像排队：
- 后来的插队成功，站到最后。
- 显示的时候，它最靠前，最显眼。
所以：
- 后引入的 CSS 文件 会覆盖前面的
- 同一个文件里，下面写的样式 会覆盖上面的
---
### ✅ 总结一句话（超通俗版）：
> CSS 的“层叠性”就像穿衣服：
> 你先穿了件蓝T恤，又套了件红外套，别人看到的是**外面那件红的**。
> 哪个样式“穿”在最后，哪个就露在外面，**谁最后打扮，谁说了算！**
---
✅ 所以记住：
> 多次设置同一个样式？
> 👉 **最后一个生效！**
这就是“层叠”的魔力：**灵活、可覆盖、方便定制**，让网页既能统一风格，又能个性发挥！😎
3.优先级