CSS引入方式

经典真题

• css的引用方式有哪些，link和@import的区别?

import用法

1. html中引入

<style>
@import url('./import');
</style>

2. 在css中引入另一个css文件

@import url('./index.css');

3. @import还支持媒体查询

// 只在媒体为print时导入
@import 'printStyle.css' print;
// 只在媒体是screen 屏幕尺寸小于768时导入
@import 'index.css' screen and (max-width:768px);

区别

1. link是html标签，@import是css提供的方式 link标签有RSS、ref等属性。
2. 加载顺序 a.css中@import文件b.css，a被下载解析后才发现b并下载解析b，构建渲染树。
3. 兼容性 @import是css2.1提出的老浏览器不支持。IE5以上才支持。而link无需兼容。
4. js可以通过DOM操作修改link标签的href，来决定引用哪个样式。
5. 性能 @import会影响浏览器的并行下载。多个@import会使浏览器下载顺序紊乱。