页面导入样式时，使用link和@import有什么区别？

Posted 2020-12-16 art-poet

1. link属于Xhtml标签，除了加载CSS外，还能定义rel连接属性等作用，而@import是CSS提供的，只能用于加载CSS。

2. 页面被加载时，link会同时被加载，而@import引用的CSS会等页面被加载完再加载。

3. import是CSS 2.1提出的，只在IE5以上才能被识别，存在兼容问题，而link是XHTML标签，无兼容问题

4. link是XHTML标签,它不仅可以引入css文件，还可以引入网站图标或者设置媒体查询。

5. @import是CSS提供的语法规则，只能用来加载css。

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

7. link引入css文件，页面载入同时载入css文件，@import在页面完全载入之后载入css文件，在网络较慢情况下一开始会没有css样式。

8. link在浏览器中没有兼容问题。@import在css2.1中提出，低版本浏览器会不支持。

9. link中的css可以被javascript获取进而控制DOM，而@import不支持。