创建可读性良好的CSS - Web 开发者指南 编辑

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

还有人喜欢缩进（两个空格、四个空格，或者tab键是最常用的方式）：

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

选取器组

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

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

这条规则将 <h1>, <h2>, 和 <h3> 匹配到的元素设置为相同颜色。

将定义颜色的规则写在一个地方是正确的，因为有些时候，这个颜色值可能需要统一修改。

/* 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 文本。 下一节将描述更多的方式来 详细指定文本的外观 。