initial commit

3 files changed, 423 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/cssstylesheet/deleterule/index.html b/files/zh-cn/web/api/cssstylesheet/deleterule/index.html
new file mode 100644
index 0000000000..66346da53f
--- /dev/null
+++ b/files/zh-cn/web/api/cssstylesheet/deleterule/index.html
@@ -0,0 +1,36 @@
+---
+title: CSSStyleSheet.deleteRule()
+slug: Web/API/CSSStyleSheet/deleteRule
+translation_of: Web/API/CSSStyleSheet/deleteRule
+---
+<p>{{ APIRef("CSSOM") }}</p>
+
+<h3 id="Summary" name="Summary">概述</h3>
+
+<p><b>deleteRule</b>方法用来从当前样式表对象中删除指定的样式规则.</p>
+
+<h3 id="Syntax" name="Syntax">语法</h3>
+
+<pre class="eval">stylesheet.deleteRule(<i>index</i>)
+</pre>
+
+<h3 id="Parameters" name="Parameters">参数</h3>
+
+<ul>
+ <li><code>index是一个数字,用来指定样式规则的位置</code>.</li>
+</ul>
+
+<h3 id="Example" name="Example">示例</h3>
+
+<pre> myStyles.deleteRule(0);
+</pre>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li><a href="/zh-CN/DOM/CSSStyleSheet/insertRule" title="zh-CN/DOM/CSSStyleSheet/insertRule">insertRule</a></li>
+</ul>
+
+<h3 id="Specification" name="Specification">规范</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSStyleSheet-deleteRule">deleteRule </a></p>
diff --git a/files/zh-cn/web/api/cssstylesheet/index.html b/files/zh-cn/web/api/cssstylesheet/index.html
new file mode 100644
index 0000000000..1252210d3b
--- /dev/null
+++ b/files/zh-cn/web/api/cssstylesheet/index.html
@@ -0,0 +1,181 @@
+---
+title: CSSStyleSheet
+slug: Web/API/CSSStyleSheet
+tags:
+  - API
+  - CSSOM
+  - CSSOM API
+  - CSSStyleSheet
+  - Interface
+  - Reference
+  - Stylesheets
+  - TopicStub
+translation_of: Web/API/CSSStyleSheet
+---
+<p>{{ APIRef("CSSOM") }}</p>
+
+<p><span class="seoSummary"><strong><code>CSSStyleSheet</code></strong> <span>接口</span>代表一个 <a href="/zh-CN/docs/Web/CSS">CSS</a> 样式表，并允许检查和编辑样式表中的规则列表。</span>它从父类型 {{domxref("StyleSheet")}} 继承属性和方法。</p>
+
+<p>一个 CSS 样式表包含了一组表示规则的 {{domxref("CSSRule")}} 对象。每条 CSS 规则可以通过与之相关联的对象进行操作，这些规则被包含在 {{domxref("CSSRuleList")}} 内，可以通过样式表的 {{domxref("CSSStyleSheet.cssRules", "cssRules")}} 属性获取。</p>
+
+<p>例如，{{domxref("CSSStyleRule")}} 对象中的一条规则可能包含这样的样式：</p>
+
+<pre class="brush: css">h1, h2 {
+  font-size: 16pt;
+}
+</pre>
+
+<p>另一条规则可能是一条“@”规则（<em>at-rule</em>），例如  {{cssxref("@import")}} 或 {{cssxref("@media")}} 等等。</p>
+
+<p>在{{anch("说明")}}部分中查看 <code>CSSStyleSheet</code> 对象的多种获取方式。</p>
+
+<h2 id="属性">属性</h2>
+
+<p>继承自 <em>{{domxref("StyleSheet")}}。</em></p>
+
+<dl>
+ <dt id="cssRules">{{domxref("CSSStyleSheet.cssRules", "cssRules")}} {{ReadOnlyInline}}</dt>
+ <dd>
+ <p>返回一个实时的 {{domxref("CSSRuleList")}}，其中包含组成样式表的 {{domxref("CSSRule")}} 对象的一个最新列表。</p>
+
+ <p>这一般用于获取单条规则，如下：</p>
+
+ <pre><code>styleSheet.cssRules[i] // where i = 0..cssRules.length-1</code></pre>
+
+ <p>使用<code>CSSStyleSheet</code> 的 {{domxref("CSSStyleSheet.insertRule", "insertRule()")}} 和 {{domxref("CSSStyleSheet.deleteRule", "deleteRule()")}} 方法以在 <code>cssRules</code> 中添加或移除规则。</p>
+ </dd>
+ <dt id="ownerRule">{{domxref("CSSStyleSheet.ownerRule", "ownerRule")}} {{ReadOnlyInline}}</dt>
+ <dd>如果一个样式表示通过{{cssxref("@import")}} 规则引入文档，那么 <code>ownerRule</code> 属性会返回相应的{{domxref("CSSImportRule")}}对象，否则返回 <code>null</code>。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p>继承自 <em>{{domxref("StyleSheet")}}。</em></p>
+
+<dl>
+ <dt id="deleteRule">{{domxref("CSSStyleSheet.deleteRule", "deleteRule()")}}</dt>
+ <dd>从样式表中删除特定位置的一条规则。</dd>
+ <dt id="insertRule">{{domxref("CSSStyleSheet.insertRule", "insertRule()")}}</dt>
+ <dd>向样式表的特定位置插入一条新规则，需要提供新规则的完整文本。</dd>
+</dl>
+
+<h2 id="遗留属性">遗留属性</h2>
+
+<p><em>这些遗留属性是很久以前由微软提出的，不应该再使用，但这些属性短期内不会被移除。</em></p>
+
+<dl>
+ <dt>{{domxref("CSSStyleSheet.rules", "rules")}} {{ReadOnlyInline}}</dt>
+ <dd><code>rules</code> 属性的功能与标准的{{domxref("CSSStyleSheet.cssRules", "cssRules")}}属性相同；它返回一个实时的 {{domxref("CSSRuleList")}}， 其中包含样式表中所有规则的一个最新列表。</dd>
+</dl>
+
+<h2 id="遗留方法">遗留方法</h2>
+
+<p><em>这些遗留方法是很久以前由微软提出的，应尽量避免使用，但这些方法短期内不会被移除。</em></p>
+
+<dl>
+ <dt>{{domxref("CSSStyleSheet.addRule", "addRule()")}}</dt>
+ <dd>
+ <p>向样式表添加一条新规则，需要提供应用样式的选择器和应用在匹配元素上的样式块。</p>
+
+ <p>这和 {{domxref("CSSStyleSheet.insertRule", "insertRule()")}} 不同，后者只是简单地将整个传入的规则文本当作一个字符串。</p>
+ </dd>
+ <dt>{{domxref("CSSStyleSheet.removeRule", "removeRule()")}}</dt>
+ <dd>与{{domxref("CSSStyleSheet.deleteRule", "deleteRule()")}}功能相同；从样式表的规则列表的特定位置中移除规则。</dd>
+</dl>
+
+<h2 id="说明">说明</h2>
+
+<p>在一些浏览器中，如果一个样式表加载自不同的域，访问 <code>cssRules</code> 属性时会抛出 <code>SecurityError</code>。</p>
+
+<p>一个样式表最多与一个{{domxref("Document")}}链接，即所应用的那个{{domxref("Document")}}（除非{{domxref("StyleSheet.disabled", "disabled")}}）。一个特定文档的 <code>CSSStyleSheet</code> 对象列表可用 {{domxref("document.styleSheets")}} 属性获取。一个特定的样式表也可以通过其所在对象（<code>Node</code> 或 <code>CSSImportRule</code>）获取，如果有的话。</p>
+
+<p>在文档的样式表加载时，一个 <code>CSSStyleSheet</code> 对象由浏览器自动创建并插入至文档的{{domxref("Document.styleSheets")}}列表中。由于样式表列表不能直接修改，我们没有什么有效的手段取手动创建一个新的 <code>CSSStyleSheet</code> 对象（不过<a href="https://wicg.github.io/construct-stylesheets/">Constructable Stylesheet Objects</a>很快会来到web平台，而且Blink早已支持）。需要创建新的样式表就直接在文档中插入{{HTMLElement("style")}} 或 {{HTMLElement("link")}} 元素吧。</p>
+
+<p>以下是将样式表链接到文档的一些方式（可能不完整）：</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">样式表与文档链接的原因</th>
+   <th scope="col">是否出现在<code>document.<br>
+    styleSheets</code> 列表中</th>
+   <th scope="col">获取样式表对象所在的元素/规则</th>
+   <th scope="col">所在对象的接口</th>
+   <th scope="col">从所在对象获取CSSStyleSheet对象</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>文档中的{{HTMLElement("style")}} 和{{HTMLElement("link")}} 元素</td>
+   <td>是</td>
+   <td>{{domxref("StyleSheet.ownerNode", ".ownerNode")}}</td>
+   <td>{{domxref("HTMLLinkElement")}},<br>
+    {{domxref("HTMLStyleElement")}},<br>
+    或 {{domxref("SVGStyleElement")}}</td>
+   <td>{{domxref("LinkStyle.sheet", ".sheet")}}</td>
+  </tr>
+  <tr>
+   <td>使用CSS {{cssxref("@import")}} 从其他样式表导入并应用到文档的规则</td>
+   <td>是</td>
+   <td>{{domxref("CSSStyleSheet.ownerRule", ".ownerRule")}}</td>
+   <td>{{domxref("CSSImportRule")}}</td>
+   <td>{{domxref("CSSImportRule.styleSheet", ".styleSheet")}}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;?xml-stylesheet ?&gt;</code> processing instruction in the (non-HTML) document</td>
+   <td>是</td>
+   <td>{{domxref("StyleSheet.ownerNode", ".ownerNode")}}</td>
+   <td>{{domxref("ProcessingInstruction")}}</td>
+   <td>{{domxref("LinkStyle.sheet", ".sheet")}}</td>
+  </tr>
+  <tr>
+   <td>HTTP链接头部</td>
+   <td>是</td>
+   <td><em>N/A</em></td>
+   <td>N/A</td>
+   <td>N/A</td>
+  </tr>
+  <tr>
+   <td>用户代理（默认）样式表</td>
+   <td>否</td>
+   <td>N/A</td>
+   <td>N/A</td>
+   <td>N/A</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>规范</th>
+   <th>状态</th>
+   <th>备注</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM", "#cssstylesheet", 'CSSStyleSheet')}}</td>
+   <td>{{Spec2("CSSOM")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Style", "css.html#CSS-CSSStyleSheet", "CSSStyleSheet")}}</td>
+   <td>{{Spec2("DOM2 Style")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.CSSStyleSheet")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/Web/API/CSS_Object_Model">CSS Object Model</a></li>
+ <li><a href="/zh-CN/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information">Using dynamic styling information</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/cssstylesheet/insertrule/index.html b/files/zh-cn/web/api/cssstylesheet/insertrule/index.html
new file mode 100644
index 0000000000..a46b91f5cc
--- /dev/null
+++ b/files/zh-cn/web/api/cssstylesheet/insertrule/index.html
@@ -0,0 +1,206 @@
+---
+title: CSSStyleSheet.insertRule()
+slug: Web/API/CSSStyleSheet/insertRule
+tags:
+  - API
+  - CSSOM
+  - CSSStyleSheet
+translation_of: Web/API/CSSStyleSheet/insertRule
+---
+<div>
+<p>{{ APIRef("CSSOM") }}</p>
+</div>
+
+<p><strong><code>CSSStyleSheet.insertRule()</code> </strong>方法用来给当前样式表插入新的样式规则（<a href="/zh-CN/docs/Web/API/CSSRule">CSS rule</a>），并且包含一些<a href="/zh-CN/docs/Web/API/CSSStyleSheet/insertRule$edit#Restrictions">限制</a>。</p>
+
+<div class="blockIndicator note">
+<p><strong>注意：</strong>尽管 <code>insertRule()</code> 是 {{domxref("CSSStyleSheet")}} 的一个方法，但它实际插入的地方是 <code>{{domxref("CSSStyleSheet", "", "", "1")}}.cssRules</code> 的内部 {{domxref("CSSRuleList")}}。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="syntaxbox"><var>stylesheet</var>.insertRule(<var>rule [</var>, <var>index]</var>)</pre>
+
+<h3 id="Parameters" name="Parameters">参数</h3>
+
+<dl>
+ <dt><code>rule</code></dt>
+ <dd>
+ <p>一个包含了将要插入的规则的 {{domxref("DOMString")}}。规则字符串必须包含的内容取决于它的类型：</p>
+
+ <ul>
+  <li><strong><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax#CSS_statements">rule-sets</a> 类型</strong>（普通带有选择器的规则）<strong>，</strong>需要<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">选择器</a>和样式声明；</li>
+  <li><strong><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule">at-rules</a> 类型</strong>（以 <code>@</code> 开头的规则，如 <code>@import, @media</code> 等）<strong>，</strong>需要 at-identifier 和规则内容。</li>
+ </ul>
+ </dd>
+ <dt><code>index</code> {{optional_inline}}</dt>
+ <dd>一个小于或等于 <code>stylesheet.cssRules.length</code> 的正整数，表示新插入的规则在<code>{{domxref("CSSStyleSheet", "", "", "1")}}.cssRules</code> 中的位置。默认值是 <code>0</code>。（在过去的实现中，这个参数是必需的，详情参见<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/CSSStyleSheet/insertRule$edit#Browser_compatibility">浏览器兼容性</a>。)</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>新插入的规则在当前样式表规则列表中的索引。</p>
+
+<h3 id="限制">限制</h3>
+
+<p>CSS 中存在一些直观和不是太直观能感受到的限制规则影响着某些样式规则能否被插入。违反这些规则可能会导致一些 DOM 异常（{{domxref("DOMException")}}）。</p>
+
+<ul>
+ <li>如果 <code>index</code> &gt; <code>{{domxref("CSSRuleList", "", "", "1")}}.length</code>，该方法会中止并返回一个 <code>IndexSizeError</code> 错误；</li>
+ <li>如果 <code>rule</code> 由于一些 CSS 约束而不能被插入到 <code>index</code> <code>0</code>，该方法会中止并返回一个 <code>HierarchyRequestError</code> 错误；</li>
+ <li>如果 <code>rule</code> 参数中包含超过一条样式规则，该方法会中止并返回一个 <code>SyntaxError</code>；</li>
+ <li>如果尝试在一条普通规则后插入一条 {{cssxref("@import")}} 这种类型的规则，该方法会中止并返回一个 <code>HierarchyRequestError</code> 错误；</li>
+ <li>如果 <code>rule</code> 是 {{cssxref("@namespace")}} 并且规则列表中有另外的 <code>@import</code> 和/或 <code>@namespace</code> 规则，该方法中止并返回一个 <code>InvalidStateError</code> 错误；</li>
+</ul>
+
+<h2 id="Example" name="Example">示例</h2>
+
+<h3 id="在样式表顶部插入新的规则">在样式表顶部插入新的规则</h3>
+
+<p>下面的代码片段将在样式表 <code>myStyle</code> 的顶部插入一条新规则：</p>
+
+<pre class="brush: js"> myStyle.insertRule("#blanc { color: white }", 0);
+</pre>
+
+<h3 id="Notes" name="Notes">实现一个添加样式表规则的函数</h3>
+
+<pre class="brush: js">/**
+ * 在文档中添加一条样式表规则（这可能是动态改变 class 名的更好的实现方法，
+ * 使得 style 样式内容可以保留在真正的样式表中，以斌面添加额外的元素到 DOM 中）。
+ * 注意这里有必要声明一个数组，因为 ECMAScript 不保证对象按预想的顺序遍历，
+ * 并且 CSS 也是依赖于顺序的。
+ * 类型为数组的参数 decls 接受一个 JSON 编译的数组。
+ * @example
+addStylesheetRules([
+  ['h2', // 还接受第二个参数作为数组中的数组
+    ['color', 'red'],
+    ['background-color', 'green', true] // 'true' for !important rules
+  ],
+  ['.myClass',
+    ['background-color', 'yellow']
+  ]
+]);
+ */
+function addStylesheetRules (decls) {
+    var style = document.createElement('style');
+    document.getElementsByTagName('head')[0].appendChild(style);
+    if (!window.createPopup) { /* For Safari */
+       style.appendChild(document.createTextNode(''));
+    }
+    var s = document.styleSheets[document.styleSheets.length - 1];
+    for (var i=0, dl = decls.length; i &lt; dl; i++) {
+        var j = 1, decl = decls[i], selector = decl[0], rulesStr = '';
+        if (Object.prototype.toString.call(decl[1][0]) === '[object Array]') {
+            decl = decl[1];
+            j = 0;
+        }
+        for (var rl=decl.length; j &lt; rl; j++) {
+            var rule = decl[j];
+            rulesStr += rule[0] + ':' + rule[1] + (rule[2] ? ' !important' : '') + ';\n';
+        }
+
+        if (s.insertRule) {
+            s.insertRule(selector + '{' + rulesStr + '}', s.cssRules.length);
+        }
+        else { /* IE */
+            s.addRule(selector, rulesStr, -1);
+        }
+    }
+}</pre>
+
+<h2 id="Notes" name="Notes">兼容补丁</h2>
+
+<p>以下补丁将会在 IE 5-8 中纠正提供给 <code>insertRule()</code> 的参数，使其标准化。to standardize them in Internet Explorer 5–8. 它通过一个函数对 <code>insertRule()</code> 进行补充，使得在参数传递给原生的 <code>insertRule()</code> 函数之前将其中的选择器从规则中分离出来。</p>
+
+<pre><code>(function(Sheet_proto){
+  var originalInsertRule = Sheet_proto.insertRule;
+
+  if (originalInsertRule.length === 2){ // 2 个托管参数: (selector, rules)
+    Sheet_proto.insertRule = function(selectorAndRule){
+      // 首先，从规则中分离选择器
+      a: for (var i=0, Len=selectorAndRule.length, isEscaped=0, newCharCode=0; i !== Len; ++i) {
+        newCharCode = selectorAndRule.charCodeAt(i);
+        if (!isEscaped &amp;&amp; (newCharCode === 123)) { // 123 = "{".charCodeAt(0)
+          // 其次，找到花括号
+          var openBracketPos = i, closeBracketPos = -1;
+
+          for (; i !== Len; ++i) {
+            newCharCode = selectorAndRule.charCodeAt(i);
+            if (!isEscaped &amp;&amp; (newCharCode === 125)) { // 125 = "}".charCodeAt(0)
+              closeBracketPos = i;
+            }
+            isEscaped ^= newCharCode===92?1:isEscaped; // 92 = "\\".charCodeAt(0)
+          }
+
+          if (closeBracketPos === -1) break a; // No closing bracket was found!
+            /*else*/ return originalInsertRule.call(
+            this, // 想要改变的样式表
+            selectorAndRule.substring(0, openBracketPos), // 选择器
+            selectorAndRule.substring(closeBracketPos), // 规则
+            arguments[3] // 插入的索引
+          );
+        }
+
+        // Works by if the char code is a backslash, then isEscaped
+        // gets flipped (XOR-ed by 1), and if it is not a backslash
+        // then isEscaped gets XORed by itself, zeroing it
+        isEscaped ^= newCharCode===92?1:isEscaped; // 92 = "\\".charCodeAt(0)
+      }
+      // Else, there is no unescaped bracket
+      return originalInsertRule.call(this, selectorAndRule, "", arguments[2]);
+    };
+  }
+})(CSSStyleSheet.prototype);</code>
+</pre>
+
+<h2 id="Notes" name="Notes">规范</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('CSSOM', '#dom-cssstylesheet-insertrule', 'CSSStyleSheet.insertRule')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>No change from {{SpecName('DOM2 Style')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleSheet-insertRule', 'CSSStyleSheet.insertRule')}}</td>
+   <td>{{Spec2('DOM2 Style')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="sect1"></h2>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.CSSStyleSheet.insertRule")}}</p>
+
+<h3 id="传统浏览器支持">传统浏览器支持</h3>
+
+<p>为了支持 Internet Explorer 8 和更早版本，请使用: <code>addRule(selector, rule [, index]);</code>。例如：<code>addRule('pre', 'font: 14px verdana'); // add rule at end</code></p>
+
+<p>另外注意非标准的 <code><a href="http://www.quirksmode.org/dom/w3c_css.html#change">removeRule()</a></code> 和 <code><a href="http://www.quirksmode.org/dom/w3c_css.html#access">.rules</a></code> 方法分别用 {{domxref("CSSStyleSheet.deleteRule","deleteRule()")}} 和{{domxref("CSSStyleSheet",".cssRules")}} 代替。</p>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li>{{domxref("CSSStyleSheet.deleteRule")}}</li>
+ <li><a href="http://www-archive.mozilla.org/docs/web-developer/css1technote/css1tojs.html#priority">Cross-Browser CSS-rules ordering (CSS1)</a></li>
+ <li><a href="http://www.quirksmode.org/dom/w3c_css.html">Quirksmode - CSS</a></li>
+</ul>
+
+<p>
+ <audio style="display: none;"></audio>
+</p>