link和@import区别

面试问题常见：link和@import区别？

前言：我们在页面中使用CSS的方式主要有3种：行内添加定义style属性值，页面头部内嵌调用和外面链接调用；其中外部引用有两种分别是：link和@import。

那么，link和@import到底有什么区别呢？

首先看一下语法：

link

    <link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />

@import

    <style type="text/css" media="screen">
          @import url("CSS文件");
     </style>

他们的区别我们可以从4个方面去总结：

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.权重

@import的权重要高于link