1.2 维护和组织样式表

如果询问CSS专业人员它有什么优点，那么他们将会充满热情地跟你说个没完。但是如果询问他们如何组织他们的样式表，可能得不到多少有意义的回答。不管喜欢与否，样式表刚开始都很小，但是，到最后它都要大到远远超出你的控制能力。添加的规则越多，样式表就越长。考虑一个大公司，如BBC（www.bbc.co.uk），它的网站几乎针对它的许多部分都有不同的设计。这样，很快它的样式表就变得不可管理。你为“article”页上第三列的子列表定义的样式规则是什么？这些规则还在其他什么地方运用了？为了能够回答这些问题，需要一个组织系统。这是设计的早期需要遵循的一个基本原则。

1.2.1 多个目录

也许你正在考虑使用一个默认样式表和一个打印样式表，可能未来还有一个针对移动设备的。这非常好，但是要记住让所有的东西保持一个良好的组织结构，这一点非常重要。不久，将会发现针对一个平台就拥有多个样式表——如果这种方法和面向不同平台的多个样式表相结合的话，事情将变得有点不可管理。

在这里最好的方法是使用文件夹。这一点看起来似乎很明显，但是你一定会为很少有人使用这个方法而感到疑惑不解。如果不用这种方法，和别人一起设计将是一件非常困难的事。如果准备使用多个样式表的话，就应该学习下面这个例子。在例子中，为每个可能的平台和行为（如面向移动设备的handheld和面向可打印页面的简化版的print）都创建了新的文件夹。

（1）创建上层文件夹css。

（2）在这个文件夹内，为每个所针对的平台建立一个文件夹，如handheld、print、screen，等等。

（3）根据该平台的实际，将CSS文件放在相应的子文件夹内。

这样，就拥有了一个非常合理的文件夹结构，该结构可以在<link>元素中体现，如下例所示：

这一点，目前看来似乎并不重要，也不值得这么做。但是，当你开始在某个平台上使用多个样式表时，它将能够保证所有的样式表都在同一特定文件夹下。

你应该时刻谨记：在建立一个大的站点时，需要针对不同的部分设计不同的样式表。例如，如果主页面使用默认的屏幕样式，这些样式一定保留在css/screen文件夹中，而成员页面使用了不同的样式，同样这些样式表一定处于css/screen/members文件夹中。这是一个非常简单的方法，但是这个方法将比目前直观感觉的用处要有用得多。

1.2.2 多样式表

考虑一个包含了为整个站点构建的所有规则的样式表。假定这个站点和BBC的站点一样大，当然，这个网站确实已经够大了。那么所有需求的样式将会构成一个非常长并且完全无法管理的样式表。在这种情况下，将这个样式表分成几个可管理的小部分是一个较好的选择。

模块化CSS

该方法将CSS看成是一个个的模块。例如，许多规则可以直接应用到整个布局上——许多关键规则（字体控制、颜色以及标题）可以作为默认样式规则应用到每个页面。另一方面，一些规则可能只能应用到<form>元素，即这些规则只在部分页面使用。

因此，是不是可以为每个模块创建相应的样式表呢，如默认模块、表单模块以及导航模块等？通过组合这些模块，可以为整个站点构造完整的CSS，而每个样式表还是互相独立的。这样，你可以确定提交按钮的样式一定在表单样式表内。

在此，前面学习过的@import可以重新派上用场了。首先，要链接到一个基本样式表，该样式表将使用@import导入所有的模块化样式表。这种方法还会带来其他好处，比如方便调试以及解决问题。

在下面这个例子中，基本样式表exernal.css导入了两个模块化样式表（default.css和layout.css）并作用于(X)HTML文件。

（1）创建一个新的样式表，并命名为default.css。

（2）将p {color: #F00;}复制到该文件中，并保存该文件。

（3）创建另外一个新的样式表，并命名为layout.css。

（4）将如下的CSS复制到layout.css：#header {height: 100px; width: 100%;border: 1px solid #999;};保存该文件。

（5）打开文件external.css，将其内容用如下的CSS替换：

（6）保存该文件。

所有的CSS都已经准备好了，并通过@import使得Netscape 4.x不感知。现在拥有了三个样式表。第一个样式表external.css用来导入两个模块化的样式表default.css（为主体、段落以及颜色等设置的基本样式）和layout.css（为布局元素如标题所设计的样式）。

（7）打开external.html，确认具有链接到external.css的链接。

（8）找到<h1>Applying CSS Templates</h1>，用一个首部div将其包含，这样可得到如下代码：

<div id="header"><h1>Applying CSS Templates</h1></div>。

（9）保存external.html，然后通过浏览器来浏览该文件。

你将注意到，default.css中的CSS仍然将段落字体变成红色。同时，layout.css中的header规则使得在标题文字周围有一个100像素高×100%宽的框。external.css成功地将它所导入的两个样式表组合，并一起作用于(X)HTML文件。

据此，可以考虑将一些一般的规则加到default.css文件中，而将和布局相关的样式规则加到layout.css中。这也就意味着，你已经在设计的早期考虑了如何很好地组织CSS了，从而使得CSS从设计一开始就保证了可管理性。

1.2.3 在其他的设备上使用屏幕样式表

前面已经提到了通过模块化CSS来帮助你管理针对特定平台的样式表，并特别以打印媒介为例介绍了一个样式表。非常明显，该样式表不包含任何布局或者表单的样式，你真正需要的是在干净的白色背景上打印一些结构良好的类型。

因此，不需要针对打印重新创建一个的新样式表，而可以使用已有的default.css，不过需要在<link>元素上添加media="print"属性。由于default.css不包含任何布局元素，并且没有引入任何其他的样式表，因此打印输出的结果将忽略所有设计中的其他的样式。如果遵循具有一定原则的模块化方法的话，那么可以很容易地避开其他的模块化样式表，而仅仅保留与字体、段落等打印版本可用的通用规则。通过为主样式文件的打印媒介添加<link>元素，可以避开由external.css控制的进一步的导入。另外还需要注意，如果没有为打印指定特定的样式表，打印机将尽可能地像在屏幕上显示一样打印页面设计，这样必将浪费用户大量的墨粉。

（1）在external.html文件现有的<link>元素中添加面向屏幕的media声明：

（2）接着，添加一个<link>元素，并在元素中添加面向打印设备的media声明：

（3）保存external.html，刷新浏览器或者在浏览器中加载该文件。

首先值得注意的是，这种方法和前面讨论的良好的文件夹结构相冲突。在这种方法中，打印样式表来源于css/screen文件夹。要广泛使用这种方法有两种途径：要么就不使用文件夹结构方法，让所有的CSS文件位于同一文件夹下；要么保留文件夹结构，而将default.css文件看成是和媒介无关的样式文件把它放在css根目录中，这样它既可用于屏幕显示也可以用于打印。

但是不管怎么样，这种方法的优点还是比缺点多。因为网站少用了一个样式表，并且在default.css中针对默认CSS样式所做的改变同时还影响打印页面。进一步，如果完全遵守规则，将default.css放在它应该在的地方，那么该方法没有任何缺点而只会带来好处。

由于default.css仅仅包括基本样式规则，因此，将它用到手持设备上似乎也非常合理，这样也可以去除所有和布局相关的信息。但是，这样看起来似乎是有点奇怪。在第15章你将学习一些针对手持设备的特殊方法。

【查看所有评论(0)条】