CSS 由浏览器解释的样式规则组成，然后应用于文档中的相应元素。样式规则由三部分组成 -

  • 选择器: 选择器是一个将应用样式的 HTML 标签。这可以是任何标签，如 <h1> 或 <table> 等。

  • 属性: 属性是 HTML 标签的一种属性。简单来说，所有 HTML 属性都会转换为 CSS 属性。它们可以是颜色、边框等。

  • 值: 值分配给属性。例如，color 属性的值可以是 red 或 #F1F1F1 等。

您可以按如下方式放置 CSS 样式规则语法:

selector { property: value }

CSS 语法

示例 - 您可以如下定义表格边框 -

table{ border :1px solid #C00; }

这里table是一个选择器，border是一个属性，给定值 1pxsolid #C00 是该属性的值。

您可以根据您的舒适度以各种简单的方式定义选择器。让我将这些选择器一一放置。

类型选择器

这与我们上面看到的选择器相同。再举一个为所有 1 级标题赋予颜色的示例 -

h1 {
   color: #36CFFF; 
}

通用选择器

通用选择器不是选择特定类型的元素，而是简单地匹配名称任何元素类型 -

* { 
   color: #000000; 
}

此规则将文档中每个元素的内容呈现为黑色。

后代选择器

假设您要应用仅当特定元素位于特定元素内部时，样式规则才适用于该特定元素。如下例所示，只有当 <em> 元素位于 <ul> 标记内时，样式规则才会应用于该元素。

ul em {
   color: #000000; 
}

类选择器

您可以根据类属性定义样式规则的元素。具有该类的所有元素都将根据定义的规则进行格式化。

.black {
   color: #000000; 
}

此规则将文档中类属性设置为 black 的每个元素的内容呈现为黑色。你可以让它更具体一点。例如 -

h1.black {
   color: #000000; 
}

此规则仅将类属性设置为 black 的 <h1> 元素的内容呈现为黑色。

您可以应用多个类给定元素的选择器。考虑以下示例 -

<p class = "center bold">
   该段落将由类选择器 center和bold作用。
</p>

ID 选择器

您可以根据元素的 id 属性定义样式规则。所有具有该 id 的元素都将根据定义的规则进行格式化。

#black {
   color: #000000; 
}

此规则将每个具有 id 属性的元素的内容呈现为黑色在我们的文档中设置为黑色。你可以让它更具体一点。例如 -

h1#black {
   color: #000000; 
}

此规则仅将 id 属性设置为 black 的 <h1> 元素呈现黑色内容。

id 选择器的真正威力在于它们被用作后代选择器的基础，例如 -

#black h2 {
   color: #000000; 
}

在此示例中，所有 2 级标题当这些标题位于 id 属性设置为 black 的标记中时，将以黑色显示。

子选择器

您已经看到了后代选择器。还有一种类型的选择器，它与后代选择器非常相似，但具有不同的功能。考虑以下示例 -

body > p {
   color: #000000; 
}

如果所有段落是 <body> 元素的直接子元素，则此规则会将所有段落呈现为黑色。放置在其他元素（例如 <div> 或 <td>）内的其他段落不会对此规则产生任何影响。

属性选择器

您还可以将样式应用于具有特定属性的 HTML 元素。下面的样式规则将匹配所有具有 type 属性且值为 text -

input[type = "text"] {
   color: #000000; 
}

此方法的优点是 <input type = "submit" / > 元素不受影响，颜色仅应用于所需的文本字段。

以下规则应用于属性选择器。

  • p[lang] - 选择具有 lang 属性的所有段落元素。

  • p[lang="fr"] - 选择其lang 的所有段落元素属性的值为"fr"。

  • p[lang~="fr"] - 选择其 lang 的所有段落元素 属性包含单词"fr"。

  • p[lang|="en"] - 选择其 lang 属性的所有段落元素包含完全为"en"或以"en-"开头的值。

多个样式规则

您可能需要定义多个样式规则对于单个元素。您可以定义这些规则，将多个属性和相应的值组合到一个块中，如以下示例中所定义 -

h1 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

这里所有属性和值对都用分号 (;) 分隔。您可以将它们保留在单行或多行中。为了更好的可读性，我们将它们放在单独的行中。

暂时不要担心上面块中提到的属性。这些属性将在接下来的章节中进行解释，您可以在 CSS 参考中找到有关属性的完整详细信息

分组选择器

如果您愿意，您可以将样式应用于许多选择器。只需用逗号分隔选择器，如下例所示 -

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

此定义样式规则也适用于 h1、h2 和 h3 元素。列表的顺序无关紧要。选择器中的所有元素都将应用相应的声明。

您可以将各种 id 选择器组合在一起，如下所示 -

#content, #footer, #supplement {
   position: absolute;
   left: 510px;
   width: 200px;
}