unslug zh-cn: move

5 files changed, 567 insertions, 0 deletions

diff --git a/files/zh-cn/conflicting/learn/css/first_steps/how_css_is_structured/index.html b/files/zh-cn/conflicting/learn/css/first_steps/how_css_is_structured/index.html
new file mode 100644
index 0000000000..17553c5013
--- /dev/null
+++ b/files/zh-cn/conflicting/learn/css/first_steps/how_css_is_structured/index.html
@@ -0,0 +1,167 @@
+---
+title: 创建可读性良好的CSS
+slug: Web/Guide/CSS/Getting_started/Readable_CSS
+translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable
+translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors", "选择器")}}这是<a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started">CSS入门教程</a>系列教程的第6部分；<span class="seoSummary"> 本节讨论了CSS语言自身的样式及语法。你可以更改CSS示例文件的代码外观，来使其更具可读性。</span></p>
+
+<h2 class="clearLeft" id="资料：创建可读性良好的_CSS">资料：创建可读性良好的 CSS</h2>
+
+<p>你可以通过添加空白字符和注释来提高样式表的可读性。你也可以把不同的选择器放到一组中来，这样同一样式可以应用到这一组中。</p>
+
+<h3 id="空白字符">空白字符</h3>
+
+<p>空白字符是指空格、tab字符和换行。你可以通过添加这些空白字符来提高样式表的可读性。</p>
+
+<p>对页面而言，空白字符也是页面的一个组成部分，它的效果就是创造了边距、分割，还有行和列间的空白。</p>
+
+<p>如果你的样式表中一行只有一条规则，那这是使用空白字符最少的情况。但是，对于复杂的样式表而言，这可能不便于阅读，而且维护起来也比较困难。</p>
+
+<p>样式表的书写风格可以根据你自己的喜好来选择。但是，如果你开发的项目需要分享给他人，那就很有必要来制定一些书写规范。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">示例</div>
+
+<p>有人喜欢我们这里使用的紧凑的书写风格，但是如果规则较长的时候就需要来进行分割：</p>
+
+<pre class="brush: css">.carrot {color: orange; text-decoration: underline; font-style: italic;}
+</pre>
+
+<p>也有人喜欢下面这种每行只写一个属性-值的风格：</p>
+
+<pre class="brush: css">.carrot
+{
+color: orange;
+text-decoration: underline;
+font-style: italic;
+}
+</pre>
+
+<p>还有人喜欢缩进（两个空格、四个空格，或者tab键是最常用的方式）：</p>
+
+<pre class="brush: css">.carrot {
+  color: orange;
+  text-decoration: underline;
+  font-style: italic;
+}
+</pre>
+
+<p>还有人喜欢这种垂直对齐的方式（这种方式比较难维护）：</p>
+
+<pre class="brush: css">.carrot
+    {
+    color           : orange;
+    text-decoration : underline;
+    font-style      : italic;
+    }
+</pre>
+
+<p>有些人混合使用空白字符来提高可读性：</p>
+
+<pre class="brush: css">.vegetable         { color: green; min-height:  5px; min-width:  5px }
+.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
+.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }
+</pre>
+</div>
+
+<p>而且，在使用的空白字符的时候，有人喜欢用tab键，有人喜欢使用空格。</p>
+
+<h3 id="注释">注释</h3>
+
+<p>CSS注释以<code>/*</code> 开始，以 <code>*/</code>结束。</p>
+
+<p>你可以在样式表中写些实际意义的注释，也可以是为了测试的目的而写的临时性的注释内容。</p>
+
+<p>对于样式表中的注释内容一定要写在注释标签内，这样浏览器在解析的时候会忽略注释。一定要注意注释的起始标签。样式表的其他部分始终要符合语法规则。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">示例</div>
+
+<pre class="brush: css">/* style for initial letter C in first paragraph */
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+</pre>
+</div>
+
+<h3 id="选取器组">选取器组</h3>
+
+<p>当很多元素具有相同的样式时，你就需要定义一个选择器组，组内用逗号分隔。这样声明的样式就会应用到组内所有的选择器上。</p>
+
+<p>在样式表的其他地方，你也可以单独对这些选择器重新设置样式，这些样式会应用到相应的选择器上。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">示例</div>
+
+<p>这条规则将 {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, 和 {{ HTMLElement("h3") }} 匹配到的元素设置为相同颜色。</p>
+
+<p>将定义颜色的规则写在一个地方是正确的，因为有些时候，这个颜色值可能需要统一修改。</p>
+
+<pre class="brush: css">/* color for headings */
+h1, h2, h3 {color: navy;}
+</pre>
+</div>
+
+<h2 id="实践：添加注释来提高展现力">实践：添加注释来提高展现力</h2>
+
+<ol>
+ <li>编辑你的样式表，将下面的几条规则添加进去（规则顺序可以任意设置）：
+  <pre class="brush: css">strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+p {color: blue;}
+</pre>
+ </li>
+ <li>为了让代码变得可读性更高，你需要通过分析其中的联系来对代码重新排序，并选择你认为最合适的方式来添加一些空白字符和注释。</li>
+ <li>保存文件并刷新浏览器页面，要确保你更改后代码不影响原来的显示效果：
+  <table style="border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="color: blue;"><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>
+ </li>
+</ol>
+
+<div class="tuto_details">
+<div class="tuto_type">挑战</div>
+
+<p>将你的样式表中的部分内容改为注释，以使文档的第一个字母颜色变为红色，但是注意不要改变其他任何内容：</p>
+
+<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+  </tr>
+  <tr>
+   <td style="color: blue;"><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>
+
+<p>（这个不止一种解决方案。）</p>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">一种解决方法：</div>
+其中一种解决办法就是给<code>.carrot</code>添加注释：
+
+<pre class="brush: css">.carrot {
+  color: orange;
+}
+</pre>
+A more specific selector, <code>p#second</code> also works. <a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">查看解决方案</a></div>
+
+<h2 id="接下来是什么">接下来是什么?</h2>
+
+<p>{{ nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Text_styles", "文本样式") }} 本节中，你的示例样式使用了 italic 文本以及 underlined 文本。 下一节将描述更多的方式来 <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Text_styles">详细指定文本的外观</a> 。</p>
diff --git a/files/zh-cn/conflicting/learn/css/first_steps/how_css_works/index.html b/files/zh-cn/conflicting/learn/css/first_steps/how_css_works/index.html
new file mode 100644
index 0000000000..fce3091715
--- /dev/null
+++ b/files/zh-cn/conflicting/learn/css/first_steps/how_css_works/index.html
@@ -0,0 +1,121 @@
+---
+title: CSS如何工作
+slug: Web/Guide/CSS/Getting_started/How_CSS_works
+translation_of: Learn/CSS/First_steps/How_CSS_works
+translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/zh-CN/docs/CSS/开始/为何使用CSS", "为何使用CSS？") }}<span class="seoSummary">这是 <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> 教程的第三章; 这章解释了CSS在浏览器中是如何工作的。 你可以通过分析示例代码来看看样式表中的详细信息。</span></p>
+
+<h2 class="clearLeft" id="信息：CSS_如何工作">信息：CSS 如何工作</h2>
+
+<p>浏览器在展现一个文档的时候，必须要把文档内容和相应的样式信息结合起来展示。 这个处理过程一般分两个阶段：</p>
+
+<ol>
+ <li>浏览器先将标记语言和CSS转换成<a href="/en-US/docs/DOM" title="/en-US/docs/HTML/DOM"><em>DOM</em></a> (文档对象模型)结构。 这时DOM 就代表了电脑内存中的相应文档，因为它已经融合了文档内容和相应的样式表。</li>
+ <li>最后浏览器把 DOM的内容展示出来。</li>
+</ol>
+
+<p>标记语言通过使用“元素”来定义文档结构。你需要使用一些以'&lt;'开头和以'&gt;'结尾的字符串，俗称<em>tags，</em>来构成元素。这些元素一般是在'<code>&lt; &gt;</code>'里加上元素名来作为起始tag，在<span style="line-height: inherit;">'</span><code style="font-size: 14px; line-height: inherit;">&lt; &gt;</code><span style="line-height: inherit;">'里加上'/'和元素名的组合来构成结束tag。标记语言中规定，一些元素可以只有一个起始tag，或者构成元素的tag只有一个，但是这个tag里的名称后面必须要加个'/'。</span></p>
+
+<p>元素也可以作为容器而存在，这样可以把其他元素放到这个元素的起始tag和结束tag之间。</p>
+
+<p>DOM是一种树形结构。 每个元素和非空文本都可以看做是树形结构上的一个结点。DOM结点不再是容器，但是，它可以作为子结点的父类结点而存在。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">示例</div>
+在示例代码中， 我们使用 <code>&lt;p&gt;</code> 标签和它的结束标签 <code>&lt;/p&gt;</code> 构造了一个容器：
+
+<pre class="brush:html">&lt;p&gt;
+  &lt;strong&gt;C&lt;/strong&gt;ascading
+  &lt;strong&gt;S&lt;/strong&gt;tyle
+  &lt;strong&gt;S&lt;/strong&gt;heets
+&lt;/p&gt;
+</pre>
+
+<h2 id="实例">实例</h2>
+
+<p><a href="http://jsfiddle.net/djaniketster/6jbpS/">http://jsfiddle.net/djaniketster/6jbpS/</a></p>
+
+<p>在这个 DOM中， P 结点是一个父结点，它的子结点包含了一些STRONG结点和文本结点。同时，STRONG结点各自也是父结点，它们也分别包含了一些文本结点作为子结点。</p>
+
+<pre><span style="color: black;">P</span>
+├─<span style="color: black;">STRONG</span>
+│ └─"<span style="color: black;">C</span>"
+├─"<span style="color: black;">ascading</span>"
+├─<span style="color: black;">STRONG</span>
+│ └─"<span style="color: black;">S</span>"
+├─"<span style="color: black;">tyle</span>"
+├─<span style="color: black;">STRONG</span>
+│ └─"<span style="color: black;">S</span>"
+└─"<span style="color: black;">heets</span>"</pre>
+</div>
+
+<p>理解 DOM 结构可以帮助你更好的去设计、调试、维护CSS，因为 DOM 结构就是你的CSS和文档内容融合而成的。</p>
+
+<h2 id="行动：分析DOM结构">行动：分析DOM结构</h2>
+
+<h3 id="使用_DOM_Inspector">使用 DOM Inspector</h3>
+
+<p>你需要使用特殊的软件来分析 DOM结构。在这里，假设你使用的是 Mozilla的 <a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> (DOMi) 插件来分析一个 DOM结构。 下面的操作需要你提前安装插件才可以执行。</p>
+
+<ol>
+ <li>使用 Mozilla 浏览器来打开示例文档。</li>
+ <li>在浏览器菜单栏中，选择 <strong>工具 &gt; 查看器</strong>，也可能是选择 <strong>工具&gt; Web 开发者 &gt; 查看器。</strong>
+  <div class="tuto_details">
+  <div class="tuto_type">更多细节</div>
+
+  <p>如果你的 Mozilla 浏览器没有安装 DOMi，你可以到 <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622/" title="https://addons.mozilla.org/en-US/firefox/addon/6622/">安装地址</a> 来安装并重启浏览器，然后再回到这里继续学习。</p>
+
+  <p>如果你不想安装 DOMi (或者你使用的是非Mozilla浏览器)，那么你可以试试下个章节中介绍的 Web X-Ray Goggles。 你也可以直接跳过本章节，进行下一章的学习，这并不会影响你接下来的学习内容。</p>
+  </div>
+ </li>
+ <li>你可以在 DOMi中通过点击文档结点前面的箭头来将他们展开。
+  <p><strong>注意: </strong> HTML 文件中的空格在 DOMi 中会显示为一些空的文本结点，你可以直接忽略掉它。</p>
+
+  <p>通过展开元素结点，你可能会看到下面这样的一部分内容：</p>
+
+  <pre>│ ▼╴<span style="color: black;">P</span>
+│ │ │ ▼╴<span style="color: black;">STRONG</span>
+│ │ └<span style="color: darkblue;">#text</span>
+│ ├╴<span style="color: darkblue;">#text</span>
+│ ►╴<span style="color: black;">STRONG</span>
+│ │</pre>
+
+  <p>选择任何元素都可以在 DOMi 右边的面板中找到关于这个元素更详细的信息。例如，当你选择一个文本结点的时候，右边面板中会显示这个结点的文本信息。</p>
+
+  <p>如果你选择的结点是一个元素，那么 DOMi 会分析这个元素，并在右边面板中展示关于它的一大堆信息内容。同时，样式信息只是这些内容的一部分罢了。 </p>
+ </li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">挑战</div>
+
+<p>在 DOMi 中，点击一个 <small>STRONG</small> 结点。</p>
+
+<p>在 DOMi的右边面板中找出，设置此结点颜色为红色的地方和设置结点内容加粗的地方。 </p>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">查看挑战的解决方案</a></div>
+
+<h3 id="使用_Web_X-Ray_Goggles">使用 Web X-Ray Goggles</h3>
+
+<p><a class="link-https" href="http://hackasaurus.org/en-US/goggles/install/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles </a>显示的信息内容相比较 DOM Inspector要少， 但是它安装和使用的步骤更简单。</p>
+
+<p><span style="line-height: 1.5;">到 </span><a class="link-https" href="http://hackasaurus.org/en-US/goggles/install/" style="line-height: 1.5;" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles</a>的主页。</p>
+
+<ol>
+ <li>将页面中的书签链接拖拽到浏览器工具栏。</li>
+ <li>打开你的示例 HTML 文档。</li>
+ <li>通过点击工具栏中的相应书签来激活Web X-Ray Goggles。 </li>
+ <li>通过在文档中移动鼠标箭头来查看相应的文档元素。</li>
+</ol>
+
+<h2 id="What_next">What next?</h2>
+
+<p>{{ nextPage("/zh-CN/docs/CSS/开始/Cascading_and_inheritance", "层叠和继承") }}如果你做过上文中的练习，你会发现不同位置的style样式是相互影响共同生成了元素的最终展现。在 <a href="/zh-CN/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">下一章</a> 中将会深入解释这种相互联系和相互影响。</p>
diff --git a/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html b/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html
new file mode 100644
index 0000000000..ca5092f2af
--- /dev/null
+++ b/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html
@@ -0,0 +1,105 @@
+---
+title: 为何使用CSS？
+slug: Web/Guide/CSS/Getting_started/Why_use_CSS
+tags:
+  - CSS
+  - 'CSS:入门'
+  - NeedsLiveSample
+translation_of: Learn/CSS/First_steps/How_CSS_works
+translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/zh-CN/docs/CSS/开始/What_is_CSS", "什么是CSS?") }}<span class="seoSummary">这是<a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS入门教程</a> 的第二章节，解释了CSS与文档的关系。在下面的练习中，你将学习如何给你在第一章节中创建的示例文档添加CSS样式表。</span></p>
+
+<h2 class="clearLeft" id="信息_为何使用CSS？">信息: 为何使用CSS？</h2>
+
+<p>CSS帮助您将文档信息的内容 和如何展现它的细节相分离。众所周知，如何展现文档的细节即为<em>样式</em>(<em>style</em>)。您可以将样式从它的内容分离出来，以便您能够：</p>
+
+<ul>
+ <li>避免重复</li>
+ <li>更容易维护</li>
+ <li>为不同的目的，使用不同的样式而内容相同</li>
+</ul>
+
+<div class="tuto_example">
+<div class="tuto_type">例如</div>
+
+<p>您的网站可能有成千上万的页面外观相似。使用CSS，您可以将样式信息存储在公共的文件中以供所有的页面共用。</p>
+
+<p>当用户显示页面时，用户的浏览器将样式信息和页面内容一同加载。</p>
+
+<p>当用户打印页面时，您可以提供不同的样式信息，以便于打印出来的页面更易于阅读。</p>
+</div>
+
+<p>总之，在HTML中，您使用标记语言来描述文档的内容而不是它的样式。您可以使用CSS来指定它的样式而不是它的内容。 (在本教程后续内容中，您会看到此种的例外情况。)</p>
+
+<div class="tuto_details">
+<div class="tuto_type">更多的细节</div>
+
+<p>像HTML之类的标记语言也会提供指定样式的方法。</p>
+
+<p>例如，在HTML中，您可以使用<code>&lt;b&gt;</code>标签来加粗文字，同时，您也可以在页面的<code>&lt;body&gt;标记中指定背景颜色。</code></p>
+
+<p>当您使用CSS时，您通常要避免使用标记语言的这些特性，以便您所有的文档样式信息保存在同一地方。</p>
+</div>
+
+<h2 id="行动：创建样式表">行动：创建样式表</h2>
+
+<ol>
+ <li>在与前面相同的目录中，新建另一个文本文件。该文件将成为您的样式表。请将它命名为：<code>style1.css</code></li>
+ <li>在您的CSS文件中，复制、粘贴下面的行，并保存该文件:
+  <pre class="brush: css">strong {color: red;}
+</pre>
+ </li>
+</ol>
+
+<h3 id="连接您的文档和样式表">连接您的文档和样式表</h3>
+
+<ol>
+ <li>为将您的文档和样式表相连，请编辑您的HTML文件。并添加下面高亮的行：
+  <pre class="brush: html; highlight:[6];">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;link rel="stylesheet" href="style1.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;
+      &lt;strong&gt;C&lt;/strong&gt;ascading
+      &lt;strong&gt;S&lt;/strong&gt;tyle
+      &lt;strong&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+ </li>
+ <li>保存该文件并刷新您的浏览器。该样式表将首字母显示为红色，如下所示：
+  <table style="border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td><span style="color: red;"><strong>C</strong></span>ascading <span style="color: red;"><strong>S</strong></span>tyle <span style="color: red;"><strong>S</strong></span>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<div class="tuto_example" id="challenge">
+<div class="tuto_type">挑战</div>
+
+<p>除了红色外，CSS允许使用其它的颜色名称。</p>
+
+<p>不查询参考手册，请在您使用的样式表找出五个以上的颜色名称。</p>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<p>CSS supports common color names like <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, or <code>black</code>. It also supports some more exotic color names like <code>chartreuse</code>, <code>fuschia</code>, or <code>burlywood</code>. See <a href="/en-US/docs/CSS/color_value" title="The CSS color data type">CSS Color value</a> for a complete list as well as other ways of specifying colors.</p>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">请参考解答。</a></div>
+
+<h2 id="下一节？">下一节？</h2>
+
+<p>{{nextPage("/zh-CN/docs/CSS/开始/How_CSS_works", "CSS如何工作。")}}现在您将示例文档与独立的样式表连在了一起，您已准备好学习<a href="/zh-CN/docs/Web/Guide/CSS/Getting_started/How_CSS_works" title="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works">更多的</a>关于您的浏览器在显示文档时如何将它们组合在一起。</p>
diff --git a/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_b66915031fb62b5fee1201086144e209/index.html b/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_b66915031fb62b5fee1201086144e209/index.html
new file mode 100644
index 0000000000..7fcb01c0b0
--- /dev/null
+++ b/files/zh-cn/conflicting/learn/css/first_steps/how_css_works_b66915031fb62b5fee1201086144e209/index.html
@@ -0,0 +1,115 @@
+---
+title: What is CSS
+slug: Web/Guide/CSS/Getting_started/What_is_CSS
+translation_of: Learn/CSS/First_steps/How_CSS_works
+translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS
+---
+<div>{{CSSTutorialTOC}}</div>
+
+<p>{{previousPage("/zh-CN/docs/CSS/开始", "开始")}} 作为<span class="seoSummary"> <a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 入门指南</a> 教程的第一部分，本文解释了什么是 CSS。你需要创建一个文档以便用于接下来的学习。</span></p>
+
+<h2 class="clearLeft" id="资料_什么是_CSS">资料: 什么是 CSS</h2>
+
+<p>Cascading Style Sheets (<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>) 是一门指定文档该如何呈现给用户的语言。</p>
+
+<p><em>文档</em><span style="line-height: inherit;"> 是信息的集合，它使用一门 </span><em>标记语言</em><span style="line-height: inherit;"> 作为结构。</span></p>
+
+<p>将一篇文档 <em>呈现 </em>给用户是指将文档转换成你的听众能够使用的一种形式。火狐、Chrome或IE等浏览器，用于将文档以可视的形式进行呈现，如在计算机屏幕、投影仪或打印机上。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">示例</div>
+
+<ul>
+ <li>你现在阅读的这个网页就是文档。<br>
+  网页中的信息通常使用标记语言 HTML (HyperText Markup Language) 来组织它的结构。</li>
+ <li>一个应用中的对话框，也称为模态窗口，也是文档。<br>
+  这样的对话框可能也会使用类似于 XUL 这样的标记语言。Mozilla 的有些应用使用了该语言。</li>
+</ul>
+</div>
+
+<p>在该教程中，如果使用像下方这样标题为 <strong>更多细节</strong> 的框，里面会包含额外信息。如果你迫切的想完成整个教程，那么可以跳过这些方框，等到以后有时间再回来看。当然也可以在碰到方框的时候去阅读这些内容，或者更进一步的，按照里面提供的链接去了解更多细节。</p>
+
+<div class="tuto_details">
+<div class="tuto_type">更多细节</div>
+
+<p>一个文档并不等同于一个文件。它甚至可能不会保存在一个文件中。</p>
+
+<p>举例来说，你现在阅读的这个文档就不是保存在一个文件中。当你的浏览器请求该页面时，服务器会查询数据库生成文档，将散落在众多文件中的文档的碎片搜集起来。然而在本教程中，你使用的都是保存在文件中的文档。</p>
+
+<p>关于文档与标记语言的更多信息，可以查看本网站的其他部分—例如：</p>
+
+<table style="background-color: inherit; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td><a href="/en/HTML" title="en/HTML">HTML</a></td>
+   <td>用于 web 页面</td>
+  </tr>
+  <tr>
+   <td><a href="/en/XML" title="en/XML">XML</a></td>
+   <td>用于结构化文档</td>
+  </tr>
+  <tr>
+   <td><a href="/en/SVG" title="en/SVG">SVG</a></td>
+   <td>用于图形</td>
+  </tr>
+  <tr>
+   <td><a href="/en/XUL" title="en/XUL">XUL</a></td>
+   <td>用于 Mozilla 中的用户界面</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>在教程的第二部分，你会看到使用这些标记语言的例子。</p>
+</div>
+
+<p><em> </em>为用户<em>展现 </em><span style="line-height: inherit;">文档意味着将其转换成一个可读性良好的格式。像 Firefox， Chrome 或是 Internet Explorer 这样的浏览器倾向于使用更视觉化的方式来展现文档 — 例如，在计算机屏幕，投影仪或是打印机上。</span></p>
+
+<div class="tuto_details">
+<div class="tuto_type">更多细节</div>
+
+<p>CSS 并非仅仅用于浏览器，也不仅限于视觉展现。按照 CSS 的正式术语来讲，将文档呈现给用户的程序称为<em>用户代理</em>(UA)。浏览器只是用户代理的其中之一。不过在教程的第一部分中，你将只在浏览器中使用 CSS。</p>
+
+<p>要了解更多 CSS 术语定义的相关内容，请查看 CSS 规范的 <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">定义</a>。</p>
+</div>
+
+<h2 id="动手：创建一个文档">动手：创建一个文档</h2>
+
+<ol>
+ <li>在你的电脑中创建一个新的文件夹，用于保存和管理本指南中的练习。</li>
+ <li>打开你的文本编辑器并创建一个新文件。该文件将用于保存后续练习中的文档。</li>
+ <li>将下面的内容复制粘贴进文本文件中。保存文件，将其命名为 <code>doc1.html</code>
+  <pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;/head&gt;
+
+  &lt;body&gt;
+    &lt;p&gt;
+      &lt;strong&gt;C&lt;/strong&gt;ascading
+      &lt;strong&gt;S&lt;/strong&gt;tyle
+      &lt;strong&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+ </li>
+ <li>在你的浏览器中开启一个新的标签页或窗口，打开文件。
+  <p>你会看到一串开头字母大写的文本，像这样：</p>
+
+  <table style="border: 2px outset #36b; padding: 1em;">
+   <tbody>
+    <tr>
+     <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+
+  <p>由于你的浏览器与该 wiki 的设置可能不同，所以你看到的内容与上面显示的不一定相符合。如果在字体、间距或颜色有区别，请不要担心，因为这些内容暂时无关紧要。</p>
+ </li>
+</ol>
+
+<h2 id="接下来是什么？">接下来是什么？</h2>
+
+<p>{{nextPage("/zh-CN/docs/CSS/开始/为何使用CSS", "为什么使用 CSS?")}}现在你的文档中还没有使用 CSS。在<a href="/zh-CN/docs/CSS/Getting_Started/Why_use_CSS" title="/en-US/docs/CSS/Getting_Started/Why_use_CSS">下一节</a>中，你将会使用 CSS 来指定样式。</p>
diff --git a/files/zh-cn/conflicting/learn/css/first_steps/index.html b/files/zh-cn/conflicting/learn/css/first_steps/index.html
new file mode 100644
index 0000000000..585243aa2a
--- /dev/null
+++ b/files/zh-cn/conflicting/learn/css/first_steps/index.html
@@ -0,0 +1,59 @@
+---
+title: CSS入门教程
+slug: Web/Guide/CSS/Getting_started
+tags:
+  - CSS
+  - 'CSS:Getting_Started'
+  - CSS入门
+  - CSS教程
+  - Web
+  - 初学者
+  - 教程
+translation_of: Learn/CSS/First_steps
+translation_of_original: Web/Guide/CSS/Getting_started
+---
+<p> </p>
+
+<p>该  <strong>CSS 指南</strong>  将会带你进入  <a href="/zh-CN/docs/CSS">层叠样式表</a>  (CSS)的世界。本指南将通过实例来引导你学习语言的基本功能(你可以在自己的电脑上运行这些实例)，指南还将阐明能够运行在现代浏览器上的 CSS 标准功能。</p>
+
+<p>本指南适合 CSS 的初学者，但如果你已经学会了 CSS 的基本知识，该指南对你也会有所帮助。若你对 CSS 的经验十分丰富，那么本指南就不适合你了，CSS 主页  <a href="/zh-CN/docs/CSS">列出了</a>  更多的高级资源。</p>
+
+<nav class="fancyTOC"><a class="button" href="/zh-CN/docs/CSS/开始/What_is_CSS" rel="next">什么是 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/为何使用CSS">为什么使用 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/How_CSS_works">CSS 如何工作</a> <a class="button" href="/zh-CN/docs/CSS/开始/Cascading_and_inheritance">层叠与继承</a> <a class="button" href="/zh-CN/docs/CSS/开始/Selectors">选择器</a> <a class="button" href="/zh-CN/docs/CSS/开始/Readable_CSS">可读性良好的 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/Text_styles">文本样式</a> <a class="button" href="/zh-CN/docs/CSS/开始/Color">颜色</a> <a class="button" href="/zh-CN/docs/CSS/开始/Content">内容</a> <a class="button" href="/zh-CN/docs/CSS/开始/Lists">列表</a> <a class="button" href="/zh-CN/docs/CSS/开始/Boxes">盒模型</a> <a class="button" href="/zh-CN/docs/CSS/开始/布局">布局</a> <a class="button" href="/zh-CN/docs/CSS/开始/Tables">表格</a> <a class="button" href="/zh-CN/docs/CSS/开始/媒体">媒体</a></nav>
+
+<h3 id="在开始学习之前你需要准备什么？">在开始学习之前你需要准备什么？</h3>
+
+<ul>
+ <li>一个文本编辑器</li>
+ <li>一个现代浏览器</li>
+ <li>编辑器与浏览器的基本使用方法</li>
+</ul>
+
+<p>虽然没有这个要求，但是教程中的练习可以帮助你学习。你也可以只阅读教程、图片，但这是一种效率很低的学习方式。</p>
+
+<p><strong>注意： </strong>教程包括了CSS操作颜色的方法。因此指南的某些部分会依赖颜色。要想更容易的学习这些内容，你需要一个彩色显示器与<span class="short_text" id="result_box" lang="zh-CN"><span>正常色觉</span></span>。</p>
+
+<h2 id="如何使用本指南">如何使用本指南</h2>
+
+<p>在使用本指南时，需要按顺序仔细阅读每页的内容。如果跳过某个页面，可能会难以理解后续内容。</p>
+
+<h3 id="第一部分：CSS基础">第一部分：CSS基础</h3>
+
+<p>在每页中，通过<em>资料</em> 部分来了解 CSS 的工作原理。通过<em>实践</em> 部分来试着在你的计算机上使用 CSS。</p>
+
+<p>为了测试你对指南的理解程度，可以完成页面底部的挑战内容。挑战内容下面提供了答案的链接，这样你不想看答案的时候没有必要去看它们。</p>
+
+<p>为了深入了解 CSS，可以阅读以<em>更多资料</em> 为标题的方框中内容。你会从其中的超链接里找到更多 CSS 参考资料。</p>
+
+<h3 id="第二部分：CSS的应用范围">第二部分：CSS的应用范围</h3>
+
+<p>指南的第二部分提供了多个实例，用于展示 CSS 与 web 和 Mozilla 的其他技术的使用范围。</p>
+
+<ol>
+ <li><strong><a href="/zh-CN/CSS/Getting_Started/JavaScript">JavaScript</a> </strong></li>
+ <li><strong><a href="/zh-CN/CSS/Getting_Started/SVG_graphics">SVG 图形</a> </strong></li>
+ <li><strong><a href="/zh-CN/CSS/Getting_Started/XML_data">XML 数据</a> </strong></li>
+ <li><strong><a href="/zh-CN/CSS/Getting_Started/XBL_bindings">XBL bindings</a> </strong></li>
+ <li><strong><a href="/zh-CN/CSS/Getting_Started/XUL_user_interfaces">XUL 用户界面</a> </strong></li>
+</ol>
+
+<p> </p>