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