在网页开发过程中，引入css文件是实现页面样式分离、提升代码可维护性的核心操作，不同的引入方式对应不同的使用场景和特性，开发者需要根据实际需求选择合适的方法。
使用link标签引入css文件
这是最常用、也是官方推荐的引入css文件的方式，通过HTML的<link>标签在文档的<head>区域声明外部样式表。这种方式支持所有主流浏览器，并且会在页面加载时同步加载css文件，不会阻塞页面渲染的逻辑顺序。
基本语法格式如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>link引入css示例</title>
<!-- 引入外部css文件 -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="content">这是一段测试文本</div>
</body>
</html>
其中<link>标签的核心属性说明：
- rel：必须设置为stylesheet，表示当前链接的资源是样式表
- type：指定资源类型为text/css，HTML5中该属性可省略
- href：指定css文件的路径，支持相对路径和绝对路径
使用@import规则引入css文件
@import是CSS提供的引入外部样式表的规则，需要写在<style>标签内部或者css文件的开头位置，浏览器会在加载完当前css文件之后再加载@import引入的文件，可能会导致页面样式闪烁的问题。
基本使用示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>@import引入css示例</title>
<style>
/* 在style标签内使用@import引入外部css */
@import url("reset.css");
@import "base.css";
</style>
</head>
<body>
<div class="box">测试内容</div>
</body>
</html>
@import的两种写法都合法，url()可以省略，但是需要注意@import必须放在所有其他CSS规则之前，否则不会生效。另外@import不支持古老的IE5及以下版本浏览器，兼容性不如link标签。
两种引入方式的对比
为了更清晰地了解两种引入方式的差异，我们可以通过表格对比核心特性：
| 对比维度 | link标签引入 | @import引入 |
|---|---|---|
| 加载顺序 | 页面加载时同步加载css | 先加载当前css，再加载引入的css |
| 兼容性 | 所有浏览器支持 | 不支持IE5及以下版本 |
| DOM操作 | 支持通过JS修改link标签属性控制样式 | 不支持通过JS直接操作 |
| 使用场景 | 常规外部样式引入 | css文件内部拆分引入 |
特殊场景的引入方式
除了上述两种常规方式，还有一些特殊场景的引入方法：
内联样式中引入（不推荐）
可以在元素的style属性中直接写样式，但是这种方式无法引入外部css文件，只能写内联样式，不符合样式分离的原则，仅适合临时调试使用。
<div style="color: red; font-size: 16px;">内联样式文本</div>
JS动态引入css文件
如果需要根据用户操作动态加载css文件，可以通过JS创建link标签并插入到head中，示例代码如下：
// 动态引入css文件的函数
function loadCss(url) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
document.head.appendChild(link);
}
// 调用函数引入css
loadCss("dynamic.css");
引入css文件的注意事项
- css文件路径要正确，相对路径是相对于当前HTML文件的位置，绝对路径要确保地址可访问，本地开发可以使用127.0.0.1作为本地服务地址
- 同一个页面可以引入多个css文件，后引入的样式会覆盖前面同优先级的样式
- 不要混合过多引入方式，避免样式优先级混乱，建议统一使用link标签作为主要的引入方式
- 如果css文件中有中文字符，建议将css文件保存为UTF-8编码，避免样式乱码