页面导入样式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 提供的语法规则，只有导入样式表的作用。在  关键字后面，利用 url() 函数包含具体的外部样式表文件的地址。

两者区别

差别1：老祖宗的差别

• link属于XHTML标签，而@import完全是CSS提供的一种方式。
• link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import 就只能加载CSS了。

差别2：加载顺序的差别

当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。

差别3：兼容性的差别

由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

差别4：使用DOM控制样式时的差别

当使用JavaScript控制DOM去改变样式的时候，只能使用 link 标签，因为@import不是DOM可以控制的。

差别5：@import可以在CSS中再次引入其他样式表

比如可以创建一个主样式表，在主样式表中再引入其他的样式表，

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

3. 内联样式

示例：

 <div style="background:red"></div>

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

4.嵌入样式

示例：

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

只对当前html有效

5. css权重计算

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

选择器	权重
通配符	0
标签	1
类/伪类/属性	10
ID	100
行内样式	1000
important	无穷大