前言
- CSS引用方式有哪些？link和@import的区别？
@import
import指令也是用来导入CSS样式的。
import的基本用法如下：
- 在HTML文件中导入外部样式
<style>
@import url('./test.css');
</style>
要在HTML源代码直接应用@import引入外部CSS文件，需要将@import放入style标签。
- 在CSS文件中引入另一个CSS文件
@import url('./test.css');
除了HTML源代码中使用style标签来运用@import，在CSS文件代码中依旧可以使用@import，这个时候就不需要style标签，而是直接应用@import就可，这样便可实现一个(多个)CSS文件中引入套入别的一个(多个)CSS文件。
- @improt 还支持媒体查询，因此可以允许依赖媒体的导入
/* 只在媒体为 print 的时候导入 print.css */
@import "print.css" print;
/* 只在媒体为 screen 并且视口最小宽度为 480px 的时候导入 screen.css */
@import "screen.css" screen and (min-width: 480px);
link和@import的区别：
-
link属于HTML标签，而@import是CSS提供的。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
-
兼容性的区别
import只在IE5以上才能识别，而link是HTML标签，无兼容问题。
-
加载顺序的区别
所以在页面被加载的时候，link标签引入的CSS会同时被加载，而@import引入的CSS会等到页面全部被下载完再加载。
-
当使用JavaScript控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的。
对于可以换主题的网站，可以通过改变link标签的href值来改变的外部样式表，但是对于import是无法操作的，毕竟不是标签。
另外，从性能优化的角度来讲，尽量要避免使用@import。
使用@import引入CSS会影响浏览器的并行下载。使用@import引用的CSS文件只有在引用它的那个CSS文件被下载、解析之后，浏览器才会知道还有另外一个CSS需要下载，这时才去下载，然后再开始解析、构建Render Tree等一系列操作。
多个@import会导致下载顺序紊乱。在IE中，@import会引发资源文件的下载顺序被打乱，即排列在@import后面的JS文件先于@import下载，并且打乱甚至破坏@import自身的并行下载。
总结
- CSS引用方式有哪些？link和@import的区别？
CSS引用方式有：
- 外联，通过link标签或@import外部链接样式表
- 内联，在head标记中使用style标记定义样式
- 嵌入，在元素的开始标记里通过style属性定义样式
link和@import的区别：
- link属于HTML标签，而@import是CSS提供的。
- 兼容性的区别
- 加载顺序的区别
- 当使用JavaScript控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的。
