链接
在过去，CSS3 标准的开发人员认为将未单击的链接、已访问的链接、有效链接和鼠标所在的链接区分开是明智之举。在 (X)HTML 中，它们全部具有相同的标记（也就是 < a> 标记），但具有不同的浏览器状态。幸运的是，许多设计人员忽略了这些区别，他们常常向一般链接或鼠标所在的链接提供样式。
一项几乎必要的任务是向一般链接应用一种特定的样式（进而设置它，无论它是未被单击的、被访问的、有效的还是其他类型的链接）。清单 2 提供了这样一个应用程序的一个示例。
清单 2. 链接修饰的 CSS 示例

1 2 3 4 5 6 7 8 9 10

a, a:link, a:active, a:visited {  color: #000000;  text-decoration: none;  font-weight: bold;  background-color: #EEEEEE;  }  a:hover {  text-decoration: underline;  background-color: #FFFFAA;  }

此标记设置一个一般链接，将字体颜色设置为黑色，取消默认的下划线，将字体加粗，以及还将背景颜色设置为白色。在悬停状态下，它重新应用下划线并创 建一种黄色的新背景颜色来突出显示。当在浏览器中测试此标记时，您将会注意到在鼠标悬停自链接上时，背景从浅灰色更改为黄色，当鼠标移开时，从黄色变回浅 灰色。前面已经看到，还可以向 a:hover 应用文本阴影。
当开发人员建立 CSS3 的概念时，他们撇开了任何与 < a> 标记相关的特定样式，将更多精力放在泛型上。因此，本文不会介绍所谓的 transform:rotate，举例而言可将它用于导航中的 < li> 标记。相反，结合本文已经介绍的内容，可以得到类似于清单 3 的样式。
清单 3. 使用一些 CSS3 属性增强的 CSS 导航示例

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

a, a:link, a:active, a:visited {  color: #000000;  text-decoration: none;  font-weight: bold;  background-color: #EEEEEE;  }  li {  text-align: center;  list-style-type: none;  width: 50px;  padding: 10px;  margin: 10px;  background-color:#EEEEEE;  border: 1px solid #000000;  -webkit-border-radius: 10px;  -moz-border-radius: 10px;  border-radius: 10px;  -moz-transform:rotate(-20deg);  -webkit-transform:rotate(-20deg);  transform:rotate(-20deg);  }  li:hover {  text-decoration: underline;  background-color: #FFFFAA;  }

创建没有表格的列
一般而言，表格存在着与布局技术一样的缺陷，因为当您布局包含表格的网页时，您会搞乱数据的逻辑流程。记得在本文开头我们说过，CSS 是 (X)HTML 之上的一层，而 (X)HTML 实际上是通过一种紧凑方式呈现的数据。不错，最佳的设计方式是以 (X)HTML 形式提供数据，没有任何设计或样式：如果它看起来是紧凑的，那么您可以应用一个 CSS 样式表。如果确实需要编辑 (X)HTML 来应用某种设计，请确保您禁用了 CSS，以查看它是否仍然是紧凑的。
出于两种原因，这样做非常重要。第一个原因是让它可供拥有特殊的视觉需求的人访问（因为他们将常常拥有自己的默认样式表设置或软件）。第二个原因是机器需要能够读取您的网站。搜索引擎和其他软件需要能够读取并跟踪您网站的代码，来为它建立索引。
那么，问题是如何创建没有表格的列？很简单，使用两个 < div> 框，如清单 4 所示。
清单 4. 列 div 的 (X)HTML 示例

1 2 3 4 5 6

< div id="left" class="equal-column">  < /div>  < div id="right" class="equal-column">  < /div>  < div class="something-below">  < /div>

然后可以在 CSS 内设置各种设计属性。清单 5 提供了一个示例。
清单 5. 创建 div 列的 CSS 样式

1 2 3 4 5 6 7 8 9 10 11 12 13 14

div.equal-column {  width: 45%;  height:100%:  }  div#left {  float: left;  }  div#right {  float: right;  }  div.something-below {  width: 100%;  clear: both;  }

此标记将两列都设置为宽 45%，然后将左侧的列固定到左侧，将右侧的列固定到右侧。最后，使用另一个带有类 something-below 的 < div>，我们希望它占据两列下的整个屏幕。这是一种有用的技术，可用于快速、轻松地在屏幕上获得两列。
在 CSS3 中，还有另一个巧妙的概念，那就是文本列。换句话说，如果 column-count 属性设置为一个数字，一个段略会自动拆分为两段：

1 2 3 4 5

div#textual-columns {  -webkit-column-count: 2;  -moz-column-count: 2;  column-count: 2;  }

此标记设置一个 ID 为 textual-columns 的 < div> 来得到两个文本列。但是，您可能已注意到，它让每列的高度相等，与您可以在报纸或杂志上看到列相比，这可能有点出乎意料。