1 files changed, 0 insertions, 167 deletions
diff --git a/files/zh-cn/web/guide/css/getting_started/readable_css/index.html b/files/zh-cn/web/guide/css/getting_started/readable_css/index.html
deleted file mode 100644
index 17553c5013..0000000000
--- a/files/zh-cn/web/guide/css/getting_started/readable_css/index.html
+++ /dev/null
@@ -1,167 +0,0 @@
----
-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>