📢 大家好，我是法医，不是验尸的法医，而是写代码的法医，哈哈😅，今天给大家带来玩转CSS基础之 import 指令
来看看import指令是啥？import指令是用来导入CSS样式的，这时，有的小伙伴就会问：导入样式不是有link标签了嘛，没错，link标签可以导入外部CSS样式，import仍然可以导入外部CSS样式。
import的基本用法
- 在HTML文件中导入外部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@import url("./index.css");
</style>
</head>
<body>
</body>
</html>要在HTML文件汇总直接应用@import引入外部CSS文件，需要将@import放在style标签内
- 在CSS文件中引入另一个CSS文件
@import url('./index.css')
/*后面书写气他样式*/除了 HTML 文件中使用 style 标签来使用 @import，在 CSS 文件中依旧可以使用 @import，这个时候就不需要 style 标签，而是直接使用@import即可，这样便可实现一个或者多个CSS 文件中引入别的CSS 文件。
@import规则还支持媒体查询，因此可以允许依赖媒体的导入
🌰举个栗子：
/*只有媒体是 print 的时候导入 printstyle.css样式表*/
@import "printstyle.css" print;/*只有媒体是 screen并且视口宽度是768px的时候导入 bg.css样式表*/
@import "bg.css" screen and (max-width:768px);了解了@import基本使用后，接下里看看它与link的区别
@import与link有何不同
- link属于HTML标签，而 @import 完全是CSS提供的一种方式
link标签除了可以加载CSS外，还可以做很多其它事情，比如定义
RSS，定义rel连接属性等，@import 只能加载CSS - 兼容性的差别
由于
@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上才能识别，而link标签不存此问题 - 加载顺序的区别
比如，在index.css中使用import引用demo.css，那么只有index.css文件被下载且解析之后，浏览器才会知道还有另一个demo.css需要下载，此时才会去下载，然后开始解析并且构建
render tree - 当使用JS控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的
当我们做换肤网站的时候，它其实是换一套css样式而已，这时可以通过改变link标签的href值来改变应用不同的样式，但是对于import是没办法操作的，毕竟不是标签。
另外，从性能优化的角度来说，尽量避免使用@import，因为是用@import引入CSS会影响浏览器的并行下载，使用@impor引用的CSS文件只有在引用它的那个CSS文件被下载、解析之后，浏览器才会知道还有另一个CSS需要下载，此时才会下载并且解析，随后构建render tree等操作
多个 @import 会导致下载顺序紊乱。在 IE 中，@import 会引发资源文件的下载顺序被打乱，即排列在 @import 后面的 JS 文件先于 @import 下载，并且打乱甚至破坏 @import 自身的并行下载。
