使用样式类和ID

在今天的web上构建风格良好的网站需要深入理解级联样式表。将一系列CSS样式应用于HTML文档，以显示网页的外观。...

在今天的web上构建风格良好的网站需要深入理解级联样式表。将一系列CSS样式应用于HTML文档，以显示网页的外观。

类和id属性

设计师有时必须仅对文档中的某些元素应用样式，而不是对该元素的所有实例应用样式。要实现这些所需的样式，请使用class和ID HTML属性。这些属性是适用于几乎每个HTML标记的全局属性，因此，无论您是为文档中的分区、段落、链接、列表或任何其他HTML片段设置样式，都可以使用class和ID属性来帮助您完成此任务！

类选择器

类选择器为文档中的同一元素或标记设置多个样式。例如，要以不同颜色调出文本的某些部分作为警报，请使用如下类指定段落：

p { color: #0000ff; }p.alert { color: #ff0000; }

这些样式会将所有段落的颜色设置为蓝色（#0000ff），但任何具有类属性alert的段落都将改为红色（#ff0000）。这是因为class属性比第一个CSS规则具有更高的特殊性，后者只使用标记选择器。使用CSS时，更具体的规则将覆盖不太具体的规则。因此，在本例中，更一般的规则设置所有段落的颜色，但第二个更具体的规则仅在某些段落中覆盖该设置。

以下是如何在一些HTML标记中使用此选项：

此段落将以蓝色显示，这是页面的默认值。

本段也将采用蓝色。

由于class属性将覆盖元素选择器样式中的标准蓝色，因此该段落将显示为红色。

在该示例中，p.alert的样式仅适用于使用该alert类的段落元素。要跨多个HTML元素使用该类，请从样式调用的开头删除HTML元素，如下所示：

.alert {background-color: #ff0000;}

该类现在可用于任何需要它的元素。任何具有类属性值alert的HTML片段现在都将获得这种样式。在下面的HTML中，我们有一个段落和一个使用alert类的二级标题。两者都显示红色的背景色：

这一段将用红色书写。

在今天的网站上，类属性通常用于大多数元素，因为从特定性的角度来看，它们比ID更容易使用。您会发现大多数当前HTML页面都充满了类属性，其中一些属性在文档中经常重复，而另一些则可能只出现一次。

id选择器

ID选择器命名特定样式，而不将其与标记或其他HTML元素关联。

假设HTML标记中有一个包含事件信息的分区。您可以为该分区指定事件的ID属性，然后用1像素宽的黑色边框勾勒该分区：

#event { border: 1px solid #000; }

ID选择器的挑战在于它们不能在HTML文档中重复。它们必须是唯一的（您可以在站点的多个页面上使用相同的ID，但在每个HTML文档中只能使用一次）。因此，对于所有需要此边框的三个事件，您必须标识event1、event2和event3的ID属性，并为它们每个设置样式。因此，使用前面提到的event的class属性并同时设置它们的样式会容易得多。