CSS @import

通常通過<link>標籤引入外部CSS檔案，其實也可以利用@import引入。

如果CSS檔案程式碼量龐大，那麼可以將程式碼分隔，可以將功能類似的程式碼單獨放置於一個檔案中。

然後再通過@import引入，不過此方式引入的一些特點可能會影響效能，所以要謹慎使用。

還是建議儘可能的使用<link>標籤引入CSS檔案，它是並行載入，效率會高很多。

更多兩種方式是有區別的可以參閱@import與link的區別一章節。

語法結構：

[CSS] 純文字檢視 複製程式碼
@import "url";
@import url("url");

兩種載入方式，一種是後面直接跟著CSS檔案路徑，另一種是通過類似載入背景圖片的方式url()。

引號中的url是將要引入CSS檔案的路徑，可以是相對路徑也可以是絕對路徑。

瀏覽器支援：

（1）.IE瀏覽器支援此此方式。

（2）.edge瀏覽器支援此方式。

（3）.谷歌瀏覽器支援此方式。

（4）.opera瀏覽器支援此方式。

（5）.火狐瀏覽器支援此方式。

（6）.safria瀏覽器支援此方式。

@import方式引入css檔案有很多細節需要注意，下面進行一一介紹。

一.引入方式：

具有兩種引入方式：

（1）.在<style>標籤中引入。

（2）.在另一個CSS檔案中引入。

二.在各自引入方式中的位置：

通過@import可以引入CSS檔案，此時可能很多朋友會想當然的認為可以將其放置於任何位置。

上述想法是完全錯誤的，如果通過<style>標籤引入，必須將其置於起始位置，否則無效。

程式碼演示如下：

[HTML] 純文字檢視 複製程式碼
<style>
@import url("css/style.css");
div{color:blue}
</style>

必須將其置於任何CSS程式碼的前面，否則程式碼無效；將其置於另一個CSS檔案中也是需要置於首位，但是還有其他特點需要注意，假設當前有CSS檔案antzone.css，此檔案通過@import引入style.css檔案，程式碼片段如下：

[CSS] 純文字檢視 複製程式碼
@charset "utf-8";
@import url("style.css");
html{margin:0;padding:0;_text-overflow:ellipsis;}

上面是antzone.css檔案的部分程式碼，分析如下：

（1）.必須要位於頂部，即便不是最頂部，也只能位於@charset之下。

（2）.如果@import語句後面有其他CSS程式碼，必須在語句之後加分號。

三.載入時機：

通過@import載入CSS檔案，是在DOM結構載入完畢再去載入。

如果是在CSS檔案內通過@import載入，不但要等待DOM結構載入完畢，而且要等待所在CSS檔案載入完畢，再去解析執行所在CSS檔案的時候發現被引入檔案的URL，然後再去載入，由於不是並行載入，且發起了一次新的HTTP請求，所以會對效能有影響，這也是它的最大問題之一。

四.生效媒體：

與其他方式引入的CSS檔案類似，同樣可以為其設定所生效的媒體。

比如可以設定CSS檔案專門作用域顯示器、印表機等媒體。

程式碼演示如下：

[CSS] 純文字檢視 複製程式碼
@import url("fineprint.css") print;
@import url("bluish.css") speech;
@import 'custom.css';

如果沒有為其規定，那麼對所有的媒體都有效。