正如前言中提到的，层叠样式表（Cascading Style Sheet，CSS）有助于实现负责任的Web设计。CSS对开发者构建Web站点的影响很大，并且这种影响可能是无止境的。将网页的大部分甚至是全部的表示信息从(X)HTML文件中移出，并将它们保留在一个样式表中有诸多优点，如降低文件大小、节省网络带宽以及易于维护等。此外，站点的表现信息和核心内容相分离，使得站点的设计人员能够在短暂的时间内对整个网站进行各种各样的修改。但是，这仅仅是CSS带来的好处中的一小部分。等你读完这本书以后，才会真正认识到为什么CSS如此重要，为什么Web的设计人员不断讨论它。

但是，不管CSS做得如何漂亮，CSS本身是没有任何作用的。只有将这些样式应用到结构良好的(X)HTML中才开始体现CSS的作用。这一重要的过程对你来说可能非常简单，但是它往往会成为初学者的第一个绊脚石。在这个阶段，许多经验丰富的开发人员仍然不能灵活自如地应用CSS，因此也就不能完全掌握层叠的精髓。

本章主要介绍将CSS应用到(X)HTML的各种不同方法，以及这些方法的优点和不足。Web设计的各个方面都存在不同的方法，针对不同的任务确定适合的方法是非常重要的。将CSS应用到(X)HTML也是如此——虽然在某些场景下，可能强烈推荐某种方法；但是到了具体的场合，如果你能够在需要时使用其他合适的方法，就表明你具备了随机应变的能力。

本章最后给出了几个有效的建议。这些建议主要探讨一些良好的组织习惯。对于样式表的可读性和组织性而言，这些建议是必不可少的。现在让我们继续吧！

1.1 将CSS应用到(X)HTML

本章主要介绍理解本书内容所需要的一些预备知识。本章将生成一些(X)HTML文件，每个文件都基于某种方法从CSS中得到基本的样式。在后续章节中，具体采用什么方法就由你自己决定了。下面我们逐个地学习这些方法。

1.1.1 准备基本的(X)HTML模板

为了正确运行本章的所有示例，你需要本节所提供的基本模板。该模板是一个简单的(X)HTML页面，包括一些标准的文档部分（<head>和<body>）和一些常用的元素（标题、段落以及一些链接到后续模板的链接列表）。该模板包括一个典型的网页中所有的一切。在此，我们暂时不涉及表格和图像。

为了感受应用CSS所带来的效果，在这个阶段，应该完整地给出这个模板。这有助于你理解下面将要讨论的例子。值得注意的是，该模板中的链接列表将本节中讨论的其他模板联系起来，构成了一个简单但是能说明问题的“迷你”网站。

当然，如果你觉得打字浪费时间的话，可以从www.apress.com下载这个(X)HTML。该文件如下所示：

本章尚且没有涉及CSS的相关内容。因此，你可以根据以下步骤来创建一个基本的模板文件：

（1）创建一个新的base.html文件。

（2）将以上(X)HTML添加到base.html文件中。

（3）将该文件保存到机器上的一个新文件夹下。

（4）在一个新的浏览器窗口中打开这个文件，感受一下它所表示的基本网页。

从现在开始，你将创建一系列的模板，而CSS将以不同的方式来影响每个模板。在以不同的方法来运用CSS时，你会多次访问这个“迷你”站点，并看到不同的效果。

（5）下面我们复制4份base.html，分别命名为inline.html、embedded.html、external.html和imported.html。

（6）将这些新文件保存到和base.html相同的文件夹中。

（7）现在，这4个新文件可以在浏览器中通过base.html访问。

准备工作一切就绪！现在，对于每种方法，可以在相应的(X)HTML文件上工作了。下面将逐个学习将CSS应用到(X)HTML的主要方法。之后，将学习如何组合这些不同方法来获得更好的效果。

1.1.2 内联样式

内联样式（inline style）通过Style属性应用于文档中的特定标记。如果说得更严格些，其中实际的样式值使用name:value或property:value的形式声明。CSS语法的详细解释将在1.3节给出。

（1）在文本编辑器中打开inline.html文件。

（2）找到第一个段落的起始标签<p>。

（3）用<p style="color: #F00">替换<p>，然后保存该模板。这个简单的声明将使得段落文本的字体变为红色。

我们会注意到包含在段落中的文本变成红色。但是只有那段文字受到影响，第二段文字仍然为默认的黑色。这种方法可以应用到页面的<body>部分的任意(X)HTML元素上。

