编写CSS

CSS是HTML的排版语言。本书几乎所有例子都是从HTML代码块开始的，然后才是CSS代码。HTML代码类似如下所示。

  1. <p>A HTML paragraph element</p>

浏览器忽略HTML代码中的空格符、回车符和制表符，但保留文本之间的空白——多个空白符只保留一个。举个例子，下面这几行全都是等价的HTML代码，它们的结果都是显示：An HTML paragraph element。

  1. <p>An HTML paragraph element</p>
  2. <p>An HTML paragraph element</p>
  3. <p>
  4. An HTML paragraph element
  5. </p>

CSS代码类似如下所示。

  1. p {color:red;}

浏览器也会忽略CSS中的空格符、制表符和回车符，因此下面这几种写法都是等价的：

  1. p {color:red;font-size:20px;line-height:1.2;}
  2. p {color: red; font-size: 20px; line-height: 1.2; }
  3. p {
  4.     color: red;
  5.     font-size: 20px;
  6.     line-height: 1.2;
  7. }

前两个例子展示了写在一行中的包含多个声明的CSS规则（第二个例子只不过多了几个空格而已）。第三个例子展示了每个声明各占一行的写法。但这三个例子的效果完全相同。在编写CSS时，我会混用这些写法（多个声明一行，一个声明一行都有）。另外，虽然一条规则中的声明可以按照任何顺序写出来，但我背后还是有一个优先级顺序：

  • display及相关声明；
  • position及相关的声明；
  • margin、padding和border及相关声明；
  • 字体/文本相关声明；
  • 装饰相关声明。比如：
  1. .demo {
  2.     display:block; position:absolute;
  3.     height:100px; width:300px; left:10px; top:10px;
  4.     margin:0 5px; padding:10px;
  5.     font-size:10px; line-height:1.2;
  6.     background-color:#eee; border:1px solid; border-radius:6px;
  7. }

这个顺序首先考虑了我认为对元素最重要的信息，即它们怎么在页面上定位，定位到哪里。随后是不那么重要的信息，包括元素的视觉装饰。有时候，我也会根据需要改变这个顺序。比如，要是margin声明在相应规则里最重要，就把该声明写在最前头。我认为把相关性强的几条声明都写在一行是一个不错的考虑，因为把所有声明都写在一行，会导致CSS代码难以理解，而每个声明各占一行又会让样式表过长，有时候需要来回滚动着看。当然，这完全是个人喜好问题，“仁者见仁，智者见智”。在本书里面，上述几种写法同时存在，有时候是为了适应空格问题，有时候是为了便于添加注释。

不过，无论如何，我都向大家强烈推荐一种组织CSS的方法，那就是在样式表中按照接受样式的HTML标记出现的先后顺序，依次列出相应的CSS规则。千万不能把新样式全都扔到样式表最后去。你可以找一个比较长的样式表，比如本书第6章表单的样式表，你会发现其中的CSS规则与表单的标记顺序完全一致。CSS样式表有时候一写就会非常长，如果不这样按顺序罗列，将来要想找到为某个元素应用样式的某条规则会非常麻烦的。