CSS: CSS 引入方式
CSS 样式可以通过三种方式引入到 HTML 文档中：行内样式、内嵌样式和外链样式。每种方式各有适用场景。
✅ 最佳实践： 生产环境推荐用外链样式（
<link>）。它让 HTML 和 CSS 完全分离，浏览器还能缓存 CSS 文件，多页面共享时加载速度更快。
1. 行内样式（内联样式）
行内样式是直接把 CSS 写在 HTML 标签的 style 属性中。
▶ 示例
HTML
<p>这段文字是红色，18像素</p>
<div style="width: 200px; height: 100px; background: blue;">
这是一个蓝色方块
</div>
特点：
- 只作用于当前元素
- 优先级最高（会覆盖其他方式定义的样式）
- 无法复用，不适合大规模使用
- 适合快速测试或临时调整
适用场景： 极少使用。可能用在一些需要动态通过 JavaScript 修改样式的场景。
2. 内嵌样式
内嵌样式是把 CSS 写在 HTML 文档的 <head> 标签内，用 <style> 标签包裹。
▶ 示例
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内嵌样式示例</title>
<style>
p {
color: red;
font-size: 16px;
}
h1 {
color: blue;
text-align: center;
}
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>段落文字</p>
<p>这段文字有高亮背景效果</p>
</body>
</html>
特点：
- 样式在当前页面内复用（多个元素可共用）
- 结构和样式在同一文件中，方便单页管理
- 其他页面无法共享这些样式
- 适合单页项目或学习练习
3. 外链样式（外部样式表）
外链样式是把 CSS 写在一个单独的 .css 文件中，然后用 <link> 标签引入到 HTML 中。这是实际开发中最常用的方式。
HTML 文件：
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>外链样式示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>这段文字的样式来自外部CSS文件</p>
</body>
</html>
style.css 文件：
CSS
p {
color: red;
font-size: 16px;
line-height: 1.8;
}
特点：
- 结构与样式完全分离
- 一个 CSS 文件可被多个页面共享
- 修改一个 CSS 文件就能影响所有引用它的页面
- 浏览器可缓存 CSS 文件，提高加载速度
- 是企业级开发的标准做法
(1) @import 方式（了解即可）
⚠️ 注意：
@import 会在 CSS 文件加载完成后再去加载被引入的文件，导致页面出现"无样式闪烁"。现代项目中已基本淘汰，统一用 <link> 替代。
除了 <link> 标签，还可以在 CSS 文件中用 @import 导入其他 CSS 文件：
▶ 示例
HTML
<style>
@import url("reset.css");
@import url("layout.css");
p {
color: red;
}
</style>
<p>这是一个段落示例。</p>
但这种方式的性能不如 <link> 标签，不建议使用。
4. 三种方式的对比
| 特性 | 行内样式 | 内嵌样式 | 外链样式 |
|---|---|---|---|
| 复用性 | 不复用 | 单页复用 | 多页共享 |
| 结构与样式分离 | ❌ 完全混合 | ✅ 分离（同文件） | ✅ 完全分离 |
| 优先级 | 最高 | 中等 | 最低 |
| 加载性能 | 无额外请求 | 无额外请求 | 需额外HTTP请求 |
| 推荐程度 | ⭐ | ⭐⭐ | ⭐⭐⭐⭐⭐ |
5. 优先级关系
当三种方式同时出现时，优先级规则是：
行内样式 > 内嵌样式 > 外链样式
注意：这里说的是引入方式的优先级，跟选择器权重是两回事。选择器权重在"同一引入方式内部"比较，而当不同引入方式的样式冲突时，才看引入方式的优先级。
❓ 常见问题
Q 三种 CSS 引入方式各适合什么场景？
A 外链样式是生产环境的标准做法（多个页面共享一个 .css 文件，浏览器缓存快）；内嵌样式适合单页应用或首页首屏样式；行内样式只建议临时调试用，不要在正式项目中大量使用。
Q link 引入和 @import 有什么区别？
A link 是 HTML 标签，@import 是 CSS 语法。link 和 HTML 同时加载，@import 要等 CSS 文件下载完才加载被引用的文件，速度慢。link 是推荐做法。
Q 行内样式优先级是不是最高？
A 行内样式优先级确实很高，但用
!important 可以盖过它。建议优先用选择器权重来管理样式，不要依赖 !important，否则后期维护很痛苦。📖 小节
- 三种引入方式各有用途：行内样式极少用但优先级最高，内嵌样式适合单页小项目，外链样式是实际开发的主流选择
- 记住一个原则：尽量使用外链样式，这样可以最大化代码复用和可维护性
- 在实际工作中，你可能会看到项目里有一个或多个 CSS 文件，通过
<link>标签统一引入
📝 作业
- 创建一个 HTML 文件，分别用行内、内嵌、外链三种方式设置不同的样式。
- 创建一个外部的
style.css文件，在里面定义段落颜色和标题样式，然后在 HTML 中引入。 - 在同一个元素上同时使用三种方式设置相同属性（比如
color），观察哪种方式最终生效，验证优先级规则。 - 修改
style.css文件中的颜色，刷新浏览器观察变化，体会外链样式的维护便利性。
