本篇內容主要講解“CSS中的@import的用法介紹”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“CSS中的@import的用法介紹”吧!
我們知道，css文件引入方式有兩種：
1. HTML中使用link標簽
XML/HTML Code復制內容到剪貼板
<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導致下載順序紊亂
到此，相信大家對“CSS中的@import的用法介紹”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
