深入理解CSS中的@import

站长资源 2024/11/27 佚名

67 1538 67

DDR爱好者之家 Design By 杰米

我们知道，css文件引入方式有两种：
1. HTML中使用link标签

XML/HTML Code复制内容到剪贴板

2.CSS中@import

CSS Code复制内容到剪贴板

第一种方式最为常见最为主流，第二种方式则很少见到有人这么写，因而也常被开发工程师所忽略。这篇文章就详细解剖之。
语法

@import语法有两种：

CSS Code复制内容到剪贴板

这两种语法并没什么差别。
规则
import规则一定要先于除了@charset的其他任何CSS规则，这句话是什么意思呢，我们看个例子：

index.html

CSS Code复制内容到剪贴板

测试发现，p的颜色并不是import.css里所定义的蓝色，而是之前定义的橘黄色。打开网络请求会发现没有请求import.css文件，这正是因为，再次强调一遍，import规则一定要先于除了@charset的其他任何CSS规则，所以需要将index.html改成酱紫：

CSS Code复制内容到剪贴板

这时候能看到import.css网络请求，p的颜色为橘黄色，覆盖了import.css里定义的蓝色。
媒体查询

@import和link一样，同样可以定义媒体查询(media queries)，我们先看看link定义的方式：

CSS Code复制内容到剪贴板

接下来是@import：

CSS Code复制内容到剪贴板

这里要注意的是，不论是link还是import方式，会下载所有css文件，然后根据媒体去应用css样式，而不是根据媒体去选择性下载css文件。
不要使用@import

这。。坑爹呢，看了一大堆，结果告诉我不要使用！
这也只是个建议，因为import的确会带来一些问题，所以网络上会有各种「抵制@import」的文章，既然设计了@import，总有它的有用之处，不能过于绝对。使用@import影响页面性能的地方主要体现在两个方面：

影响浏览器的并行下载
多个@import导致下载顺序紊乱

CSS,@import

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“深入理解CSS中的@import”

暂无评论...