亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

深入理解CSS中的@import

segmentfault   發(fā)布時間：2015-07-14 16:18:48   作者：佚名   我要評論
這篇文章主要介紹了CSS中的@import,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下

我們知道，css文件引入方式有兩種：
1. HTML中使用link標(biāo)簽

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <link rel="stylesheet" href="style.css" />  

2.CSS中@import

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @import "style.css";  

第一種方式最為常見最為主流，第二種方式則很少見到有人這么寫，因而也常被開發(fā)工程師所忽略。這篇文章就詳細(xì)解剖之。
語法

@import語法有兩種：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @import "style.css";   
  2. @import url("style.css");  

這兩種語法并沒什么差別。
規(guī)則
import規(guī)則一定要先于除了@charset的其他任何CSS規(guī)則，這句話是什么意思呢，我們看個例子：

index.html

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style type="text/css">   
  2.   .hd{   
  3.     color: orange;   
  4.   }   
  5.   @import "import.css";   
  6. </style>   
  7. ...   
  8. <p class="hd">我是什么顏色</p>   
  9.   
  10. import.css   
  11.   
  12.   .hd{   
  13.     color: blue;   
  14.   }  

測試發(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改成醬紫：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style type="text/css">   
  2.   @import "import.css";   
  3.   .hd{   
  4.     color: orange;   
  5.   }   
  6. </style>   
  7. ...   
  8. <p class="hd">我是什么顏色</p>  

這時候能看到import.css網(wǎng)絡(luò)請求，p的顏色為橘黃色，覆蓋了import.css里定義的藍(lán)色。
媒體查詢

@import和link一樣，同樣可以定義媒體查詢(media queries)，我們先看看link定義的方式：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <link rel="stylesheet" type="text/css" href="print.css" media="print"/>  

接下來是@import：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @import url("print.css") print;   
  2. @import "common.css" screen, projection;   
  3. @import url('landscape.css') screen and (orientation:landscape);   
  4. @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)文章

最新評論