initial commit

1 files changed, 124 insertions, 0 deletions

diff --git a/files/zh-cn/web/guide/css/getting_started/cascading_and_inheritance/index.html b/files/zh-cn/web/guide/css/getting_started/cascading_and_inheritance/index.html
new file mode 100644
index 0000000000..8bc02fb698
--- /dev/null
+++ b/files/zh-cn/web/guide/css/getting_started/cascading_and_inheritance/index.html
@@ -0,0 +1,124 @@
+---
+title: 层叠和继承
+slug: Web/Guide/CSS/Getting_started/Cascading_and_inheritance
+translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/zh-CN/docs/CSS/开始/How_CSS_works", "CSS如何工作")}} <span class="seoSummary">这是 <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started" title="en/CSS/Getting Started">开始学CSS</a> 教程的第4节; 这一节介绍了样式表中元素如何从父级继承样式，以及不同层级的样式如何相互作用决定最终显示效果。教给你通过在样式表中添加级联样式语句，进一步控制页面元素的展现。</span></p>
+
+<h2 class="clearLeft" id="资料_层叠和继承">资料: 层叠和继承</h2>
+
+<p>一个元素的样式，可以通过多种方式来定义，而多种定义方式之间通过复杂的影响关系决定了元素的最终样式。这种复杂既造就了CSS的强大，也导致CSS显得如此“混乱”而且难以调试。</p>
+
+<p>对于<em>层叠</em>来说，共有三种主要的样式来源：</p>
+
+<ul>
+ <li>浏览器对HTML定义的默认样式。</li>
+ <li><span style="line-height: 1.5;">用户定义的样式。</span></li>
+ <li><span style="line-height: 1.5;">开发者定义的样式，可以有三种形式：</span>
+  <ul>
+   <li><span style="line-height: 1.5;">定义在外部文件（外链样式）：本教程中案例主要是通过这种形式定义样式。</span></li>
+   <li>在页面的头部定义（内联样式）：通过这种形式定义的样式只在本页面内生效。</li>
+   <li>定义在特定的元素身上（行内样式）：这种形式多用于测试，可维护性较差。</li>
+  </ul>
+ </li>
+</ul>
+
+<p>用户定义的样式表会覆盖浏览器定义的默认样式，然后网页开发者定义的样式又会覆盖用户样式。在这个教程中，你作为网页的开发者只需要关注开发者样式。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">示例</div>
+
+<p>就你现在看到的这个页面而言，有一部分样式是来自浏览器定义的默认的HTML样式。</p>
+
+<p>有一部分样式可能来自用户通过浏览器自定义的样式，或者为浏览器引入自定义的样式表。例如，在Firefox中，在“首选项”对话框中可以自定义样式，也可以建立一个单独的<code>userContent.css</code> 样式文件并放到“用户配置”的文件夹中。</p>
+
+<p>另外，还有一部分样式来自外链的wiki服务器上的样式表。</p>
+</div>
+
+<p>在浏览器中打开前面写的例子页面，你会发现 {{ HTMLElement("strong") }} 元素中的文字会比其他文字粗一些。这些样式就是在浏览器定义的默认HTML样式。</p>
+
+<p>而{{ HTMLElement("strong") }} 元素是红色的，这是你在自己的样式表中定义的样式。</p>
+
+<p>同时，{{ HTMLElement("strong") }} 作为 {{ HTMLElement("p") }} 的子元素，也继承了 {{ HTMLElement("p") }} 的样式。同样的， {{ HTMLElement("p") }} 也从 {{ HTMLElement("body") }} 中继承了许多的样式。</p>
+
+<p>再来看看优先级，从高到低依次为：网页开发者定义的样式、网页阅读者定义的样式、浏览器的默认样式。</p>
+
+<p>对继承的元素来说，子元素自身的样式优先级高于从父级继承来的样式。</p>
+
+<p>当然，关于优先级还有更多的知识点，我们会在后面的章节中继续介绍。</p>
+
+<div class="tuto_details">
+<div class="tuto_type">更多细节</div>
+
+<p>CSS 另外提供了一个!important关键字，用户可以通过使用这个关键字使自己定义的样式覆盖掉开发者定义的样式。</p>
+
+<p>这就意味着，作为开发者，你很难准确的预知页面<span style="line-height: 1.5;">最终</span><span style="line-height: 1.5;">在用户电脑上的显示效果。</span></p>
+
+<p>如果你想了解关于层级和继承的全部细节，请阅读CSS文档中的相关章节（英文）：<a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a>。</p>
+</div>
+
+<h2 id="动手_使用继承">动手: 使用继承</h2>
+
+<ol>
+ <li>编辑你之前创建的style.css文件。</li>
+ <li>把下面这行代码粘到以前的文件中，粘在之前的代码的上面或下面都可以。 不过，加在css文件的头部会更符合逻辑一些，因为在页面中 {{ HTMLElement("p") }} 是 {{ HTMLElement("strong") }} 的父级元素:
+  <pre class="brush:css">p {color: blue; text-decoration: underline;}
+</pre>
+ </li>
+ <li>现在刷新你的浏览器，应该可以看到页面的变化。页面里所有的文本应该都被加上了下划线，也包括大写的首字母。{{ HTMLElement("strong") }} 从它的父级元素 {{ HTMLElement("p") }} 上继承到了下划线的样式。<br>
+
+  <p>但是，{{ HTMLElement("strong") }} 元素仍然是红色的。红色是它本身的样式，所以优先级会超过父级元素 {{ HTMLElement("p") }} 的蓝色.</p>
+ </li>
+</ol>
+
+<table style="background-color: #f4f4f4; border: 1px solid #36b; padding: 1em;">
+</table>
+
+<table style="border: 2px outset #36b; margin-right: 2em; padding: 1em;">
+ <caption>修改前</caption>
+ <tbody>
+  <tr>
+   <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<table style="border: 2px outset #36b; padding: 1em;">
+ <caption>修改后</caption>
+ <tbody>
+  <tr>
+   <td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_example">
+<div class="tuto_type">挑战</div>
+改动一下样式表，完整如下效果：只在红色的字母上加下划线：
+
+<table style="border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">参考答案</div>
+
+<p>把定义在 {{ HTMLElement("p") }} 标签上的下划线样式移到 {{ HTMLElement("strong") }} 标签上。改后代码如下：</p>
+
+<pre class="brush: css">p {color: blue; }
+strong {color: red; text-decoration: underline;}
+</pre>
+
+<p> </p>
+<a class="hideAnswer" href="#challenge">隐藏答案</a></div>
+<a href="#tutochallenge" title="点击显示参考答案">查看参考答案</a></div>
+
+<h2 id="下一节">下一节?</h2>
+
+<p>{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors", "选择器")}} 到目前为止，你在样式表中所有的样式都是为标签上的，<code>&lt;p&gt;</code> 和 <code>&lt;strong&gt;，你可以尝试着改变一下页面中它们的样式。</code>下一节会介绍怎样通过<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors" style="line-height: 1.5;" title="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors">更有效的方式</a><span style="line-height: 1.5;">定义样式。</span></p>