前端面经 link和@import的区别

link和@import都是引入外部CSS样式的方法

link是链接法，@import是导入法

link与@import的区别

• link属于html标签，没有兼容性；@import是CSS提供的，IE5以上才能识别
• 使用link，是一边加载页面一边加载引入的CSS样式，体验良好；而@import则是加载完页面，再逐渐加载引入的样式。
• link的优先级高于@import
• link除了加载CSS文件，还可以引入图标icon或别的一些文档信息；而@import只能用于引入样式表。
• link支持使用JavaScript控制DOM从而改变样式；@import则不支持

关于第四点提到了的ink除了加载外部样式表，还可以引入图标icon等，我们则需要了解一下link标签的具体属性：

可以查看文章：link标签详解

主要关注的是：

• 作用：link标签用于定义文档与外部资源的关系。
• 类型：link标签是空元素
• 位置：只能使用在head部分
• 次数：可以使用多次

还有其三个主要属性：

1. type：定义被链接文档的MIME类型
2. rel：定义当前文档和被链接文档之间的联系
3. href：定义被链接文档的位置

rel可以设置不同的值，最常见就是styleSheet,即被链接文档是外部样式表的意思。那rel如果取其它值，意味着被连接文档与文档则是别一种的关系，也就是可以引入除了外部样式表的其它外部资源。所以link除了引入外部样式表，还可以做别的用途！