构建既对搜索引擎友好又吸引用户的HTML页面，对于在线业务的成功至关重要。过去，网站结构与格式之间往往存在权衡：对用户越有吸引力，对搜索引擎可能越不友好，反之亦然。
层叠样式表（CSS）的实施改变了这一状况，使设计师能够创建结构上符合SEO要求且对用户具有吸引力的HTML页面。
层叠样式表允许设计师创建结构上符合搜索引擎优化要求且对用户具有吸引力的HTML。
传统HTML格式化依赖表格、字体标签等冗余代码，这些代码会迅速累积，导致下载时间变长及内容代码比降低。此外，更改网站外观需逐一编辑每个页面，耗时费力。
通过使用CSS格式化页面，我们可以专注于围绕内容构建HTML代码，进而聚焦于搜索引擎排名和内容质量。网页格式化将在后续通过对优化后的HTML应用CSS样式来完成，更改网站设计也变得像修改CSS一样简单。
本教程是系列教程的第一篇，将在SEO背景下介绍层叠样式表。第一课将重点介绍如何构建以内容为中心、并展示我们希望搜索引擎看到的HTML页面。
我们将不再依赖表格、图像和字体标签，而是专注于页面内容及其呈现方式。随后将学习如何编写CSS文档、链接到HTML页面以及创建CSS样式。示例中，我们将使用CSS更改标题、段落和链接的外观。
说明
在创建网页之前，首先要考虑的是内容。我们将创建一个产品页面，展示待售的小部件，包含以下信息：
超大号小部件 (Price: $34.99)
- 耐用的塑料设计。
- 适用于大多数应用场景。
- 保证满意。
我们的超大号小部件是世界上最优秀的小部件之一。美国制造，这些小部件比其他所有可用的小部件更耐用，并享有我们100%满意度保证。其耐用的塑料设计使这些轻质小部件成为您下一个项目的理想选择。
由于产品标题是最重要的信息，我们希望将其作为标题包含在内，通过包裹在 <h1> 标签中实现。产品价格需要以不同颜色显示，同样重要，因此将其包裹在 <h2> 标签中。这是迈向SEO的第一步，因为标题标签中的文本比段落标签中的文本具有更高权重。
产品特性列表是无序列表，意味着我们将使用 <ul> 和 <li> 标签来显示带项目符号的列表项。最后，产品描述将是一个段落，因此包裹在 <p> 标签中。
通过将关键词包含在标题、标题标签和段落标签中，我们确保页面相关性在搜索引擎中获得良好排名。请查看以下正在处理的HTML代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Extra Large Widget</title> <meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1" /> </head> <body> <h1>Extra Large Widget</h1> <h2>Price: $34.99</h2> <ul> <li>Durable plastic design.</li> <li>Fits most applications.</li> <li>Guaranteed satisfaction.</li> </ul> <p>Our extra large widgets are some of the best widgets in the world. Made in the USA, these widgets outlast all other widgets available, and are backed by our <a href="guarantee.html">100% satisfaction guarantee</a>. The durable plastic design makes these lightweight widgets ideal for your next project.</p> </body> </html>
如果在浏览器中查看此代码，效果并不理想。如您所见，我还添加了一个指向保修信息页面的链接。结合本页上的其他信息，我们将调整该链接的外观。
接下来，让我们看看如何编写CSS。
首先，创建一个名为 stylesheet.css 的新文本文件，保存在与上述HTML文件相同的文件夹中，并在文本编辑器中打开它。CSS使用“选择器”来确定将样式应用于哪些HTML元素。可以根据HTML标签、类（可应用于任何HTML标签）或id选择器（适用于具有特定id的元素）来选择元素。虽然未来将学习类和id选择器，但今天的教程仅专注于使用标签选择器将样式应用于HTML标签。请考虑以下样式声明：
body { font: 11px/1.2em Arial, Helvetica, sans-serif; color: #000000; }
这是声明CSS样式的语法，您可以通过访问W3C提供的资源了解更多详情。请注意标签选择器 body，它告诉浏览器将此样式应用于 body 标签。
在本例中，我们设置了11像素的字体大小、1.2em的行间距以及Arial字体样式。如果用户没有安装Arial字体，则使用Helvetica；若Helvetica也不可用，浏览器将使用无衬线字体（sans-serif）。通过这一条样式声明，我们可以一次性更改整个页面上所有字体的样式。当网站包含大量页面时，这是一个非常强大的工具。
接下来，让我们继续格式化其他元素。
我们希望将位于 <h1> 标签中的产品标题稍微缩小一些，因为大多数浏览器会将标题内容显示得更大且加粗。我们将保留加粗效果，但使用以下样式声明将文本高度设置为仅16像素：
h1 { font-size: 16px; font-weight: bold; }
同样的方法也适用于包裹在 <h2> 标签中的产品价格。通过为 <h2> 标签创建样式声明，我们可以使价格看起来比默认标题稍小，并将其设置为红色。以下是为此准备的声明：
h2 { font-size: 12px; color: #FF0000; }
接下来，我们希望以较小且斜体的字体显示产品特性。由于它们包含在HTML列表中，只需创建一个适用于HTML <li> 标签的样式声明即可：
li { font-size: 10px; font-style: italic; }
如您所见，将CSS样式应用于HTML标签非常简单。我们已经成功创建了用于格式化标题和列表项的样式声明。唯一剩余的样式是让链接外观不同于默认的蓝色带下划线样式。我们希望链接显示为红色且不带下划线。
然而，当用户将鼠标悬停在链接上时，我们希望它变为灰色并显示下划线。为此，必须对创建HTML链接的 <a> 标签应用样式，并利用一种称为 hover 的CSS伪类。请查看我们将为链接创建的两个样式声明：
a:link, a:visited { color: #FF0000; text-decoration: none; }
a:hover { color: #666666; text-decoration: underline; }
如您所见，这些样式声明与其他声明略有不同。链接有三种状态：正常（normal）、已访问（visited）和悬停（hover）。正常状态是指鼠标未悬停且链接未被访问时的显示方式；已访问状态是指点击后鼠标未悬停时的显示方式；悬停状态是指鼠标悬停时的显示方式。
我们在上面所做的是创建一个同时适用于普通状态（使用 link 样式）和已访问状态（使用 visited 样式）的样式声明。请注意标签选择器后的冒号，用于表示我们要选择的状态。在第一个声明中，我们告诉浏览器以红色显示链接且不带下划线。
第二个声明适用于链接的 hover 状态，指示浏览器将链接设置为灰色并添加下划线。这将为页面增加少量交互性，从而改善用户体验。
我们已经创建了样式表，但您可能注意到这些样式并未出现在HTML文档中。因此，最后一步是将样式表链接到HTML文档。
虽然在HTML页面内部声明样式是可行的，但这不允许我们统一更改多个页面的格式，还会在每个页面中添加冗余代码，是不推荐的。我们可以通过在HTML的head部分放置以下代码，将创建的CSS文件（stylesheet.css）链接到HTML文档：
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
这告诉浏览器从与HTML文档相同的目录中请求名为 stylesheet.css 的文件，并应用其中的样式。现在，我们的HTML文档head部分如下所示：
<head> <title>Extra Large Widget</title> <meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1" /> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> </head>
在Web浏览器中查看文件，确认样式已应用于标题和功能列表。页面上的链接应显示为红色，将鼠标悬停在链接上时，颜色会发生变化并显示下划线。
虽然这是一个简单的示例，但我们涵盖了一些重要要点。第一点是围绕内容来构建HTML代码结构，而不是试图将内容强行塞入某种设计中。
其次，通过将CSS样式声明放在外部文件（stylesheet.css）中并链接到HTML页面，我们创建了一种高效方法：只需更改一个CSS文件，就可以更新任意数量HTML页面的格式。
在下一教程中，我们将研究CSS类选择器，以增加对HTML的格式化操作能力。CSS类可以应用于几乎所有HTML元素，允许我们以不同方式格式化它们，例如显示两个段落，一个为斜体，另一个为彩色文本。