CSS中对样式文件的引入有标签和@import规则两种方式。
<link>比较常用，就不介绍了，对@import的使用做个简单介绍。
- 直接在
<style>标签中引入
<style>
@import './@import.css';
</style>
- 在样式文件中导入另一个样式文件
@import './@import.css';
.container{
color: blue;
}
那么，<link>和@import有什么区别呢？
它们的核心差异是，<link>属于html标签，是html语法，由HTML解析器识别；@import属于css规则，是css语法，由css解析器识别。
由于解析器不同，解析方式就有差别：<link>引入的样式属于并行加载，@import属于串行加载(必须先把父css文件完整下载、解析完，才会发起@import里的样式文件)。
@import的性能远不如<link>，工程化中几乎不使用@import。
还有一点差异是，@import引入样式必须写在<style>标签或css文件的最顶部。
既然比@import好，为什么还要设计出@import方式呢？
@import诞生的目的不是代替<link>，而是解决css内部模块化的需求，早期没有打包工具、没有css modules、没有预处理器，存在一个刚需：一个css文件想拆分多个子css文件，实现代码分离，html不能每次写一堆<link>。
总结
<link>是引入样式主流方式，它的性能远高于@import。
需要实现css模块化时，使用@import。
