【JS提升】link与@import引入CSS样式表的区别

一、link与@import引入CSS样式表的区别

（1）link与@import的用法

link与@import都常用来引入css样式表

（2）link与@import的区别：

1、从属关系不同：link-html标签, 可以定义RSS, rel关联属性设置
@import-CSS关键字, 只能引入样式表文件

2、加载顺序不同
link 引入CSS是同时加载的，异步加载 不阻塞
@import 页面加载完毕后被加载

3、兼容性：
link 不存在兼容问题
@import css2.1 IE5以上才能兼容

4、DOM操作
link是可以通过DOM进行操作的
@import 不行

5、“link 引入的样式权重大于@import引入的样式” 这种说法对吗？不对，和权重无关
@import引入的样式会放在最上面，所以link的样式会覆盖掉import的样式

@import url('style.css');
/* 引入后就放在这里
html {
    background-color: green;
}
*/
html {
    height: 100%;
    background-color: red;
}