forked from doyoe/css-handbook
-
Notifications
You must be signed in to change notification settings - Fork 0
/
@import.htm
180 lines (179 loc) · 6.59 KB
/
@import.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>@import</title>
<meta name="Description" content="CSS3参考手册之: @import" />
<meta name="Keywords" content="@import" />
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<meta name="robots" content="all" />
<!--[if lte IE 8]>
<script src="../js/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="../skin/article.css" />
</head>
<body>
<nav id="guide" class="g-mod">
<div class="from">
<a href="http://css.doyoe.com/" target="_blank">CSS3参考手册</a>
<span>»</span>
<a href="../index.htm" id="category" rel="rules" name="@import">语法与规则列表</a>
<span>»</span>
</div>
<div class="to">
<span class="label">相关内容：</span>
<div class="g-combobox g-transition">
<a href="?" class="g-transition target">
<strong>其它语法与规则参考</strong>
<span>选择其它项<!--[if lte IE 7]><ins>IE7 and earlier, Get to die</ins><![endif]--></span>
</a>
<div class="g-transition list">
<ul>
<!-- 插入快速分类导航 -->
</ul>
</div>
</div>
</div>
</nav>
<header id="hd">
<section id="title" class="g-mod">
<h1 class="tit">@import</h1>
<ul class="info">
<li><strong>版本：CSS1/3</strong></li>
</ul>
<!-- 插入浏览器信息 -->
</section>
</header>
<section id="bd">
<section id="syntax" class="g-mod g-attr">
<h2 class="tit">语法：</h2>
<div class="cont">
<p><strong>@import</strong> <a href="../values/textual/url.htm"><url></a> <a href="#dfn-syntax"><media_query_list></a></p>
<p id="dfn-syntax"><strong><media_query_list></strong>：[<a href="#dfn-syntax2"><media_query></a>[',' <a href="#dfn-syntax2"><media_query></a>]*]?</p>
<p id="dfn-syntax2"><strong><media_query></strong>：[only | not]? <a href="../appendix/media-types.htm"><media_type></a> [and <a href="#dfn-syntax3"><expression></a>]* | <a href="#dfn-syntax3"><expression></a> [and <a href="#dfn-syntax3"><expression></a>]*</p>
<p id="dfn-syntax3"><strong><expression></strong>：'('<a href="../properties/media-queries/index.htm#media-features-listing"><media_feature></a>[:<value>]?')'</p>
</div>
</section>
<section id="value" class="g-mod g-attr">
<h2 class="tit">取值：</h2>
<div class="cont">
<dl>
<dt><a href="../values/textual/url.htm"><url></a>：</dt>
<dd>使用绝对或相对地址指定导入的外部样式表文件。<em class="g-color-light">可以是url(url)或者直接是一个url</em></dd>
<dt><a href="#dfn-syntax"><media_query_list></a>：</dt>
<dd>指定<a href="../appendix/media-types.htm">媒体类型</a>和<a href="../properties/media-queries/index.htm#media-features-listing">查询条件</a>。</dd>
</dl>
</div>
</section>
<section id="intro" class="g-mod g-attr">
<h2 class="tit">说明：</h2>
<div class="cont">
<strong>指定导入的外部样式表及目标媒体。</strong>
<ul>
<li>该规则必须在样式表头部最先声明。并且其后的分号是必需的，如果省略了此分号，外部样式表将无法正确导入，并会生成错误信息。</li>
<li>IE使用@import无法引入超过35条的样式表。</li>
<li>
<strong>使用url(url)和直接使用url需要注意的地方：</strong>
<div class="gquote">
<p class="gquote-tit"><strong>示例代码：</strong></p>
<blockquote class="gquote-cont"><code><xmp>@import url("global.css");
@import url(global.css);
@import "global.css";</xmp></code></blockquote>
<p class="gquote-info">以上3种方式都有效。当使用url(url)的方式时，包住路径的引号可有可无；当直接使用url时，包住路径的引号必须保留。</p>
</div>
</li>
<li>
<strong>指定媒体查询：</strong>
<div class="gquote">
<p class="gquote-tit"><strong>示例代码：</strong></p>
<blockquote class="gquote-cont"><code><xmp>@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);</xmp></code></blockquote>
</div>
</li>
</ul>
</div>
</section>
<section id="compatible" class="g-mod g-attr">
<h2 class="tit">兼容性：</h2>
<div class="cont">
<ul class="support-type">
<li><span class="support">浅绿</span> = 支持</li>
<li><span class="unsupport">红色</span> = 不支持</li>
<li><span class="partsupport">粉色</span> = 部分支持</li>
</ul>
<table class="g-data">
<thead>
<tr>
<th>Values</th>
<th>IE</th>
<th>Firefox</th>
<th>Chrome</th>
<th>Safari</th>
<th>Opera</th>
<th>iOS Safari</th>
<th>Android Browser</th>
<th>Android Chrome</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Basic Support</strong></td>
<td class="support">6.0+</td>
<td class="support" rowspan="5">2.0+</td>
<td class="support" rowspan="5">4.0+</td>
<td class="support" rowspan="5">3.1+</td>
<td class="support" rowspan="5">15.0+</td>
<td class="support" rowspan="5">3.2+</td>
<td class="support" rowspan="5">2.1+</td>
<td class="support" rowspan="5">18.0+</td>
</tr>
<tr>
<td rowspan="2">媒体类型</td>
<td class="unsupport">6.0-7.0</td>
</tr>
<tr>
<td class="support">8.0+</td>
</tr>
<tr>
<td rowspan="2">媒体查询</td>
<td class="unsupport">6.0-8.0</td>
</tr>
<tr>
<td class="support">9.0+</td>
</tr>
</tbody>
</table>
</div>
</section>
<section id="example" class="g-mod g-attr">
<h2 class="tit">示例：</h2>
<div class="cont">
<textarea cols="90" rows="10">
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>@import_CSS参考手册_web前端开发参考手册系列</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>
</textarea>
<p><input type="button" value="运行" class="g-btn g-btn-sure" /></p>
</div>
</section>
</section>
<footer id="ft">
<aside id="rights" class="g-mod">
<!-- 插入浏览器及版权信息 -->
</aside>
</footer>
<script src="../js/jquery.js"></script>
<script src="../js/inner.js"></script>
</body>
</html>