前端面试-页面导入样式时，使用link和@import有什么区别

　　外部样式表必须导入到网页文档（HTML）中，才能够被浏览器识别和解析。外部样式表文件可以通过两种方法导入到 HTML 文档中。

　　一般推荐使用 link 导入样式表的方法，@import 可以作为补充方法使用。

　　1. 使用<link>标签导入,链接样式

示例：

　　<link href="xxx.css" rel="stylesheet" type="text/css" />

  href 属性设置外部样式表文件的地址，可以是相对地址，也可以是绝对地址。
  rel 属性定义关联的文档，这里表示关联的是样式表。
  type 属性定义导入文件的类型，同 style 元素一样，text/css表明为 CSS 文本文件。

　　2. 使用@import关键字导入

示例：

<style type="text/css">
　　@import url("xxx.css")
</style>

@import是 CSS 提供的语法规则，只有导入样式表的作用；

在 @import 关键字后面，利用 url() 函数包含具体的外部样式表文件的地址。

　　两者区别

1. 从属关系区别：link 属于 HTML 标签，而 @import 是 CSS 提供的。
2. 加载顺序区别：页面被加载时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载。
3. @import 是 CSS2.1 才有的语法, 只在 IE 5 以上才能识别，而 link 是 HTML 标签，无兼容问题。
4. 权重区别：link 方式的样式的权重高于 @import 权重。
5. 兼容性区别：link 没有兼容性问题，@import 不兼容 ie5 以下。
6. dom可控性区别：可以通过 JS 操作 DOM ，是否插入link标签来起到改变样式的作用；由于DOM方法是基于文档的，无法使用 @import 的方式插入样式。

　　除了以上两种导入方式以外还可以通过一下两种方式引入样式

　　3. 内联样式　

示例：
<div style="background:red"></div>

就是直接在标签里边直接写

　　4.嵌入样式

示例：
<style>
.content {
　　background: red;
}
</style>

只对当前html有效

　　5. css权重计算

!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符