下面是一份适合整理为技术专栏或学习笔记的内容示例。📒
【H5 前端开发笔记】第 13 期：CSS 层叠样式表的编写位置与使用规范
在前一篇中我们已经学习了 CSS 的基础概念和三种引入方式。
本期我们将进一步了解 CSS 样式的编写位置、优先级规则以及实际开发规范。
本期重点：
1️⃣ CSS 的编写位置
2️⃣ CSS 的层叠机制
3️⃣ CSS 优先级规则
4️⃣ 实际项目中的使用规范
一、CSS 的编写位置
CSS 样式可以写在 三个不同的位置：
1️⃣ 行内样式（Inline CSS）
2️⃣ 内部样式（Internal CSS）
3️⃣ 外部样式（External CSS）
二、行内样式（Inline Style）
行内样式直接写在 HTML 标签内部。
示例：
<p style="color:red;font-size:18px;">Hello CSS</p>
特点：
优点：
- 简单
- 可以快速测试样式
缺点：
- 代码耦合严重
- 不利于维护
- 无法复用
因此：
实际开发中不推荐使用行内样式。
三、内部样式（Internal Style）
内部样式写在 HTML 文档中的 <style> 标签里。
示例：
<head>
<style>
p{
color:blue;
font-size:20px;
}
</style>
</head>
特点：
优点：
- 可以统一控制页面样式
- 适合单页面开发
缺点：
- 不利于多页面复用
适用场景：
- 简单 demo
- 单页面项目
- 学习测试
四、外部样式（External CSS）
外部样式是 企业开发最常用方式。
步骤：
1 创建 CSS 文件
例如：
style.css
内容：
p{
color:green;
font-size:18px;
}
2 在 HTML 中引入
<link rel="stylesheet" href="style.css">
完整示例：
<head>
<link rel="stylesheet" href="style.css">
</head>
优点：
- 样式可以复用
- 代码结构清晰
- 维护成本低
- 页面加载效率更高
因此：
实际项目推荐使用外部样式表。
五、CSS 的层叠机制
CSS 中的 Cascading（层叠） 指的是：
当多个样式同时作用于同一个元素时，浏览器会根据 规则优先级 决定最终样式。
示例：
HTML：
<p class="text">Hello CSS</p>
CSS：
p{
color:red;
}
.text{
color:blue;
}
最终结果：
文字颜色：蓝色
因为 类选择器优先级更高。
六、CSS 优先级规则
CSS 优先级从低到高：
| 优先级 | 类型 |
|---|---|
| 1 | 标签选择器 |
| 2 | 类选择器 |
| 3 | ID选择器 |
| 4 | 行内样式 |
| 5 | !important |
示例：
p{
color:red;
}
.text{
color:blue;
}
#title{
color:green;
}
HTML：
<p id="title" class="text">Hello</p>
最终颜色：
绿色
因为 ID 选择器优先级更高。
七、!important 规则
CSS 提供了一个特殊规则：
!important
示例：
p{
color:red !important;
}
特点：
- 强制覆盖其他样式
- 优先级最高
注意：
项目中应尽量避免大量使用 !important，否则会造成样式混乱。
八、CSS 编写顺序建议
在 HTML 中引入 CSS 时，建议放在：
<head>
示例：
<head>
<meta charset="UTF-8">
<title>CSS示例</title>
<link rel="stylesheet" href="style.css">
</head>
原因：
- 浏览器可以 提前加载样式
- 页面不会出现 闪烁样式问题
九、CSS 编写规范
实际开发中通常遵循以下规范。
1 文件结构规范
常见项目结构：
project
│
├── index.html
├── css
│ └── style.css
├── js
│ └── main.js
└── images
这样结构更清晰。
2 命名规范
推荐使用 语义化命名。
例如：
正确：
.header
.nav
.footer
.product-list
不推荐：
.a
.box1
.test
3 样式分组
建议按照模块编写：
/* header */
.header{
}
/* navigation */
.nav{
}
/* content */
.content{
}
/* footer */
.footer{
}
这样更方便维护。
十、开发中的最佳实践
企业项目中通常遵循：
1️⃣ 全部使用外部 CSS 文件
2️⃣ 避免使用行内样式
3️⃣ 减少 !important 使用
4️⃣ 使用语义化类名
5️⃣ 按模块组织 CSS
这样可以：
- 提高代码可读性
- 提高维护效率
- 方便团队协作
十一、本期总结
CSS 编写位置：
| 方式 | 使用情况 |
|---|---|
| 行内样式 | 不推荐 |
| 内部样式 | 简单页面 |
| 外部样式 | 项目推荐 |
CSS 优先级：
标签 < 类 < ID < 行内样式 < !important
开发建议：
- 使用 外部 CSS
- 避免滥用 !important
- 使用 语义化命名
如果你需要，我可以继续帮你整理下一篇：
第 14 期：CSS选择器全面详解（标签 / 类 / ID / 后代 / 子代 / 伪类）
这是 CSS 学习中最核心的一章之一，也是前端面试的高频考点。🚀
