清风细雨楼 Design By www.eepep.com
我们知道,css文件引入方式有两种:
1. HTML中使用link标签
- <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导致下载顺序紊乱
清风细雨楼 Design By www.eepep.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
清风细雨楼 Design By www.eepep.com
暂无评论...
更新日志
2024年12月25日
2024年12月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]