1. 内联样式的优点

这种方法好像还是有用武之地的。刚才你学会了如何通过这种方法利用CSS将一段文字变红。这种方法对于本书中测试简单的CSS示例或许有用。但是，我建议你还是赶紧转到“内联样式的不足”一节吧，不要再探究内联CSS有什么优点——当你有了一定的经验后，你会发现它根本就不是什么好方法。

2. 内联样式的不足

应该使(X)HTML文件中的表现信息尽可能少。将内联样式散布在(X)HTML代码中将使页面变得非常复杂——如果这还不能说明问题，请想象一下为每个段落、每个链接和每个标题等都声明样式，那会是什么样的情景？更进一步，如果要重新设计一个包含数百个页面的网站，并且每个页面都包括若干带内联样式的标记，又会是一个什么样的情形呢？必须进入每个页面，并且单独修改每个CSS属性——这显然不是一个好方法。

1.1.3 内嵌样式

内嵌样式（embedded style）只影响某个特定的(X)HTML模板。但是，与内联样式所不同的是，内嵌样式将所有的样式定义放在一起，作为元素的一部分，位于文档的头部。

（1）在文本编辑器中打开embedded.html文件。

（2）在模板的<head>部分内，<title>元素之后，粘贴如下代码：<style type="text/css">p {color: #F00;}</style>。通过这样一个简单的CSS声明，同样可以将段落文本变成红色。

（3）保存模板，在Web浏览器中打开。

现在，你会看到两个段落中的文本都变成了红色。这一次，那个简单的CSS声明影响了文档中所有段落，因为样式被应用到页面中的所有<p>标记上。

1. 内嵌样式的优点

这种方法适合的场合也比较少。诚然，这种方法比内联CSS要好。它允许一次修改一个元素的所有实例而不是使用重复的内联样式。将所有样式组织到一起是非常明智的。但是和前面一样，实际的(X)HTML文档并不是放置这些样式的最佳位置。许多经验丰富的开发人员会告诉你，在初始测试阶段，这种方法是非常理想的。

2. 内嵌样式的不足

和内联样式一样，内嵌样式将表示部分加入(X)HTML文档，使得(X)HTML文档变大。另外，这些样式需要随每个网页的加载而重复下载。网站上的每个页面都需要它自己的内嵌样式，整个网站的样式改变同样是一件非常麻烦的事情。如果将所有的样式都包含在一个文件中，是不是就可以避免这种麻烦呢？嘿，这确实是一个不错的想法，让我们继续吧！

1.1.4 外部样式

其他的不多说了，但是请务必在日常的CSS站点设计工作中使用这种方法。忘掉所有内联样式和内嵌样式的优点和不足，享受外部样式表（external style sheet）吧！在这个例子中，外部样式表仅仅包含了一个规则，但是这个样式表将是整个网站中最具有影响力的文件。

（1）在文本编辑器中打开external.html文件。

（2）在<head>部分内的<title>元素之后，粘贴代码<link rel="stylesheet"type="text/ css" href="external.css"/>并保存。这行代码告诉浏览器寻找一个名为external.css的外部文件，该文件是一个CSS文件，保存在与external.html相同的目录中。

（3）创建一个新的文件，命名为external.css。

（4）将p {color: #F00;}粘贴到external.css。

（5）将external.css保存到和.html文件相同的文件夹，再一次在Web浏览器中打开该文件。

你会注意到这些段落也变成了红色，但是(X)HTML文件没有任何CSS规则或样式元素。(X)HTML文件和表现部分完全无关，字体的颜色是通过外部样式表来控制的。

想重点说一下的是，你可以利用前面所看到的链接元素将样式表应用到任意多个其他的(X)HTML页面，并且使得这些页面的段落也变成红色。因此，你可以通过改变一个样式表来改变任意多个网页，10个还是100个？无所谓！因为样式是由样式表控制的。

1. 外部样式的优点

这样做会给我们带来多少好处呢？首先，当你考虑站点的CSS时，所需考虑的仅仅是一个外部样式表，而不再是标记。这就意味着整个网站内的样式改变将仅仅需要修改一个样式表。其次，一旦浏览器访问过某个样式表，它将被缓存而无需重新下载。如果其他的(X)HTML页面需要相同或相似代码，浏览器可以利用该CSS文件来替换，这样不仅可以加快页面浏览，还可以节省网络带宽。最后，标记中将不包含任何的表现信息，从而使得文件较小，只含内容。

2. 外部样式的不足

外部样式的不足真的没什么好说的！也许当由于某种原因而无法获取外部CSS文件时，任何(X)HTML页面将都没有样式。但这种情况一般很少发生。

至此，你已经理解了将CSS应用到(X)HTML文档的3种基本方法，并且看到了一些示例。到了这个阶段，许多开发人员将坚持使用链接一个外部文件来实现CSS，而不再考虑别的方法了。这并没有错，因为他们认为已经掌握了一种非常合适的应用CSS的方法。但是对于CSS而言，改进是永无止境的。

还有一种可以将样式应用到网页的方法，该方法称为导入（import）。下面将考虑这种方法。

1.1.5 导入和组合样式

通过@import规则来包括表现信息是Web标准灵活性的一个主要体现。这样，可以在不改变网站结构，即实际内容的情况下，自由地选择表现样式。@import规则并不是专门为了在(X)HTML文档中应用而设计的，但它是一种通过主外部样式表导入一个或多个样式表的方法。并且，通过(X)HTML导入一个外部样式表，可以使得老版本的浏览器（如Netscape 4.x或IE 4）忽略某些特殊的样式。这样就能为这些浏览器提供标准的链接来访问外部样式表。第2章将进一步考虑@import的使用方法。在这里，我们只需要对这种方法如何运作有一个基本的理解。

下面这个例子，假定已经在前一节中创建了一个名为external.css的样式表。

（1）在文本编辑器中打开imported.html。

（2）在<head>部分中，<title>元素后，粘贴代码<style type="text/css">@import url (external.css);</style>并保存该文件。

（3）保存imported.html然后通过浏览器打开它。

看起来没什么不同，这些段落也变成红色。但是你已经朝着明智的、高效的样式表管理迈出了重要的一步。关于这一点在1.2节中有更详细的介绍。

@import规则对于老版本的浏览器（如Netscape 4.x）来说是非常有用的。因为这些浏览器一般对CSS支持较弱，不能支持@import。因此，@import规则可以使得这些浏览器忽略掉所使用的样式表。这些浏览器不是对CSS进行部分处理，而是完全不处理，从而保持(X)HTML不带任何样式。假如像平常一样提供CSS，而这些老版本的Netscape又试图遵循这些规则，那么由于这些浏览器并不完全支持这些规则，可能会产生一些错乱的代码。这一点是应该尽量回避的。

1.1.6 打印样式表

在将来的某个时候（希望就在不久），你的站点会成为一个非常好的艺术作品。那里充满了各种各样的颜色、图形以及有趣的列分隔符。这对你来说非常好，对屏幕而言也不错，但是对于打印来说却不是什么好事。没有人愿意在一个纯黑的或者是极度奢华的背景下打印白色的文本。这将浪费太多的墨。非常幸运的是，这一切都是可以避免的。

所有流行的浏览器都支持最普通的media属性。该属性可以应用到<link>元素中来确定在某种特定环境下使用特定样式表。例如，为了确保只有在显示器上浏览你的网站，用户才能看到你的迷人设计，可以将media="screen"添加到<link>元素中来使用默认样式表。在该元素之后，第二个<link>元素将添加media="print"来调用一个只有基本样式的打印样式表，例如在白色背景下的黑色文本，并且没有任何图形：

如果一个样式表的media属性为screen，那么在页面打印时，将不会使用该样式。但是，如果没有明确说明媒体类型，则样式表将影响打印结果。同样，那些仅仅为打印目标而设定的样式需要设定媒体类型为print，以保证在屏幕显示时不使用这些样式。也就是说，正确地确定媒体类型是至关重要的。关于打印样式表的更详细内容将在本书的第14章予以介绍。但是，现阶段理解媒体属性非常重要。

1.1.7 其他样式表

为什么到了打印样式表就停了呢？下一个最重要的媒体属性是media="handheld"，虽然并不是所有的移动设备都支持该属性，但该属性仍然很常用，此时浏览器将忽略一些内容，允许许多手机用户或者PDA用户根据支持情况访问样式的简化版本。同样，这也要求有另外一个<link>元素。该元素声明media="handheld"，并使用特定的样式表，如handheld.css或mobile.css等。

注意目前IE支持的media声明只有all、screen、print和其他的一些声明，如projection（针对投影仪）、aural（针对语音合成器）和braille（针对盲人），这些都是在针对特殊的设备或者面向特殊的终端用户时而使用的。

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