码迷,mamicode.com
首页 > 其他好文 > 详细

@import

时间:2018-05-20 20:41:11      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:ted   引号   示例   规则   查询   lis   str   har   width   

@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>]?‘)‘

@import的取值介绍

<url>
使用绝对或相对地址指定导入的外部样式表文件。可以是url(url)或者直接是一个url
<media_query_list>
指定媒体类型查询条件

@import的使用说明

指定导入的外部样式表及目标媒体。
  • 该规则必须在样式表头部最先声明。并且其后的分号是必需的,如果省略了此分号,外部样式表将无法正确导入,并会生成错误信息。
  • 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);

@import的浏览器兼容性

  IE 9 +

  1. IE7及更早浏览器不支持@import指定媒体类型和媒体查询。
  2. IE8不支持@import指定媒体查询。

@import的完整演示案例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS @import详解-CSS教程</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
@import url("style.css") screen, print;
</style>
</head>
<body>

</body>
</html>
			

  

@import

标签:ted   引号   示例   规则   查询   lis   str   har   width   

原文地址:https://www.cnblogs.com/tongbiao/p/9064408.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!