initial commit

1 files changed, 81 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/syntax/index.html b/files/zh-cn/web/css/syntax/index.html
new file mode 100644
index 0000000000..aa20590451
--- /dev/null
+++ b/files/zh-cn/web/css/syntax/index.html
@@ -0,0 +1,81 @@
+---
+title: 语法
+slug: Web/CSS/Syntax
+tags:
+  - CSS
+  - Web
+  - 初学者
+  - 教程
+  - 语法
+translation_of: Web/CSS/Syntax
+---
+<div>{{cssref}}</div>
+
+<p>层叠样式表（ Cascading Stylesheet ，简称<a href="/en/CSS" title="CSS">CSS</a> ）， 其基本目标是让浏览器以指定的特性去绘制页面元素，比如颜色，定位，装饰。CSS的语法反映了这个目标，由下面两个部分构建：</p>
+
+<ul>
+ <li>属性（ <strong>property）</strong>是一个标识符，用可读的名称来表示其特性。</li>
+ <li>值（<strong>value）</strong>则描述了浏览器引擎如何处理该特性。每个属性都包含一个有效值的集合，它有正式的语法和语义定义，被浏览器引擎实现。 </li>
+</ul>
+
+<h2 id="CSS_声明">CSS 声明</h2>
+
+<p>CSS的核心功能是将CSS属性设定为特定的值。一个属性与值的键值对被称为”声明“（declaration） 。CSS引擎会计算页面上每个元素都有哪些声明，并且会根据结果绘制元素，排布样式。<br>
+ <br>
+ 在 CSS 中，无论是属性名还是属性值都是对大小写不敏感的。属性与值之间以英文冒号 ':' （U+003A COLON）隔开。属性与值前面、后面与两者之间的空白不是必需的，会被自动忽略。</p>
+
+<p><img alt="css syntax - declaration.png" class="default internal" src="/@api/deki/files/6164/=css_syntax_-_declaration.png" style="border: 1px solid black; padding: 1em;"></p>
+
+<p>目前CSS中有 <a href="/en/CSS/CSS_Reference" title="en/CSS/CSS_Reference">100 多个属性</a> ， 并且几乎有无限多个不同的值。并非所有的属性与值的配对都是被允许的， 每个属性都定义了它的合法值。如果值对给定的属性而言非法时，声明就会被视为无效的，整个声明就会被CSS引擎忽略。</p>
+
+<h2 id="CSS_声明块">CSS 声明块</h2>
+
+<p>声明会按照<strong>块</strong>的形式被组合。声明块（declaration block）以英文左大括号('{' U+007B LEFT CURLY BRACKET)开始，以英文右大括号 '}' (U+007D RIGHT CURLY BRACKET)结束。块有时会嵌套，所以开始与结束大括号必须要匹配。</p>
+
+<p><img alt="css syntax - block.png" class="default internal" src="/@api/deki/files/6165/=css_syntax_-_block.png" style="border: 1px solid black; padding: 1em;"></p>
+
+<p><strong>声明块</strong>里面的声明之间使用英文分号（';'  U+003B SEMICOLON）隔开。声明块可能为空，也就是包含空的声明。声明之间的空格会被忽略，声明块里最后一个声明可以不用分号，不过建议加上，以方便扩展声明块。</p>
+
+<p><img alt="css syntax - declarations block.png" class="default internal" src="/@api/deki/files/6166/=css_syntax_-_declarations_block.png" style="border: 1px solid black; padding: 1em;"></p>
+
+<div class="note">声明块的内容—开始与结束大括号之间的声明，可以放在HTML <a href="/en/HTML/Global_attributes#attr-style" title="https://developer.mozilla.org/en/HTML/Global_attributes#attr-style"><code>style</code></a> 特性里。</div>
+
+<h2 id="CSS_规则">CSS 规则</h2>
+
+<p>如果样式表只能为每个页面元素添加一个声明，那就没有真正发挥出它的价值。其真正的目标是为文档不同部分添加不同的声明。<br>
+ <br>
+ 为此，CSS可以在声明块前面放置选择器（selector)，选择器用来选择页面多个元素的条件。一对选择器与声明块称为规则集（ruleset)，常简称为规则（rule)。</p>
+
+<p><img alt="css syntax - ruleset.png" class="default internal" src="/@api/deki/files/6167/=css_syntax_-_ruleset.png" style="border: 1px solid black; padding: 1em;"></p>
+
+<p>一个元素可能被多个选择器选中，因此会有多个规则，有可能以不同的值去设置同一属性。CSS标准会规定哪个优先级最高并生效, 称之为 <a href="/en/CSS/Getting_Started/Cascading_and_inheritance" title="Cascading and inheritance">层叠（cascade)</a> 算法。</p>
+
+<p><em>有一点需要注意的是，尽管用一组选择器来定义的单个规则集，比用多个单一选择器来定义的多个规则集更加简洁，但这却不适用于规则集的有效性。</em><br>
+ <br>
+ <em>这会导致一个重要的后果：如果其中的一个选择器是无效的，如使用了一个未知的伪元素或伪类，会导致整个选择器都会无效，同时对应的规则都会被忽略。</em></p>
+
+<h2 id="CSS_语句">CSS 语句</h2>
+
+<p>规则是样式表的主体，通常样式表会包括大量的规则列表。但有时候网页的作者也希望在样式表中包括其他的一些信息，比如字符集，导入其它的外部样式表，字体等，这些需要专门的语句表示。</p>
+
+<p>语句以非空格的字符开头，以第一个反花括号或分号结束。</p>
+
+<p><img alt="css syntax - statements Venn diag.png" class="default internal" src="/@api/deki/files/6168/=css_syntax_-_statements_Venn_diag.png" style="padding: 1em;"></p>
+
+<p>语句类型：</p>
+
+<ul>
+ <li>规则。如上，将一组CSS声明与用选择器定义的条件相关联。</li>
+ <li>at规则（<a href="https://developer.mozilla.org/en/CSS/At-rule" title="At-rule">at-rules</a>）。以@ (U+0040 COMMERCIAL AT) 开始，随后是标识符，一直到以分号或右大括号结束。每个at规则由其标识符定义，可能有它自己的语法。at规则涵盖了meta信息（比如 @charset  @import)，条件信息（比如@media  @document), 描述信息（比如@font-face)。</li>
+</ul>
+
+<p>不是上面类型的语句则是非法的，被忽略。<br>
+ <br>
+ 条件规则组（conditional group rules）是特殊的at规则，可以嵌套语句。它里面的语句只有在特定条件下才生效。<br>
+ CSS1 与 CSS2.1 下， 条件规则组里面只能用规则。CSS3 下还可以用一些但不是全部的at规则，见<a href="https://developer.mozilla.org/en/CSS/CSS3#Conditionals" title="en/CSS/CSS3#Conditionals"><em>CSS Conditionals Level 3</em></a>。</p>
+
+<h2 id="其它">其它</h2>
+
+<ul>
+ <li>{{ CSS_key_concepts()}}</li>
+</ul>