深入理解CSS中的@import
我要評(píng)論我們知道，css文件引入方式有兩種：
1. HTML中使用link標(biāo)簽
- <link rel="stylesheet" href="style.css" />
2.CSS中@import
- @import "style.css";
第一種方式最為常見(jiàn)最為主流，第二種方式則很少見(jiàn)到有人這么寫(xiě)，因而也常被開(kāi)發(fā)工程師所忽略。這篇文章就詳細(xì)解剖之。
語(yǔ)法
@import語(yǔ)法有兩種：
- @import "style.css";
- @import url("style.css");
這兩種語(yǔ)法并沒(méi)什么差別。
規(guī)則
import規(guī)則一定要先于除了@charset的其他任何CSS規(guī)則，這句話(huà)是什么意思呢，我們看個(gè)例子：
index.html
- <style type="text/css">
- .hd{
- color: orange;
- }
- @import "import.css";
- </style>
- ...
- <p class="hd">我是什么顏色</p>
- import.css
- .hd{
- color: blue;
- }
測(cè)試發(fā)現(xiàn)，p的顏色并不是import.css里所定義的藍(lán)色，而是之前定義的橘黃色。打開(kāi)網(wǎng)絡(luò)請(qǐng)求會(huì)發(fā)現(xiàn)沒(méi)有請(qǐng)求import.css文件，這正是因?yàn)?，再次?qiáng)調(diào)一遍，import規(guī)則一定要先于除了@charset的其他任何CSS規(guī)則，所以需要將index.html改成醬紫：
- <style type="text/css">
- @import "import.css";
- .hd{
- color: orange;
- }
- </style>
- ...
- <p class="hd">我是什么顏色</p>
這時(shí)候能看到import.css網(wǎng)絡(luò)請(qǐng)求，p的顏色為橘黃色，覆蓋了import.css里定義的藍(lán)色。
媒體查詢(xún)
@import和link一樣，同樣可以定義媒體查詢(xún)(media queries)，我們先看看link定義的方式：
- <link rel="stylesheet" type="text/css" href="print.css" media="print"/>
接下來(lái)是@import：
- @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方式，會(huì)下載所有css文件，然后根據(jù)媒體去應(yīng)用css樣式，而不是根據(jù)媒體去選擇性下載css文件。
不要使用@import
這。?？拥兀戳艘淮蠖?，結(jié)果告訴我不要使用！
這也只是個(gè)建議，因?yàn)閕mport的確會(huì)帶來(lái)一些問(wèn)題，所以網(wǎng)絡(luò)上會(huì)有各種「抵制@import」的文章，既然設(shè)計(jì)了@import，總有它的有用之處，不能過(guò)于絕對(duì)。使用@import影響頁(yè)面性能的地方主要體現(xiàn)在兩個(gè)方面：
影響瀏覽器的并行下載
多個(gè)@import導(dǎo)致下載順序紊亂
相關(guān)文章
CSS中l(wèi)ink和@import的區(qū)別說(shuō)明
link與@import這兩種方式都是為了加載CSS文件,但還是存在著細(xì)微的差別。下面腳本之家小編給大家介紹CSS中l(wèi)ink和@import的區(qū)別說(shuō)明，感興趣的朋友一起看下吧2016-08-12淺談CSS 權(quán)值 層疊 重要性(!important)
下面小編就為大家?guī)?lái)一篇淺談CSS 權(quán)值 層疊 重要性(!important)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-05css中提升優(yōu)先級(jí)屬性!important的用法總結(jié)
!important只有Ie7.0和firefox可以識(shí)別，但是Ie6.0不能成功應(yīng)用.!important提升優(yōu)先級(jí)，下面對(duì)它的用法做下總結(jié)2014-08-08加了important標(biāo)記css樣式的jQuery寫(xiě)法
這篇文章主要介紹了加了important標(biāo)記css樣式的jQuery寫(xiě)法，需要的朋友可以參考下2014-07-16從可維護(hù)性角度考慮css的!important規(guī)則的可用性
使用!important對(duì)于性能并沒(méi)有什么負(fù)面影響。但是從可維護(hù)性角度考慮還是少用這個(gè)規(guī)則。不過(guò)這個(gè)規(guī)則在IE6中有bug2014-06-05css @import url加載樣式應(yīng)用深入分析
一直以來(lái)寫(xiě)CSS的時(shí)候都沒(méi)有過(guò)多的考慮使用@import的方式,最近又看到有朋友在討論關(guān)于@import的一些好壞，以及要不要使用@import的方式加載樣式,需要的朋友可以了解下2012-12-12css中l(wèi)ink和@import的區(qū)別分析詳解
本文章詳細(xì)的介紹了關(guān)于link和@import的區(qū)別，有需要了解的朋友可以參考一下本文章2012-03-31- 我們引用css文件通常有兩種方式:link,@import 這兩天整理了一下這兩種用法的區(qū)別，加深認(rèn)識(shí)2010-06-17
- 很多人，包括很多網(wǎng)站（我所見(jiàn)過(guò)的所有網(wǎng)站，包括國(guó)內(nèi)著名的‘網(wǎng)頁(yè)設(shè)計(jì)師’網(wǎng)站），都說(shuō)important是不被IE所支持和認(rèn)識(shí)的，可是真的是這樣嗎？看了下邊的兩個(gè)例子，也許你2010-01-05
Webpack 中 css import 使用 alias 相對(duì)路徑的方法
在 Vue 項(xiàng)目中，我們通常使用 vue-webpack 腳手架生成工程模板，然后配置 @ 為項(xiàng)目根目錄下放資源和源碼的 /src 目錄的別名。這篇文章給大家介紹Webpack 中 css import 使2018-07-24