本篇內(nèi)容主要講解“CSS中的@import的用法介紹”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“CSS中的@import的用法介紹”吧!
我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、新榮ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的新榮網(wǎng)站制作公司
我們知道，css文件引入方式有兩種：
1. HTML中使用link標(biāo)簽
XML/HTML Code復(fù)制內(nèi)容到剪貼板
2.CSS中@import
CSS Code復(fù)制內(nèi)容到剪貼板
@import "style.css";
第一種方式最為常見最為主流，第二種方式則很少見到有人這么寫，因而也常被開發(fā)工程師所忽略。這篇文章就詳細(xì)解剖之。
語法
@import語法有兩種：
CSS Code復(fù)制內(nèi)容到剪貼板
@import "style.css";
@import url("style.css");
這兩種語法并沒什么差別。
規(guī)則
import規(guī)則一定要先于除了@charset的其他任何CSS規(guī)則，這句話是什么意思呢，我們看個(gè)例子：
index.html
CSS Code復(fù)制內(nèi)容到剪貼板
.hd{
color: orange;
}
@import "import.css";
...
import.css
.hd{
color: blue;
}
測試發(fā)現(xiàn)，p的顏色并不是import.css里所定義的藍(lán)色，而是之前定義的橘黃色。打開網(wǎng)絡(luò)請(qǐng)求會(huì)發(fā)現(xiàn)沒有請(qǐng)求import.css文件，這正是因?yàn)椋俅螐?qiáng)調(diào)一遍，import規(guī)則一定要先于除了@charset的其他任何CSS規(guī)則，所以需要將index.html改成醬紫：
CSS Code復(fù)制內(nèi)容到剪貼板
@import "import.css";
.hd{
color: orange;
}
...
這時(shí)候能看到import.css網(wǎng)絡(luò)請(qǐng)求，p的顏色為橘黃色，覆蓋了import.css里定義的藍(lán)色。
媒體查詢
@import和link一樣，同樣可以定義媒體查詢(media queries)，我們先看看link定義的方式：
CSS Code復(fù)制內(nèi)容到剪貼板
接下來是@import：
CSS Code復(fù)制內(nèi)容到剪貼板
@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ì)帶來一些問題，所以網(wǎng)絡(luò)上會(huì)有各種「抵制@import」的文章，既然設(shè)計(jì)了@import，總有它的有用之處，不能過于絕對(duì)。使用@import影響頁面性能的地方主要體現(xiàn)在兩個(gè)方面：
影響瀏覽器的并行下載
多個(gè)@import導(dǎo)致下載順序紊亂
到此，相信大家對(duì)“CSS中的@import的用法介紹”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
重慶分公司
重慶分公司
