link和import导入外部样式的区别

1.结构

link语法结构

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

import语法结构

<style type="text/css">
    @import  url(CSSurl);
</style>

2.应用场景

link标签只能在html页面中用来引用css,

而import可以在css中引用其他css。

在css中直接使用

@import url(CSSurl);

3.老祖宗的差别

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

4.加载顺序

当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式。

5.兼容性

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

6.使用dom控制样式时的差别

使用link标签添加的样式可以被Javascript的Dom获取以对其修改，而@import不是dom可以控制的.

转载于:https://www.cnblogs.com/chengzp/p/7757855.html