initial commit

4 files changed, 492 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/@counter-style/additive-symbols/index.html b/files/zh-cn/web/css/@counter-style/additive-symbols/index.html
new file mode 100644
index 0000000000..5d5fe95399
--- /dev/null
+++ b/files/zh-cn/web/css/@counter-style/additive-symbols/index.html
@@ -0,0 +1,80 @@
+---
+title: additive-symbols
+slug: Web/CSS/@counter-style/additive-symbols
+translation_of: Web/CSS/@counter-style/additive-symbols
+---
+<div>{{CSSRef}}</div>
+
+<p><code><strong>additive-symbols</strong> 描述符</code> 定义符号，用于值可累积的可数的 {{cssxref('system')}}的项 。 <code>additive-symbols定义累积的的元组（tuples）,每个元组项都包含一个符号和一个非负整数的权重。</code>additive system被用于构造<a href="http://en.wikipedia.org/wiki/Sign-value_notation">sign-value numbering</a> （符号-值，指数字的值就是是符号加在一起的值）系统，比如 罗马数字。</p>
+
+<pre class="brush: css no-line-numbers">additive-symbols: 3 "0";
+additive-symbols: 3 "0", 2 "\2E\20";
+additive-symbols: 3 "0", 2 url(symbol.png);</pre>
+
+<p>当系统描述符是循环，数字，拼音，象征，或固定的时候，使用 {{cssxref('symbols')}}代替<code>additive-symbols</code></p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="语法">语法</h2>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="html prettyprint" id="htmlOutput">&lt;ul class="list"&gt;
+   &lt;li&gt;One&lt;/li&gt;
+   &lt;li&gt;Two&lt;/li&gt;
+   &lt;li&gt;Three&lt;/li&gt;
+   &lt;li&gt;Four&lt;/li&gt;
+   &lt;li&gt;Five&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@counter-style additive-symbols-example {
+  system: additive;
+  additive-symbols:V 5, IV 4, I 1;
+}
+.list {
+  list-style: additive-symbols-example;
+}</pre>
+
+<h3 id="结果">结果</h3>
+
+<p>{{ EmbedLiveSample('示例') }}</p>
+
+<h2 id="Specifications" name="Specifications">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#counter-style-symbols', 'additive-symbols')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>初次定义</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("css.at-rules.counter-style.additive-symbols")}}</p>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}</li>
+ <li>The {{cssxref("symbols", "symbols()")}}, functional notation is used for creating anonymous counter styles.</li>
+</ul>
diff --git a/files/zh-cn/web/css/@counter-style/index.html b/files/zh-cn/web/css/@counter-style/index.html
new file mode 100644
index 0000000000..65ef2e55ec
--- /dev/null
+++ b/files/zh-cn/web/css/@counter-style/index.html
@@ -0,0 +1,203 @@
+---
+title: '@counter-style'
+slug: Web/CSS/@counter-style
+translation_of: Web/CSS/@counter-style
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="概要">概要</h2>
+
+<p><code>@counter-style是一个</code> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> ，它让开发者可以自定义counter的样式。 一个 <code>@counter-style规则</code> 定义了如何把一个计数器的值转化为字符串表示。</p>
+
+<p>最初版的CSS定义了一系列很好用的计数器样式， 尽管近几年又添加了很多样式，但是这种限制方式被证明已经不能满足全球化的排版了。<code>@counter-style规则用一种开放的方式弥补了这一缺点，在预定义的样式不能满足需求时，它可以使开发者自定义他们自己的计数器样式。</code></p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="syntaxbox">@counter-style &lt;counter-style-name&gt; {
+    system: &lt;counter system&gt;
+    symbols: &lt;counter symbols&gt;
+    additive-symbols: &lt;additive-symbols&gt;
+    negative: &lt;negative symbol&gt;
+    prefix: &lt;prefix&gt;
+    suffix: &lt;suffix&gt;
+    range: &lt;range&gt;
+    pad: &lt;padding&gt;
+    speak-as: &lt;speak-as&gt;
+    fallback: &lt;counter-style-name&gt;
+}
+</pre>
+
+<h3 id="描述">描述</h3>
+
+<p> </p>
+
+<p>每个 <code>@counter-style</code> 由一个名称标识并具有一组描述符</p>
+
+<dl>
+ <dt>{{cssxref("system")}}</dt>
+ <dd>指定一个算法，用于将计数器的整数值转化为字符串表示。</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("negative")}}</dt>
+ <dd>指定一个符号，当计数器表示的值为负的时候，把这个符号加在值的前面或后面</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("prefix")}}</dt>
+ <dd>指定一个符号，加在标记表示符的前面。前缀在最后阶段才会被加上，所以在计数器的最终表示中，它在{{cssxref("negative")}}前。</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("suffix")}}</dt>
+ <dd>与{{cssxref("prefix")}}类似，suffix指定一个符号，加在标记表示符的后面。</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("range")}}</dt>
+ <dd> 指定一个counter-style生效的范围，如果计数器的值不再这个范围内，那么自定义的counter-style不会生效，counter-style会后退到{{cssxref("fallback")}}的style。</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("pad")}}</dt>
+ <dd>在你想要给标记表示符最小值时使用。比如说，你想要计数器从01开始，经过02，03，04，那么这时可以使用pad了。对于大于pad指定值的表示符，标记会恢复为normal。</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("fallback")}}</dt>
+ <dd>定义一个备用的系统，当自定义的系统不能使用或者计数器的值超过了定义的范围时使用。如果备用系统也不能表示计数器的值，那么备用系统的备用系统（如果有的话）将会启用。如果没有指定备用系统，或者备用系统链不能够正确表示一个值，那么最终会降为十进制样式表示。</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("symbols-descriptor", "symbols")}}</dt>
+ <dd>定义一个符号，用于标记的表示。符号可以包含字符串，图片或自定义的识别码。这个符号怎样构建标记呢？这依赖于system描述符里面所定义的算法。 举个例子，如果system的值是fixed,那么symbols属性指定的固定的N个符号，将被用来表示计数器的前N个值。用完了前N个符号后，列表里剩下的值将使用fallback定义的样式来表示。<br>
+ <br>
+ 下面的@counter-style规则使用图片而不是字符标记。<br>
+
+ <pre class="brush: css">@counter-style winners-list {
+  system: fixed;
+  symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
+  suffix: " ";
+}</pre>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("additive-symbols")}}</dt>
+ <dd>尽管symbols属性中指定的符号可以被system中定义的大部分算法所使用，但是一些system属性的值，比如additive，依赖于本描述符所描述的加性元组。Each additive tuple consists of a counter symbol and a non negative integer weight. 每个加性元组包含一个可数的符号和一个非负证书的权重。The additive tuples must be specified in the descending order of their weights.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("speak-as")}}</dt>
+ <dd>定义如何在语音识别器中读出计数器样式，比如屏幕阅读器。例如基于该描述符的值，标记符号的值可以作为有序列表的数字或者字幕作为无序列表的音频提示读出。</dd>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<pre class="brush: css">@counter-style circled-alpha {
+  system: fixed;
+  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
+  suffix: " ";
+}</pre>
+
+<p>上面的counter style规则在列表中可以如下使用：</p>
+
+<pre class="brush: css">.items {
+   list-style: circled-alpha;
+}
+</pre>
+
+<p>会产生如下列表：</p>
+
+<p>Ⓐ One<br>
+ Ⓑ Two<br>
+ Ⓒ Three<br>
+ Ⓓ Four<br>
+ Ⓔ FIve<br>
+ ....<br>
+ ...<br>
+ Ⓨ Twenty Five<br>
+ Ⓩ Twenty Six</p>
+
+<p>27 Twenty Seven<br>
+ 28 Twenty Eight<br>
+ 29 Twenty Nine<br>
+ 30 Thirty</p>
+
+<p>查看更多例子 <a href="https://mdn.github.io/css-counter-style-demo/">demo page</a>.</p>
+
+<h2 id="Specifications" name="Specifications">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#the-counter-style-rule', 'counter-style')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器支持">浏览器支持</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(33)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(33)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="相关阅读">相关阅读</h2>
+
+<ul>
+ <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}</li>
+ <li>{{cssxref("symbols", "symbols()")}}, the functional notation creating anonymous counter styles.</li>
+</ul>
diff --git a/files/zh-cn/web/css/@counter-style/pad/index.html b/files/zh-cn/web/css/@counter-style/pad/index.html
new file mode 100644
index 0000000000..9dcfb0328a
--- /dev/null
+++ b/files/zh-cn/web/css/@counter-style/pad/index.html
@@ -0,0 +1,86 @@
+---
+title: pad
+slug: Web/CSS/@counter-style/pad
+translation_of: Web/CSS/@counter-style/pad
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>pad</code></strong>属性和自定义记数样式一起使用时, 可以用来限定记数样式的最小长度. 如果某个记数样式小于pad所指定的长度, 那么会用pad指定的填充字符串来填充至指定长度. 如果比pad所指定的长度长, 则会正常显示.</span> Pad 属性的第一个参数是最小长度, 第二个参数是填充字符串. 一个常见的用处是序号编号需要填充两位的时候, 即需要编号"01","02","03",……, 而不仅仅是1, 2, 3...</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="参数">参数</h2>
+
+<pre class="brush: css">pad: 3 "0";
+</pre>
+
+<h3 id="参数值">参数值</h3>
+
+<dl>
+ <dt><code>&lt;integer&gt; &amp;&amp; &lt;symbol&gt;</code></dt>
+ <dd><code>&lt;integer&gt;</code> 表示所有计数样式必须达到的最小长度(必须是非负整数). 如果指定的最小长度没有达到, 将会用<code>&lt;symbol&gt;</code>来填充直到最小长度.</dd>
+</dl>
+
+<h3 id="形式语法">形式语法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">样例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="list"&gt;
+  &lt;li&gt;One&lt;/li&gt;
+  &lt;li&gt;Two&lt;/li&gt;
+  &lt;li&gt;Three&lt;/li&gt;
+  &lt;li&gt;Four&lt;/li&gt;
+  &lt;li&gt;Five&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@counter-style pad-example {
+  system: numeric;
+  symbols: "0" "1" "2" "3" "4" "5";
+  pad: 2 "0";
+}
+
+.list {
+  list-style: pad-example;
+}</pre>
+
+<h3 id="结果">结果</h3>
+
+<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/@counter-style/pad') }}</p>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#descdef-counter-style-pad', 'pad')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("css.at-rules.counter-style.pad")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}</li>
+ <li>{{cssxref("symbols", "symbols()")}}, 该功能符号创建匿名计数器样式 .</li>
+</ul>
diff --git a/files/zh-cn/web/css/@counter-style/speak-as/index.html b/files/zh-cn/web/css/@counter-style/speak-as/index.html
new file mode 100644
index 0000000000..5a2031972a
--- /dev/null
+++ b/files/zh-cn/web/css/@counter-style/speak-as/index.html
@@ -0,0 +1,123 @@
+---
+title: speak-as
+slug: Web/CSS/@counter-style/speak-as
+tags:
+  - '@counter-style'
+  - CSS
+  - CSS Decriptor
+  - Reference
+translation_of: Web/CSS/@counter-style/speak-as
+---
+<div>{{CSSRef}}</div>
+
+<p>当已明确定义 {{cssxref('@counter-style')}} 后，可以用 <code><strong>speak-as</strong></code> 定义在口语场景中如何表述这个 counter 符号。比如作为一篇文章的作者可以指定，当计算机读出这篇文章时，是以数字序号表示 counter，还是仅仅用语音提示。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: css">/* Keyword values */
+speak-as: auto;
+speak-as: bullets;
+speak-as: numbers;
+speak-as: words;
+speak-as: spell-out;
+
+/* @counter-style name value */
+speak-as: &lt;counter-style-name&gt;;
+</pre>
+
+<h3 id="值">值</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>如果 <code><strong>speak-as</strong></code> 的值是 <strong><code>auto</code></strong>，那么它的实际值是由  {{cssxref("system")}} 的值决定的：
+ <ul>
+  <li>如果 <code>system</code> 的值是 <code>alphabetic</code>，<code><strong>speak-as</strong></code> 的值是 <code>spell-out</code><strong>。</strong></li>
+  <li>如果 <code>system</code> 的值是 <code>cyclic</code>，<code><strong>speak-as</strong></code> 的值是 <code>bullets</code>。</li>
+  <li>如果 <code>system</code> 的值是 <code>extends</code>，当被继承的样式上也定义了 <strong><code>speak-as: auto</code></strong>，那么 <code><strong>speak-as</strong></code> 的值就和被继承样式的值相同。</li>
+  <li>其他场景下，表现都与<strong><code> speak-as: numbers</code></strong> 相同。</li>
+ </ul>
+ </dd>
+ <dt><code>bullets</code></dt>
+ <dd>用于表示无序的列表项，具体的发音由{{Glossary("user agent")}}决定。</dd>
+ <dt><code>numbers</code></dt>
+ <dd>根据文档语言的规范，读出计数器标明的数字的值。</dd>
+ <dt><code>words</code></dt>
+ <dd>在显示上，由用户代理决定计数器的值，读的时候以单词为单位。</dd>
+ <dt><code>spell-out</code></dt>
+ <dd>依然是用户代理决定了计数器，但它将会以逐个字母的形式被读出。如果遇到某个计数器，用户代理不知道要如何读时，会将它当做 <code>numbers</code> 处理。</dd>
+ <dt><code>&lt;counter-style-name&gt;</code></dt>
+ <dd>The name of another counter style, specified as a {{cssxref("&lt;custom-ident&gt;")}}. If included, the counter will be spoken out in the form specified in that counter style, kind of like specifying the {{cssxref("fallback")}} descriptor. If the specified style does not exist, <code>speak-as</code> defaults to <code>auto</code>.它的另一个名称是 {{cssxref("&lt;custom-ident&gt;")}}。使用了这个值后，计数器将以被指定的样式名的形式读出，和声明了 {{cssxref("fallback")}} 的效果类似。如果被指定的样式不存在，<code>speak-as</code> 将回退为<code>auto</code>。 </dd>
+</dl>
+
+<h3 id="语法_2">语法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="例子">例子</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="list"&gt;
+  &lt;li&gt;One&lt;/li&gt;
+  &lt;li&gt;Two&lt;/li&gt;
+  &lt;li&gt;Three&lt;/li&gt;
+  &lt;li&gt;Four&lt;/li&gt;
+  &lt;li&gt;Five&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@counter-style speak-as-example {
+  system: fixed;
+  symbols:     ;
+  suffix: " ";
+  speak-as: numbers;
+}
+
+.list {
+  list-style: speak-as-example;
+}</pre>
+
+<h3 id="结果">结果</h3>
+
+<p>{{ EmbedLiveSample('例子') }}</p>
+
+<h2 id="无障碍问题">无障碍问题</h2>
+
+<p>这个属性的无障碍支持度不太友好。请别指望靠它能正确地传递出页面的核心信息。</p>
+
+<p><a href="https://css-tricks.com/lets-talk-speech-css/">Let's Talk About Speech CSS | CSS Tricks</a></p>
+
+<h2 id="Specifications" name="Specifications">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#counter-style-speak-as', 'speak-as')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("css.at-rules.counter-style.speak-as")}}</p>
+
+<h2 id="参考">参考</h2>
+
+<ul>
+ <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}</li>
+ <li>{{cssxref("symbols", "symbols()")}}, the functional notation creating anonymous counter styles.</li>
+</ul>