前言
在前端开发过程中，关于CSS的使用也是非常的，尤其是样式相关的设置等操作。作为前端开发者关于@import指令都会有所了解，尤其是在导入CSS样式的时候会用到，但是刚入行不久的前端开发者对应@import指令会有所陌生。那么本文就来分享一下关于@import指令的使用详情，总结一下，方便后期查阅使用。
CSS文件引入方式
众所周知，CSS文件引入的方式有两种：第一种就是通过HTML中使用link标签，第二种就是通过使用CSS中的@import指令。下面举一个示例，复制内容到剪贴板，具体方式如下所示。
1、HTML中使用link标签
<link rel="stylesheet" href="style.css" /> 2、使用CSS中的@import指令
@import "style.css"; @import指令
首先来看一下@import指令的含义：@import导入指令其实是CSS提供的一个实用命令，主要功能是根据路径导入一个样式表的文件，且能够指定样式表所服务的设备类型，即可以将别的样式表导入当前样式表中，使样式表文件不必写在同一个文件当中。
1、属性定义及使用说明
CSS的@import是用于从其他样式表导入样式规则。需要注意的是：
- @import 规则必须在 CSS 文档的头部，但可以在 @charset 规则的后面；
- @import 规则不是一个嵌套语句，@import不能在条件组的规则中使用；
- @import 规则支持媒体查询，所以可以根据不同屏幕尺寸导入不同的样式文件。
2、@import指令的语法
@import url|string list-of-mediaqueries;3、@import指令的属性值
| 值 | 描述 |
| url|string | 表示要引入资源地址。这个 URL 可以是绝对路径或者相对路径。 注意：这个URL不需指明一个文件；可以只指明包名，然后合适的文件会被自动选择。 |
| list-of-mediaqueries | 是一个逗号分隔的媒体查询条件列表，设置URL引入的 CSS 规则在何种条件下应用。若浏览器不支持列表中的任何一条媒体查询条件，就不会引入 URL 指定的 CSS 文件。 |
4、@import指令的实例
导入"theme.css"样式到当前到样式表中，具体如下所示：
@import "theme.css"; // 使用字符串或者
@import url("theme.css"); // 使用 url 地址5、@import指令的用法
关于@import指令的用法，具体写法如下所示：
@import url(“public.css”)； //释义：通过该命令，能够将public.css导入当前的样式表文件中除了上面的用法，@import指令还可以给导入的样式表指定一个设备类型，标明当前的样式是做什么用途的，比如：
import url(“print.css”) print；//释义：通过该命令，可导入一个print.css样式表文件，且该样式表用于打印机设备的打印样式。6、@import指令的注意点
@import指令的注意点，具体如下所示：
- 在使用@import语句引入样式时，在一行样式的结尾需要加分号;
- 在html文档中使用@import时，需要在style标签里面；
- 不建议使用@import语句，因为@import引入的 CSS 将在页面加载完毕后才被加载。
@import指令和link的区别
上文已经介绍了@import指令和link的对比使用，这里再来做一下二者的对比，具体如下所示：
1、可以知道link属于HTML标签，但@import 是CSS提供的一种方式。link标签不仅可以加载CSS，还可以定义RSS、定义rel连接属性等；但是@import 只能加载CSS。
2、兼容性的差别。@import是CSS2.1提出的，所以在此之前的旧浏览器不支持，即@import只能在IE5以上才能被识别；但是link标签不存上述的问题。
3、在使用JS控制DOM去改变样式的时候，只能用link标签，不能使用@import指令原因是DOM不可控的。
拓展：CSS中的!import
虽然上面讲的是关于@import指令的用法，但是!import也是关于CSS的使用的另一个知识点，虽然它们比较像，但是用法不同，就拿来放一起做对比分享。
1、CSS中的!import的用法
一般情况下在CSS中的样式后面加上 “!import ”，就是为了提升该样式规则的应用优先级。
2、CSS中的!import的语法
选择器{ 样式:值 !important;}
注意：虽然!import为使用者提供了一个增加样式权重的方法，但是应当注意!import对整条样式的声明，包括该样式的属性和属性值。
3、CSS中的!import的使用示例
CSS中的!import的使用示例，具体如下所示：
<div id="body">
<a>import</a>
</div>
<style type="text/css">
a {
color: red !important;
}
#body a{
color: black;
}
</style>上面的代码段中，如果不加import特性，则超链接的颜色为黑色，但是加上import之后优先级提高了，会显示红色。
注意：
- 若!import被用于一个简写的样式属性，那么该简写的样式属性所代表的子属性都会被作用上!import；
- 关键字!import必需放在一行样式的末尾且要放在该行分号之前，否则就没有效果；
- 在某些特殊情况下，需要在一个代码块中声明两个同样的属性，那么需要把!import加在第一个属性的后面，因为会让所有浏览器中第一个属性的权重更大。
最后
通过本文关于前端开发中的CSS中import指令的详细介绍，在实际的前端开发工作中还是要知道了解的，所以作为前端开发者来要掌握它相关的内容，尤其是从事前端开发不久的开发者来说尤为重要，是一篇值得阅读的文章，重要性就不在赘述。欢迎关注，一起交流，共同进步。
