1 files changed, 166 insertions, 0 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
new file mode 100644
index 0000000000..a3ef5d29ec
--- /dev/null
+++ b/files/zh-cn/web/guide/css/getting_started/readable_css/index.html
@@ -0,0 +1,166 @@
+---
+title: 创建可读性良好的CSS
+slug: Web/Guide/CSS/Getting_started/Readable_CSS
+translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable
+---
+<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>