CSS - 语法

CSS 语法

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

您可以将 CSS 样式规则语法设置如下 -

selector { property: value }

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

table{ border :1px solid #C00; }

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

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

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

h1 {
   color: #36CFFF; 
}

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

* { 
   color: #000000; 
}

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

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

ul em {
   color: #000000; 
}

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

.black {
   color: #000000; 
}

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

h1.black {
   color: #000000; 
}

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

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

<p class = "center bold">
   This para will be styled by the classes center and bold.
</p>

您可以根据元素的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" /> 元素不受影响，并且颜色仅应用于所需的文本字段。

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

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

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;
}