CSS中的@import的用法介绍
本篇内容主要讲解“CSS中的@import的用法介绍”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS中的@import的用法介绍”吧!
我们知道，css文件引入方式有两种：
1. HTML中使用link标签
XML/HTML Code复制内容到剪贴板
<link rel="stylesheet" href="style.css" />
2.CSS中@import
CSS Code复制内容到剪贴板
@import "style.css";
第一种方式最为常见最为主流，第二种方式则很少见到有人这么写，因而也常被开发工程师所忽略。这篇文章就详细解剖之。
语法
@import语法有两种：
CSS Code复制内容到剪贴板
@import "style.css";
@import url("style.css");
这两种语法并没什么差别。
规则
import规则一定要先于除了@charset的其他任何CSS规则，这句话是什么意思呢，我们看个例子：
index.html
CSS Code复制内容到剪贴板
<style type="text/css">
.hd{
color: orange;
}
@import "import.css";
</style>
...
<p class="hd">我是什么颜色</p>
import.css
.hd{
color: blue;
}
测试发现，p的颜色并不是import.css里所定义的蓝色，而是之前定义的橘黄色。打开网络请求会发现没有请求import.css文件，这正是因为，再次强调一遍，import规则一定要先于除了@charset的其他任何CSS规则，所以需要将index.html改成酱紫：
CSS Code复制内容到剪贴板
<style type="text/css">
@import "import.css";
.hd{
color: orange;
}
</style>
...
<p class="hd">我是什么颜色</p>
这时候能看到import.css网络请求，p的颜色为橘黄色，覆盖了import.css里定义的蓝色。
媒体查询
@import和link一样，同样可以定义媒体查询(media queries)，我们先看看link定义的方式：
CSS Code复制内容到剪贴板
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>
接下来是@import：
CSS Code复制内容到剪贴板
@import url("print.css") print;
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);
@import url('mobile.css') (max-width: 680px);
这里要注意的是，不论是link还是import方式，会下载所有css文件，然后根据媒体去应用css样式，而不是根据媒体去选择性下载css文件。
不要使用@import
这。。坑爹呢，看了一大堆，结果告诉我不要使用！
这也只是个建议，因为import的确会带来一些问题，所以网络上会有各种「抵制@import」的文章，既然设计了@import，总有它的有用之处，不能过于绝对。使用@import影响页面性能的地方主要体现在两个方面：
影响浏览器的并行下载
多个@import导致下载顺序紊乱
到此，相信大家对“CSS中的@import的用法介绍”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
