购物车
登陆 / 注册
微信扫码登陆

推荐手册

@import

@import
指定导入的外部样式表及目标媒体。
编辑:前端控 前端控 更新时间:2019-01-30 14:17:45

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

以上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);

兼容性:

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
ValuesIEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome
Basic Support6.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+

实例

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />

<style>
@import url("style.css") screen, print;
</style>
</head>
<body>

</body>
</html>
		

运行实例 »

点击 "运行实例" 按钮查看在线实例

网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号