link和@import的区别

link和@import都是外部引用css的方式，推荐使用link标签，这样可以避免考虑@import的语法规则和注意事项，避免昌盛资源文件下载顺序混乱和http请求过多的烦恼

1. link语法结构

<link href=“CSSurl路径” rel=“stylesheet” type=“text/css” />

2. @import语法结构

@import CSSurl路径;

@import一定要写在除@charset外的其他任何css规则之前，如果置于其他位置将会被浏览器忽略，而且，在@import之后如果存在其他样式，则@import之后的分号是必须书写不可忽略的

3. 区别

1）从属关系：@import是css提供的语法规则，只有导入样式表的作用；link是html提供的标签，不仅可以加载css文件，还可以定义rss、rel连接属性等
2）加载顺序：加载页面时，link标签引入的css被同时加载；@import引入的css将在页面加载完毕后被加载
3）兼容性：@import是css2.1才有的语法，故只可在ie5+才能识别；link标签作为html元素，不存在兼容性问题
4）DOM可控性：可以通过js操作DOM，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方式插入样式。
5）link引入的样式权重大于@import引入的样式（在link标签引入的css文件中使用@import时，相同样式将被该css文件本身的样式层叠）