@import

語法:

@import <url> <media_query_list>

<media_query_list>:[<media_query>[',' <media_query>]*]?

<media_query>:[only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*

<expression>:'('<media_feature>[:<value>]?')'

取值:

<url>
使用絕對或相對地址指定導入的外部樣式表文件。可以是url(url)或者直接是一個url
<media_query_list>
指定媒體類型查詢條件

說明:

指定導入的外部樣式表及目標媒體。
  • 該規則必須在樣式表頭部最先聲明。並且其後的分號是必需的,如果省略了此分號,外部樣式表將無法正確導入,並會生成錯誤信息。
  • IE使用@import無法引入超過35條的樣式表。
  • 使用url(url)和直接使用url需要注意的地方:

    示例代碼:

    @import url("?/css3/rules/global.css");
    
    @import url(?/css3/rules/global.css);
    
    @import "?/css3/rules/global.css";
    
    

    以上3種方式都有效。當使用url(url)的方式時,包住路徑的引號可有可無;當直接使用url時,包住路徑的引號必須保留。

  • 指定媒體查詢:

    示例代碼:

    @import url(?/css3/rules/example.css) screen and (min-width:800px);
    
    @import url(?/css3/rules/example.css) screen and (width:800px),(color);
    
    @import url(?/css3/rules/example.css) screen and (min-device-width:500px) and (max-device-width:1024px);

兼容性:

  • 淺綠 = 支持
  • 紅色 = 不支持
  • 墨綠 = 部分支持
  • 橙色 = 实验性质
支持版本\類型 IE Firefox Safari Chrome Opera
版本 6.0-7.0 #1 4.0 5.1 13.0 11.50
版本 8.0 #2
版本 9.0
  1. IE7及更早浏览器不支持@import指定媒體類型和媒体查询。
  2. IE8不支持@import指定媒體查詢。

示例: