initial commit

1 files changed, 61 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/at-rule/index.html b/files/zh-cn/web/css/at-rule/index.html
new file mode 100644
index 0000000000..b08bddf9ed
--- /dev/null
+++ b/files/zh-cn/web/css/at-rule/index.html
@@ -0,0 +1,61 @@
+---
+title: '@规则'
+slug: Web/CSS/At-rule
+tags:
+  - At-rule
+translation_of: Web/CSS/At-rule
+---
+<p>一个<strong> at-rule</strong> 是一个<a href="https://developer.mozilla.org/en/CSS/Syntax#CSS_statements" title="en/CSS/Syntax#CSS_statements">CSS 语句，</a>以at符号开头, '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>), 后跟一个标识符，并包括直到下一个分号的所有内容, '<code>;</code>' (<code>U+003B SEMICOLON</code>), 或下一个CSS块，以先到者为准。</p>
+
+<p>下面是一些 @规则, 由它们的标示符指定, 每种规则都有不同的语法:</p>
+
+<ul>
+ <li>{{ cssxref("@charset") }}, 定义样式表使用的字符集.</li>
+ <li>{{ cssxref("@import") }}, 告诉 CSS 引擎引入一个外部样式表.</li>
+ <li>{{ cssxref("@namespace") }}, 告诉 CSS 引擎必须考虑XML命名空间。</li>
+ <li>嵌套@规则, 是嵌套语句的子集,不仅可以作为样式表里的一个语句，也可以用在条件规则组里：
+  <ul>
+   <li>{{ cssxref("@media") }}, 如果满足媒介查询的条件则条件规则组里的规则生效。</li>
+   <li>{{ cssxref("@page") }}, 描述打印文档时布局的变化.</li>
+   <li>{{ cssxref("@font-face") }}, 描述将下载的外部的字体。 {{ experimental_inline() }}</li>
+   <li>{{ cssxref("@keyframes") }}, 描述 CSS 动画的中间步骤 . {{ experimental_inline() }}</li>
+   <li>{{ cssxref("@supports") }}, 如果满足给定条件则条件规则组里的规则生效。 {{ experimental_inline() }}</li>
+   <li>{{ cssxref("@document") }}, 如果文档样式表满足给定条件则条件规则组里的规则生效。 <em>(推延至 CSS Level 4 规范)</em></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="条件规则组">条件规则组</h2>
+
+<p>就像属性值那样,每条@规则都有不同的语法. 不过一些@规则可以归为一类： <strong>条件规则组</strong>. 这些语句使用相同的语法. 它们都嵌套语句，或者是<em>规则</em>或者是<em>@规则</em>。它们都表达： 它们所指的条件 (类型不同) 总等效于 <strong>true</strong> 或者 <strong>false</strong>，如果为 <strong>true</strong> 那么它们里面的语句生效。</p>
+
+<p>条件规则组由CSS Conditionals Level 3 定义:</p>
+
+<ul>
+ <li>{{ cssxref("@media") }},</li>
+ <li>{{ cssxref("@supports") }},</li>
+ <li>{{ cssxref("@document") }}. <em>(推迟至 CSS Level 4 规范) </em></li>
+</ul>
+
+<p>既然条件规则组可以嵌套语句, 那么嵌套层级不定。</p>
+
+<div class="noinclude">
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Conditional') }}</td>
+   <td>{{ Spec2('CSS3 Conditional') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>{{ languages( { "ja": "ja/CSS/At-rule" } ) }}</p>