在html中引入CSS文件时，link和@import是两种常见的方式，二者在加载逻辑、使用限制、兼容性等方面存在明显差异，下面从多个维度展开说明。
link引入CSS的基本用法
link是html原生的标签，用于在文档中引入外部资源，引入CSS时的标准写法如下：
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
link标签的rel属性指定资源类型为样式表，href指向CSS文件的路径，浏览器会在解析html时同步加载对应的CSS文件，不会阻塞html的解析进程。
@import引入CSS的基本用法
@import是CSS提供的规则，用于在一个CSS文件中引入另一个CSS文件，使用方式如下：
/* 在主CSS文件中引入其他样式文件 */
@import url("reset.css");
@import "theme.css";
需要注意@import规则必须放在CSS文件的最前面，也就是所有其他规则之前，否则不会生效。如果放在html的<style>标签中使用，也需要放在标签内容的最顶部。
link和@import的核心区别
1. 加载机制不同
link引入的CSS会和html解析并行加载，不会阻塞页面的渲染进程。而@import引入的CSS要等到当前CSS文件加载完成之后才会去加载对应的资源，属于串行加载，可能会导致页面样式渲染延迟。
2. 兼容性不同
link是html原生标签，所有浏览器都支持，不存在兼容性问题。@import是CSS2.1规范提出的规则，在IE5以下的浏览器中无法识别，兼容范围更窄。
3. 使用场景不同
link可以在html的任何位置使用，也可以引入除了CSS之外的其他资源，比如图标、预加载资源等。@import只能用于CSS文件内部或者<style>标签中，只能引入CSS资源，使用场景更受限。
4. 权重与优先级
当同一个样式被link和@import同时引入时，遵循CSS的层叠规则，后加载的样式会覆盖先加载的同优先级样式。如果link引入的样式在后，会覆盖@import引入的同规则样式。
5. DOM操作支持度不同
link引入的样式可以通过JavaScript操作DOM动态修改href属性来切换样式文件，实现换肤等功能。@import引入的样式无法通过DOM操作动态修改，不支持动态切换。
使用建议
实际开发中优先使用link标签引入CSS文件，兼容性更好，加载效率更高，也支持更多扩展场景。只有在需要在一个CSS文件中拆分多个模块样式时，才考虑使用@import规则，并且要注意将其放在CSS文件的最顶部，避免失效。
<!-- 推荐写法 -->
<head>
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="layout.css">
</head>
<!-- 不推荐的@import用法 -->
<style>
@import "old_style.css"; /* 仅兼容高版本浏览器，且会延迟加载 */
</style>