在《第1部分》和《第2部分》CSS教程中，我们介绍了如何为HTML标签应用样式、创建样式类以及选择性应用样式。此前内容主要局限于字体处理（如文本颜色、大小及链接悬停行为）。本教程将介绍使用CSS ID选择器格式化网页的概念，并结合前述技术创建一个完全由CSS格式化的页面。
使用CSS格式化能生成更利于搜索引擎优化（SEO）的HTML代码，并有效控制关键词和内容的位置。许多网站使用包含JavaScript悬停效果的复杂图像导航，导致HTML代码臃肿，阻碍搜索引擎爬虫抓取。通过CSS，我们可以用简洁的HTML链接替代臃肿的图像标签和JS调用，在不损害视觉吸引力的前提下，提供易于爬取的代码。
使用CSS进行格式化可以生成更利于搜索引擎优化的HTML代码，并控制代码中关键词和内容的位置。
在本“第3部分”教程中，我们的目标是替换设计中的表格布局。我们将首先确定信息结构以确保其对搜索引擎友好，随后研究如何通过CSS进行格式化展示。
本教程构建的网页包含页眉、导航栏、内容区域和页脚。传统设计师常使用表格划分这些区域，而我们将使用ID选择器创建格式化区域以取代表格。此外，还将简要介绍应用于特定区域内标签的“上下文选择器”。
出于演示目的，我们将创建一个简单的页面布局，但这些技术足以构建极其复杂的设计（如CSS Zen Garden网站所展示的效果）。
说明
创建网站的第一步是理解内容，否则难以制定针对搜索引擎和用户的整体策略。本例将创建一个包含页眉、垂直导航栏、内容区域和页脚的简单网页。请看我们要构建的页面：
我们将优先编写对搜索引擎友好的HTML代码，再使用CSS进行格式化。首先制作页眉：在HTML文档的body部分，将网页标题放入<div>元素内，并使用<h1>标签强调其重要性。代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1" />
<title>Our Example Website</title>
</head>
<body>
<div>
<h1>Our Example Website</h1>
</div>
</body>
</html>
如上所示，页眉元素被包裹在用于后续格式化的<div>中。接下来处理导航部分，将所有链接插入另一个作为垂直菜单的<div>元素中：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1" />
<title>Our Example Website</title>
</head>
<body>
<div>
<h1>Our Example Website</h1>
</div>
<div>
<a href="about.html">About Us</a>
<a href="products.html">Products</a>
<a href="downloads.html">Downloads</a>
<a href="contact.html">Contact Us</a>
</div>
</body>
</html>
注意链接代码非常干净，便于搜索引擎爬虫导航。接着使用另一个<div>元素创建内容区域，此处插入占位文本代表实际内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1" />
<title>Our Example Website</title>
</head>
<body>
<div>
<h1>Our Example Website</h1>
</div>
<div>
<a href="about.html">About Us</a>
<a href="products.html">Products</a>
<a href="downloads.html">Downloads</a>
<a href="contact.html">Contact Us</a>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam scelerisque, leo a pharetra pretium, eros ligula dapibus felis, eget convallis tortor lectus at sem. Quisque quis odio. Etiam nec pede. Etiam vitae metus in augue scelerisque molestie. In non lacus. Proin ultricies, diam id hendrerit semper, nulla ipsum fermentum leo, nec vulputate nibh lorem id mi. Nulla congue pretium nibh. Vestibulum ultrices neque at mauris. In hac habitasse platea dictumst. Fusce interdum, massa eu gravida pulvinar, tortor metus sollicitudin massa, vitae lacinia enim lacus consectetuer augue. Quisque at ante. Sed justo odio, congue eu, congue non, accumsan et, nisl. Mauris non enim. Praesent aliquet. Sed scelerisque, nisl eu lobortis suscipit, mi sapien tempus mi, sed fermentum neque massa in metus.</p>
<p>Curabitur et tortor ac diam tristique feugiat. Duis euismod semper dolor. Sed sapien erat, rutrum et, viverra bibendum, dictum quis, nulla. Morbi nunc nulla, adipiscing at, gravida vitae, ultricies vitae, eros. Nunc feugiat, sem ut congue ultrices, justo libero dignissim felis, nec hendrerit sem erat vitae quam. Curabitur eu purus. Suspendisse sit amet purus. Nulla facilisi. Fusce fringilla interdum leo. Nullam nibh nisi, porta et, feugiat eget, porta sed, sapien.</p>
</div>
</body>
</html>
同样，我们使用<div>标签为内容创建区域。最后对页脚区域做相同操作。此外，在所有<body>标签内的内容外围放置了另一个<div>标签，稍后将用于定义页面布局。最终HTML代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1" />
<title>Our Example Website</title>
</head>
<body>
<div>
<div>
<h1>Our Example Website</h1>
</div>
<div>
<a href="about.html">About Us</a>
<a href="products.html">Products</a>
<a href="downloads.html">Downloads</a>
<a href="contact.html">Contact Us</a>
</div>
<div>
<p>Lorem ipsum dolor sit amet...</p>
<p>Curabitur et tortor ac diam tristique feugiat...</p>
</div>
<div>
<p>Copyright © 2006 Practical eCommerce Magazine</p>
</div>
</div>
</body>
</html>
请注意，上述代码中没有用于格式化的额外标签。若使用HTML表格实现相同效果，会产生大量冗余代码，增加搜索引擎爬虫的解析负担。
接下来需使用CSS进行格式化。首先创建名为styles.css的新样式表并链接到HTML页面，在header中添加以下代码：
<link rel="stylesheet" type="text/css" media="screen, projection" href="styles.css" />该链接仅在支持CSS的浏览器中生效，不支持的浏览器会自动忽略。现在可以为<div>标签添加id属性，以便单独设置样式。例如，头部区域的<div>将拥有名为header的id。分配id属性后，文档body部分的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1" />
<title>Our Example Website</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Our Example Website</h1>
</div>
<div id="nav">
<a href="about.html">About Us</a>
<a href="products.html">Products</a>
<a href="downloads.html">Downloads</a>
<a href="contact.html">Contact Us</a>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet...</p>
<p>Curabitur et tortor ac diam tristique feugiat...</p>
</div>
<div id="footer">
<p>Copyright © 2006 Practical eCommerce Magazine</p>
</div>
</div>
</body>
</html>
如上所示，我创建了一个名为wrapper的<div>包含所有内容，内部嵌套了header、nav、content和footer四个区域，它们将成为页面的各个独立板块。
接下来声明各部分样式，首先格式化主体内容。设置整个页面的字体大小、颜色和边距，CSS声明如下：
body { font: 11px/1.2em Arial, Helvetica, sans-serif; color: #000000; margin: 0px; padding: 0px; }准备使用ID选择器格式化<div>标签。每个选择器名称前以#符号开头（类似类选择器的点号）。首先格式化包含其余内容的wrapper部分：设定页面宽度为770像素，左侧留出边距避免紧贴浏览器边缘，并在除顶部外的三侧添加边框作为容器。CSS声明如下：
#wrapper { margin: 0px 0px 0px 10px; padding: 0px; width: 770px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid #666666; }此时页面内容被灰色边框包围（顶部除外），宽度限制为770像素。wrapper内的所有内容均受此宽度约束。接下来处理头部区域，设置高度并将其与页面其余部分分隔。应用以下代码：
#header { margin: 0px; padding: 15px; height: 50px; border-bottom: 1px solid #666666; }底部边框将页眉与正文分隔，padding设置在边框与文本间留出空间（类似于HTML表格的cellpadding属性）。页面观感改善，但标题文本仍显突兀。现声明仅应用于页眉区域内<h1>标签的样式，这里涉及“上下文选择器”技术：
#header h1 { font-size: 18px; font-weight: bold; color: #FF0000; }该声明指示浏览器：位于页眉部分内的任何<h1>标签均以18像素、加粗、红色显示。值得注意的技巧是，CSS可用图像替换文本；对于使用图形化页眉的网站，可通过CSS实现相同视觉效果，同时保持代码简洁及HTML文本与alt属性的有效性（此进阶内容超出本教程范围）。
接下来看导航部分。期望导航宽度约180像素，位于左侧，内容紧随其右。在导航右侧添加边框以分隔内容。nav部分的样式声明如下：
#nav { margin: 0px; padding: 0px; float: left; width: 180px; border-right: 1px solid #666666; }仅靠此声明尚不足以实现预期效果，需配合内容区域样式才能成型。目前面临一个问题：链接作为内联HTML元素默认显示在同一行，我们希望它们分行显示并具备特定样式。查看样式声明并逐步解析：
#nav a { display: block; font-size: 14px; font-weight: bold; color: #333333; text-decoration: none; padding-left: 15px; padding-top: 5px; padding-bottom: 5px; margin: 0px; border-bottom: 1px solid #666666; }我们针对nav部分内的<a>标签应用样式。首先将display设为block强制换行；接着设置文本样式（更大、加粗的灰色文本），去除下划线；最后通过内边距拉开间距，结合底部边框使链接呈现按钮效果。
借此机会设置链接悬停样式以增加交互性。当鼠标悬停时改变颜色，添加以下声明：
#nav a:hover { color: #FF0000; text-decoration: none; background: #CCCCCC; }由于样式继承，悬停时链接保持原有边框等样式，同时文本变为红色并显示灰色背景，按钮效果完成。
下一个挑战是内容区域。虽有占位内容，但需记住可对内容区内部单个标签进行样式设置以提升展示效果。首先正确格式化content部分：当前文本环绕导航流动并不理想，且导航与内容间缺乏间距。使用以下声明解决：
#content { margin-left: 200px; margin-right: 20px; margin-bottom: 20px; }调整边距优化定位：左边距200像素（含导航宽度及20像素间距），右边距20像素避免文本紧贴边框，底部20像素确保内容与页脚分隔。
最后是页脚。样式声明与页头类似：顶部添加边框分隔，文本略小于正文，并添加内边距防止文本接触边框：
#footer { border-top: 1px solid #666666; padding: 15px; font-size: 10px; }在浏览器预览页面，应能看到一个看似由表格格式化但实为纯CSS构建的网站。尽管这是简化示例，但请尝试调整CSS设置以改进页面。核心目标始终是：用最少的代码以视觉吸引人的方式呈现信息，而CSS正是消除HTML表格依赖、实现这一目标的关键工具。