本节书摘来异步社区《jQuery Mobile入门经典》一书中的第2章，第2.2节，作者：【美】Phil Dutson，更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.2　展现CSS样式

jQuery Mobile入门经典
层叠样式表单用来把平淡无奇的内容转换成为令人兴奋和着迷的体验。可以使用几种不同的方式把样式添加到网站中。

当在style标记或外部文件中添加CSS样式时，可以在单独的一行中书写CSS样式，也可以把它分解成段落的格式。

不熟悉CSS的开发者通常喜欢段落的格式，而熟练的开发者可能使用单独的一行并附带空格或制表符来表示样式和布局的层级。

尽管我确实喜欢某一种格式的风格，不过当所有都完成的时候，我会压缩我的CSS样式以在真实环境中使用，所以保持CSS使用一种格式实际上只在维护时有意义。我们将在第21章讲述压缩以及它可以如何使您受益。

程序清单2.3展示了一段使用段落格式写成的CSS代码片段。每一个样式属性放置在单独的一行中，与根元素保持缩进。可以看到这是易于阅读的格式，不需要进行水平滚动。这个方法的缺点是造成垂直方向上的文件很长（继而因为众多的换行而导致更大的文件），并且没有直观的方法表示层级关系。

程序清单2.3 使用段落风格格式化的CSS代码

程序清单2.3中的CSS代码很常见。分成段落容易阅读，每个CSS属性列在属于自己的一行中也增强了可读性。正如所看到的，在第6、10和15行，包含了一个空行。这是有意为之。即使存在制表符，有时候当在大的CSS文件中滚动时，还是可能会感到混乱，所以空行可以帮助分隔多个部分。

程序清单2.4包含与之前的代码片段相同的样式，但是一个单行的层级风格的CSS编码示例。

程序清单2.4 使用单行的层级风格格式化的CSS代码

可以看到这在样式表中占据更少的垂直空间。这样格式化的样式表把完全相同的代码从18行缩减到4行。

还可以看到，通过使用制表符或空格，元素之间的层级关系可以显现出来。这从第1行和第2行可以明显地看出来。在第1行，body元素前没有制表符，而第2行的h1元素前有制表符，说明它包含在body元素之内。

使用这种方法的缺点是，通常会存在大量的水平滚动（特别是包含针对特定浏览器的样式并同时使用了CSS3标记的时候）。如果不习惯阅读用这种格式写成的CSS，这种方法对调试来说也是个挑战，因为分隔多个属性的字符就只有一个分号。

不管使用何种风格来格式化CSS代码，都可以在HTML文件中实现样式。下面来讨论如何实现。

2.2.1 样式标记

HTML 4已经支持其中一种方法，即使用style标记。这个标记通常包含在head元素中并包括要应用到文档中的所有样式。在HTML文档中使用style元素适合于当要将一些特定的样式应用到当前文档的时候。

程序清单2.5展示了在HTML文档包含的head元素中，使用style元素应用样式的示例。

程序清单2.5 headstyles.html文件的摘录

第1行中可以看到以head元素开始。第2行是title元素。虽然这与样式无关，但它是属于head元素的。第4行是style元素的开始标记。style元素包含type="text/css"，让浏览器知道如何处理这个元素内部的数据。第5行到第23行展示了段落格式写成的CSS，每个元素相互之间没有空行。第24行包含了style的结束标记。剩下第25行是head元素的结束标记。

图2.2所示为headstyles.html文件应用样式渲染后的效果。

通过对比图2.1与图2.2，可以看到样式在表现上可以起到相当的作用。样式不必总是包含在style元素中。它们也可以在外部CSS文件中。

2.2.2 使用外部CSS文件

在内容发布与压缩的多种方法中，使用CSS最常见的选择是把它包含在一个单独的文件中。通过创建一个文件扩展名为.css的文件，然后在head元素中使用一个link元素来调用这个文件完成此功能。

以下是调用或链接到一个外部CSS文件的示例。

在前面的代码片段中，有一个命名为styles.css的文件，与调用它的HTML文件在相同的文件夹中。任何编写好并放入styles.css文件中的样式将会加入到文档中并进行使用。

值得注意的是，可以在子文件夹中保存CSS文件，甚至从外部站点载入。

在HTML文档中不限于使用一个CSS文件，实际上也可以使用多个CSS文件。使用多个外部CSS文件的优势是，分离无须用到的样式，直到网站进入到某个部分，并使代码易于维护成。

分离式样式表的另一个用途是，创建针对特定浏览器的样式，当检测到某个浏览器时才包含对应的样式表。

警告：使用多个CSS文件

使用多个CSS文件可能会有一些比较严重的缺点。如果全部在相同的页面上调用它们，可能会造成HTTP请求阻塞，并在所有文件下载和解析到内存时无意中造成网页加载缓慢。如果基于浏览器检测来使用分离式文件，很可能会遇到为不同版本维护不同文件的麻烦。网站也可能会增加载入时间，因为检测脚本需要加载并根据它们的检测结果来包含相应的CSS文件。

2.2.3 内联样式

虽然可以使用内联样式，但我强烈推荐只在快速原型开发或当确实没有其他方法来完成想要做的事的时候才使用内联样式。

内联样式会覆盖浏览器预置的样式和已经包含进来的样式。它们在调试的时候特别有用，因为可以明确地指定确切的元素并调整它们。

我反对使用内联样式的原因是，它们打破了内容与表现之间的界限。如果把样式“硬编码”到内容块中，这个样式就会一直保留，除非采取措施将这个特定的样式或元素移除。虽然可以使用别的方法移除硬编码的样式，但更简单的就是避免它，从而避免自己在HTML文档中查找糟糕代码的痛苦。

程序清单2.6是一个在不同的HTML元素中使用内联样式的示例。

程序清单2.6 inlinestyles.html文件的全文

程序清单2.6中的代码完全有效。事实上，应用到第8行的内联样式会使div元素在浏览器查看的时候居中，同时也应用上边框和一些内边距。内联样式通过在div元素的开始标记中包含一个style属性来应用到div元素。在第10行，可以看到给p元素的开始标记加了一个style属性。应用到p元素的样式会使文本加粗。

图2.3显示了inlinestyles.html应用了内联样式进行渲染的效果。

既然已经看过了使用CSS表现网页的不同方法，是时候来看看如何使它发挥功能了。