下面是一份结构完整、适合做技术专栏或学习笔记的内容。📒
【H5 前端开发笔记】第 12 期：CSS基础介绍与使用3D视图查看网页层叠结构
在前面的内容中，我们学习了 HTML 的常用标签。
HTML 负责 网页结构（骨架），而 CSS 负责网页样式（外观）。
简单理解：
HTML = 身体结构
CSS = 外观样式
JavaScript = 行为动作
本期我们将学习：
1️⃣ CSS 基础概念
2️⃣ CSS 的三种使用方式
3️⃣ CSS 选择器基础
4️⃣ 浏览器 3D视图查看网页层级结构
一、什么是 CSS
CSS 全称：
Cascading Style Sheets
层叠样式表
作用：
- 控制网页 颜色
- 控制 字体
- 控制 布局
- 控制 动画
- 控制 响应式设计
例如：
HTML：
<p>Hello World</p>
CSS：
p{
color:red;
font-size:20px;
}
显示效果：
红色 20px 的 Hello World
二、CSS 基本语法
CSS 语法结构：
选择器 {
属性: 值;
}
示例：
p {
color: blue;
font-size: 18px;
}
说明：
| 部分 | 作用 |
|---|---|
| 选择器 | 选择 HTML 元素 |
| 属性 | 样式类型 |
| 值 | 样式具体内容 |
三、CSS 三种使用方式
CSS 有三种引入方式：
1️⃣ 行内样式
2️⃣ 内部样式
3️⃣ 外部样式（推荐）
四、行内样式（Inline CSS）
直接写在 HTML 标签中。
示例：
<p style="color:red;">Hello CSS</p>
特点：
优点：
- 简单
- 方便测试
缺点：
- 不利于维护
- 不利于复用
一般 不推荐用于正式项目。
五、内部样式（Internal CSS）
写在 <style> 标签中。
示例：
<head>
<style>
p{
color:green;
}
</style>
</head>
HTML：
<p>Hello CSS</p>
特点：
- 适合 单页面项目
- 多页面不方便维护
六、外部样式（External CSS）
推荐方式。
步骤：
1 创建 CSS 文件
style.css
内容：
p{
color:purple;
font-size:20px;
}
2 在 HTML 中引入
<link rel="stylesheet" href="style.css">
完整示例：
<head>
<link rel="stylesheet" href="style.css">
</head>
优点：
- 样式可复用
- 易维护
- 项目结构清晰
七、CSS 常见属性
1 颜色
color: red;
常见写法：
color: red;
color: #ff0000;
color: rgb(255,0,0);
2 字体大小
font-size: 16px;
3 背景颜色
background-color: yellow;
4 文本对齐
text-align: center;
八、浏览器开发者工具
现代浏览器都提供 开发者工具（DevTools）。
打开方式：
F12
功能：
- 查看 HTML 结构
- 查看 CSS 样式
- 调试 JavaScript
- 查看网络请求
这是 前端开发最重要的工具之一。
九、3D视图查看网页层叠结构
浏览器提供了一种非常直观的方式：
3D View（3D视图）
它可以让网页的 DOM 结构立体化显示。
类似：
HTML
├ div
│ ├ header
│ ├ nav
│ └ section
└ footer
通过 3D 视图，可以看到 网页元素的层叠关系。
十、Chrome 查看 3D 结构方法
早期 Chrome 提供 3D View 功能，现在可以通过 Layers 面板 查看。
步骤：
1️⃣ 打开开发者工具
F12
2️⃣ 点击：
More Tools
3️⃣ 选择：
Layers
即可看到 DOM 层级结构。
作用：
- 分析页面层级
- 查找布局问题
- 理解网页结构
十一、Firefox 3D View
在 Firefox 浏览器中曾经有一个非常著名的工具：
Tilt 3D View
可以把网页变成 立体结构图。
每个 HTML 标签会像 积木一样堆叠。
效果类似：
┌──────────────┐
│ header │
└──────────────┘
┌──────────┐
│ nav │
└──────────┘
┌──────┐
│main │
└──────┘
非常适合理解 DOM 层级结构。
十二、为什么理解 DOM 层级很重要
网页本质是一棵 DOM 树：
html
├ head
└ body
├ header
├ main
└ footer
CSS 的很多规则都和层级有关，例如：
- 继承
- 覆盖
- 层叠
- z-index
理解 DOM 结构对学习：
- CSS
- JavaScript
- Vue / React
都非常重要。
十三、本期总结
CSS 作用：
- 控制网页样式
- 控制布局
- 控制视觉效果
CSS 三种使用方式：
| 方式 | 推荐程度 |
|---|---|
| 行内样式 | 不推荐 |
| 内部样式 | 一般 |
| 外部样式 | 推荐 |
开发工具：
F12 → DevTools
可以：
- 查看 DOM
- 调试 CSS
- 查看页面层级
如果你愿意，我可以继续帮你整理下一篇：
第 13 期：CSS选择器详解（标签选择器 / 类选择器 / ID选择器 / 通配符）
这是 CSS 学习最核心的内容之一。
很多前端面试也会重点考察这一部分。🚀
