css 引入方式 link 和 @import 的区别

区别一：使用方法的区别

<!--link的用法 -->
<link rel="stylesheet" type="text/css" href="theme.css" />
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>
<!-- @import的用法 -->
@import url("global.css");
@import url(global.css);
@import "global.css”;
@import url(example.css) screen and (min-width:800px);
@import url(example.css) screen and (width:800px),(color);
@import url(example.css) screen and (min-device-width:500px) and (max-device-width:1024px);

• link标签除了加载css 还可以加载其他内容，比如RSS，图标等等，而@import只能导入css
• link标签可以通过js来操纵，而@import没有办法操控
• @import必须定义在css定义在所有的css语法规则之前，但是在@charset之下（如果有的话），否则会失效。

区别二：兼容性
link是html标签，所以不存在兼容问题。
@import 是css2.x的语法，IE9之前是支持度不好的

区别三：加载时机
html中link引入css或者@import 引入的css文件默认都是按顺序加载的
css 文件里如果还有引入的@import，该引入是要等到页面加载完成后再加载，需要注意的是虽然是最后加载，编写在@import后面的css还是会覆盖前面@import的样式。

下面的例子中，页面通过@import 导入test1.css， test1.css内部@import test2.css。 观察发现test2.css 总是放到最后一次加载。

test.html中引入
<style>
 @import url(test1.css); 
  .test {
     color:aqua;
   }
</style>
#test1.css
@import url(test2.css);
.test {
  color:yellow;
}
#test2.css
.test {
  color:red;
}

如何选择？

一般情况下，建议使用兼容性好的link来加载和组织css，@import除了兼容性不好之外，由于加载顺序问题还是会导致页面的闪屏现象。体验会很不好。
@import是不是就无用途了呢? 其实也不是，我们可以在现代工程话的项目里 使用@import来更好的组织我们的代码架构，再通过一些打包工具在发布的时候转换成传统css文件即可。