区别一:使用方法的区别
<!--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文件即可。