link和@import的区别

link和@import的区别

面试中被问到link和@import的问题，直接懵逼，用过但没有太过于研究这些，css引入一般普遍都用link，@impot少些接触，就此来谈一下两者的区别

代码引入格式如下：

@import引入

@import url('css文件地址')

link引入

<link rel="stylesheet" href="css文件地址">

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标签引入以下代码

div{
	width: 100px;
	height: 100px,
	background-color: red;
}

@import引入以下代码

div{
	width: 200px;
	height: 200px,
	background-color: yellow;
}

帮助理解：以上的两个样式是通过修改div的样式，我们都把他引入到同一个文件之中，会发现页面中显示了一个宽100px，高100px，背景颜色为红色的一个div

原因：link的权重大 会覆盖 @import 引入的样式