@import

  • 版本:CSS1/3

语法:

@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("global.css"); @import url(global.css); @import "global.css";

    以上3种方式都有效。当使用url(url)的方式时,包住路径的引号可有可无;当直接使用url时,包住路径的引号必须保留。

  • 指定媒体查询:

    示例代码:

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

兼容性:

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 6.0+ 2.0+ 4.0+ 3.1+ 15.0+ 3.2+ 2.1+ 18.0+
媒体类型 6.0-7.0
8.0+
媒体查询 6.0-8.0
9.0+

示例:

关注编程学问公众号