这段文字是红色的,背景是黄色的
```
**适用场景**: 临时测试、快速原型。不推荐在生产代码中使用。
**方式二: 内部样式** (写在户型图背面)
```html
这段文字是红色
```
**适用场景**: 单页应用、组件的专属样式。
**方式三: 外部样式** (请专业装修公司) ⭐
```html
```
```css
/* styles.css 文件 */
.red-text {
color: red;
}
```
**适用场景**: 所有正规项目。优点是可以复用、易于维护、浏览器会缓存。
### 3.3 CSS 如何找到 HTML?选择器的工作原理
新手最容易晕的地方是:"CSS 写的 `.card`、`#btn`、`p` 到底是怎么跟 HTML 对应上的?"
这就像老师在班级里点名,有三种点法:
**1. 喊"所有人"(标签选择器)**
```css
p {
color: red;
}
```
喊"所有同学",全班同学都要站起来。这里所有 `` 标签的元素都会变成红色。 **2. 喊"小组名"(类选择器 class)** ```css .highlight { background: yellow; } ``` 喊"英语课代表",可能有几个同学都是。所有 `class="highlight"` 的元素背景都会变黄。 **3. 喊"学号"(ID 选择器)** ```css #submit-btn { background: blue; } ``` 喊"2024001",全班只有一个。只有 `id="submit-btn"` 的元素会变蓝。 ::: tip 💡 优先级:谁听谁的? 如果一个元素同时被多个选择器选中,怎么办? ```html
这段文字是什么颜色?
``` ```css p { color: red; } /* 优先级: 1 */ .highlight { color: yellow; } /* 优先级: 10 */ #special-para { color: blue; } /* 优先级: 100 */ ``` **答案**: 蓝色。ID 选择器优先级最高,类选择器次之,标签选择器最低。 **内联样式**(写在 style 属性里)优先级是 1000,最高! ::: ### 3.4 CSS 的"三明治":盒模型 每个 HTML 元素在 CSS 中都被看作一个"盒子",由四层组成: ``` ┌──────────────────────────────────┐ │ margin (外边距) │ ← 盒子之间的距离 │ ┌─────────────────────────┐ │ │ │ border (边框) │ │ ← 盒子的外壳 │ │ ┌───────────────────┐ │ │ │ │ │ padding (内边距) │ │ │ ← 内容到边框的距离 │ │ │ ┌─────────────┐ │ │ │ │ │ │ │ content │ │ │ │ ← 实际内容(文字/图片) │ │ │ └─────────────┘ │ │ │ │ │ └───────────────────┘ │ │ │ └─────────────────────────┘ │ └──────────────────────────────────┘ ``` **总宽度计算**: ```css width: 200px; padding: 10px; /* 左右各 10px */ border: 5px; /* 左右各 5px */ margin: 20px; /* 左右各 20px */ ``` **元素实际占据的宽度** = 20 + 5 + 10 + 200 + 10 + 5 + 20 = **270px** ::: warning ⚠️ 常见错误:宽度对不上 新手常问:"我设置了 `width: 200px`,为什么测量出来是 270px?" 因为你没有算上 padding、border、margin! **解决方案**: ```css .box { box-sizing: border-box; /* 让 width 包含 padding 和 border */ width: 200px; padding: 10px; border: 5px; } ``` 这样,`width: 200px` 就是最终宽度,padding 和 border 会"挤"在里面。 ::: 🎯 动手试试看： 下面这个演示让你调节 padding、border 和 margin,实时看到盒模型的变化和总宽度计算：欢迎
└─
├─
└─
└─一段文字
``` 这棵树就叫 **DOM 树**。每个 HTML 标签都是这棵树上的一个"节点"。 ### 5.2 为什么叫"对象模型"(Object Model)? 因为在 JavaScript 眼里,HTML 标签不仅仅是标签,而是**对象 (Object)**。它们有**属性**(可以读/写的数据)和**方法**(可以执行的动作)。 **属性 (Property)**: 节点的"数据" ```javascript imgElement.src = 'photo.jpg' // 修改图片地址 divElement.className = 'box' // 修改类名 inputElement.value = '123' // 修改输入框的值 ``` **方法 (Method)**: 节点的"动作" ```javascript buttonElement.click() // 模拟点击 divElement.remove() // 删除元素 bodyElement.appendChild(newDiv) // 添加子元素 ``` ### 5.3 怎么找节点?(DOM 查询) 就像在族谱里找人一样,JavaScript 提供了很多方法: **按"身份证"找**(ID): ```javascript const element = document.getElementById('header') // 全局唯一,速度最快 ``` **按"特征"找**(选择器): ```javascript // 找到第一个匹配的元素 const element = document.querySelector('.card h2') // 找到所有匹配的元素 const elements = document.querySelectorAll('button') ``` **按"关系"找**: ```javascript element.parentNode // 找爸爸 element.children // 找孩子 element.nextElementSibling // 找下一个兄弟 ``` ### 5.4 性能警告:不要频繁"拆家" 操作 DOM 是很**贵**的。每次你修改 DOM(比如改大小、改位置),浏览器都要: 1. **重新计算排版** (Reflow) 2. **重新绘制** (Repaint) 这两个操作都很耗时。 ::: warning ⚠️ 低效操作 ```javascript // ❌ 低效:循环 1000 次,每次都操作 DOM for (let i = 0; i < 1000; i++) { document.body.appendChild(createDiv()) } ``` **为什么会慢?** 每次appendChild,浏览器都要重新计算整页布局,1000 次就是 1000 次重排! ::: ::: tip ✅ 高效操作 ```javascript // ✅ 高效:先拼好,一次性插入 const fragment = document.createDocumentFragment() for (let i = 0; i < 1000; i++) { fragment.appendChild(createDiv()) } document.body.appendChild(fragment) // 只触发一次重排 ``` 这也正是 **Vue / React** 等现代框架诞生的原因: 它们在内存里玩"虚拟 DOM",计算好最小修改量,最后才去动真正的 DOM,从而保护了性能。 ::: 🎯 动手试试看： 下面这个演示展示了 DOM 操作的基本方法。你可以修改标题文字、切换高亮样式，并看到对应的 JavaScript 代码：标题
欢迎
点击按钮改变标题!