在CSS样式引入的体系中，内链式、外链式和嵌入式是三种最基础的实现方式，三者在写法、作用范围、优先级等方面都存在明显差异，理解这些差异是前端开发的基础能力。
三种CSS引入方式的定义与写法
嵌入式
嵌入式也叫内部样式表，是将CSS代码直接写在HTML文档的<style>标签内部，通常<style>标签会放在<head>标签中。这种方式的样式仅对当前HTML文档生效。
示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>嵌入式CSS示例</title>
<style>
/* 嵌入式样式，仅当前页面生效 */
.content {
color: #333;
font-size: 16px;
}
</style>
</head>
<body>
<div class="content">这是嵌入式样式渲染的内容</div>
</body>
</html>
外链式
外链式也叫外部样式表，是将CSS代码单独写在一个.css后缀的文件中，然后通过HTML的<link>标签引入到当前文档中。这种方式的样式可以被多个HTML文档复用。
首先是独立的style.css文件内容：
/* 外部CSS文件内容 */
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
}
然后是HTML引入代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>外链式CSS示例</title>
<!-- 引入外部CSS文件 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">这是外链式样式渲染的内容</div>
</body>
</html>
内链式
内链式也叫行内样式，是将CSS样式直接通过style属性写在HTML元素的标签上，这种样式仅对当前单个元素生效，优先级最高。
示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内链式CSS示例</title>
</head>
<body>
<!-- 内链式样式，仅当前p标签生效 -->
<p style="color: red; font-weight: bold;">这是内链式样式渲染的内容</p>
</body>
</html>
三者的核心区别对比
我们可以从作用范围、优先级、代码复用性、适用场景等多个维度对比三者的差异，具体如下表：
| 对比维度 | 嵌入式 | 外链式 | 内链式 |
|---|---|---|---|
| 作用范围 | 仅当前HTML文档 | 所有引入该CSS文件的HTML文档 | 仅当前单个HTML元素 |
| 优先级 | 低于内链式，高于继承样式 | 低于内链式和嵌入式（同权重下），高于继承样式 | 最高，高于嵌入式和外链式 |
| 代码复用性 | 差，仅能在当前页面使用 | 好，可被多个页面复用 | 极差，仅能作用于单个元素 |
| 维护成本 | 中，修改需要改当前页面代码 | 低，修改CSS文件即可影响所有引入页面 | 高，修改需要逐个改元素标签 |
| 适用场景 | 单个页面的独有样式、临时调试 | 多页面通用的公共样式、正式项目开发 | 单个元素的特殊样式、临时覆盖其他样式 |
优先级验证示例
我们可以通过一段代码验证三者的优先级顺序，内链式样式会覆盖嵌入式和外链式的同属性样式：
外部test.css文件内容：
/* 外部样式设置文字为蓝色 */
.text {
color: blue;
}
HTML代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>优先级验证</title>
<link rel="stylesheet" href="test.css">
<style>
/* 嵌入式样式设置文字为绿色 */
.text {
color: green;
}
</style>
</head>
<body>
<!-- 内链式样式设置文字为红色 -->
<div class="text" style="color: red;">最终文字颜色为红色</div>
</body>
</html>
上述代码中，三个方式都设置了color属性，最终元素会显示红色，证明内链式优先级最高，嵌入式优先级高于外链式（同权重下）。
实际开发中的选择建议
在正式的前端项目开发中，优先选择外链式引入CSS，因为外链式可以让样式和HTML结构分离，提升代码的可维护性和复用性，也方便浏览器缓存CSS文件，提升页面加载速度。
嵌入式适合用在单个页面的独有样式场景，比如某个页面有特殊的交互样式，不需要其他页面复用，就可以用嵌入式写在当前页面中，避免新增不必要的CSS文件。
内链式尽量少用，因为内链式会让HTML结构和样式耦合，不利于维护，只有在需要临时覆盖某个元素的样式，或者做快速调试的时候才考虑使用内链式。