创建可读性良好的CSS

Go to Previous Section:
选择器这是CSS入门教程系列教程的第6部分； 本节讨论了CSS语言自身的样式及语法。你可以更改CSS示例文件的代码外观，来使其更具可读性。

资料：创建可读性良好的 CSS

你可以通过添加空白字符和注释来提高样式表的可读性。你也可以把不同的选择器放到一组中来，这样同一样式可以应用到这一组中。

空白字符

空白字符是指空格、tab字符和换行。你可以通过添加这些空白字符来让提高样式表的可读性。

对页面而言，空白字符也是页面的一个组成部分，它的效果就是创造了边距、分割，还有行和列间的空白。

如果你的样式表中一行只有一条规则，那这是使用空白字符最少的情况。但是，对于复杂的样式表而言，这可能不便于阅读，而且维护起来也比较困难。

样式表的书写风格可以根据你自己的喜好来选择。但是，如果你开发的项目需要分享给他人，那就很有必要来制定一些书写规范。

.carrot {color: orange; text-decoration: underline; font-style: italic;}

.carrot
{
color: orange;
text-decoration: underline;
font-style: italic;
}

.carrot {
  color: orange;
  text-decoration: underline;
  font-style: italic;
}

.carrot
    {
    color           : orange;
    text-decoration : underline;
    font-style      : italic;
    }

.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 }

而且，在使用的空白字符的时候，有人喜欢用tab键，有人喜欢使用空格。

注释

CSS注释以/* 开始，以 */结束。

你可以在样式表中写些实际意义的注释，也可以是为了测试的目的而写的临时性的注释内容。

对于样式表中的注释内容一定要写在注释标签内，这样浏览器在解析的时候会忽略注释。一定要注意注释的起始标签。样式表的其他部分始终要符合语法规则。

/* style for initial letter C in first paragraph */
.carrot {
  color:            orange;
  text-decoration:  underline;
  font-style:       italic;
  }

选取器组

当很多元素具有相同的样式时，你就需要定义一个选择器组，组内用逗号分隔。这样声明的样式就会应用到组内所有的选择器上。

在样式表的其他地方，你也可以单独对这些选择器重新设置样式，这些样式会应用到相应的选择器上。

/* color for headings */
h1, h2, h3 {color: navy;}

实践：添加注释来提高展现力

1. 编辑你的样式表，将下面的几条规则添加进去（规则顺序可以任意设置）：

   strong {color: red;}
   .carrot {color: orange;}
   .spinach {color: green;}
   #first {font-style: italic;}
   p {color: blue;}
   

2. 为了让代码变得可读性更高，你需要通过分析其中的联系来对代码重新排序，并选择你认为最合适的方式来添加一些空白字符和注释。
3. 保存文件并刷新浏览器页面，要确保你更改后代码不影响原来的显示效果：

   Cascading Style Sheets

   Cascading Style Sheets

.carrot {
  color: orange;
}

接下来是什么?

Go to Next Section:
文本样式 本节中，你的示例样式使用了 italic 文本以及 underlined 文本。 下一节将描述更多的方式来 详细指定文本的外观 。