10.1.2　CSS

标签页面板的CSS允许你创建标签效果（并排的按钮），并且可以样式化面板，以使得它们显得和标签页成为一个一致的、协调的整体。

·容器。你不需要为包装了所有其他带标签页面板代码的＜div＞标签设置一个样式（实际上，你根本不需要这个div）。然而，如果你想要将标签页面板的宽度限定在某一个尺寸，可能是为了让标签页面板挨着另一个页面元素放置，或者是为了并排放置两组标签页面板，那么，创建一个样式是很方便的。在这种情况下，你可以像下面这样创建一个样式并设置其width属性：

.tabbedPanels{

width：50%；

}

·项目列表和列表项。由于项目列表通常是缩进的，因此，如果想要让标签页和左边界对齐，你需要删除它们左边和右边的任何补白。此外，要让标签页并排放置，而不是一个在另一个之上，必须使列表项浮动。最后，由于列表项前面通常有项目符号，应该删除它们。如下这些基本的样式完成了这些工作：

.tabs{

margin：0；

padding：0；

}

.tabs li{

float：left；

list-style：none；

}

注意：这里列出的CSS代码应用于上面列出的HTML。换句话说，.tabs引用项目符号列表，也就是HTML中的＜ul class="tabs"＞，而.tabs li引用＜ul＞标签中的列表项。

·标签页。本身用列表项中的＜a＞标签表示。还有一些你肯定想要设置的属性。首先，你想要删除通常出现在链接下面的下划线，接下来，你想要把链接的display属性设置为block，以使得padding和margin属性应用于它们。下面是一些基本样式：

.tabs a{

display：block；

text-decoration：none；

padding：3px 5px；

}

当然，你可能想要添加更多的属性，以便真正地让标签页看上去很不错：background-color给标签页带来活力，fonts、font colors和sizes用来使得标签页更突出等。

·激活标签页。突出显示与当前显示的面板相关的标签页面，这是一个好主意。这是一种“你现在在这里”的标记，可以帮助访问者识别面板中的信息。常见的方法是创建class样式，当访问者单击该标签页后，jQuery动态地应用这个样式。这个样式没有强制的属性，但是，它给激活的标签页和面板同样的背景颜色（并且使得常规的标签页的样式和面板不同），这使得选中的标签页与其面板具有一致的视觉效果：

.tabs a.active{

background-color：white；

}

提示：常用的方法是，给面板周围和标签页周围添加一个边框。当你单击了一个标签页，标签页底部的边框消失，并且标签页显得和面板融合为一体了（如图10-1所示）。为了达到这种效果，首先给.tabs a的样式添加一个边框，并且将底部的边距设置为-1像素。负值会将标签页向下移动1像素，实际上会使面板重叠。然后，给tabs a.active样式一个底部边框颜色，使得这个颜色和面板的背景颜色相匹配，边框仍然在那里，但是由于它和面板的背景颜色匹配并且和面板的顶部边框重合，就显得好像标签页和面板是一体的（你还需添加相对于该样式的position：，以便它可以适用于IE 8和之前的版本）。最后，给面板容器添加一个边框，使得它与.tabs a style的边框具有相同的样式、宽度和颜色。本书10.1.4节的教程展示了这种效果的应用。

·面板容器。包含了所有面板需求的div标签的样式：因为所有的标签页都向左浮动（以便它们对齐），你必须“清除”面板容器。否则，它将尝试折返到标签页的右侧，而不是出现在标签页的下面：

.panelContainer{

clear：left；

你也可以使用这一样式来格式化面板的外观。由于面板容器是包围面板的一个盒子，你可以为这个样式添加一个背景颜色、边框、补白等。

·面板。正如前面所提到的，可以使用一个面板容器样式来为面板创建基本的格式，包括边框、背景颜色等。然而，如果愿意的话，你可以通过创建一个.panel样式，将格式化应用于单个的面板div。

·面板内容。要样式化面板中的内容，可以使用子孙选择器来选定每个面板div中的标签。例如，如果想要让一个橙色面板中的一个＜h2＞标签显示Arial字体，可以创建如下的样式：

.panel h2{

color：orange；

font-family：Arial, Helvetica, sans-serif；

}

要格式化面板中的一个段落，创建一个名为.panel p的样式。