语法

优质

小牛编辑

126浏览

2023-12-01

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

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

selector { property: value }

Example - 您可以按如下方式定义表格边框 -

table{ border :1px solid #C00; }

这里的表是一个选择器，border是一个属性，给定值为1px solid #C00是该属性的值。

您可以根据自己的舒适度以各种简单的方式定义选择器。让我把这些选择器逐一放入。

类型选择器

这与我们上面看到的选择器相同。再一次，为所有1级标题提供颜色的另一个例子 -

h1 {
   color: #36CFFF; 
}

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

* { 
   color: #000000; 
}

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

假设您希望仅在特定元素位于特定元素内时才将样式规则应用于特定元素。如以下示例所示，样式规则仅在元素位于

标记内时才适用于元素。

ul em {
   color: #000000; 
}

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

.black {
   color: #000000; 
}

此规则在文档中将class属性设置为black每个元素呈现为黑色内容。你可以把它变得更加特别。例如 -

h1.black {
   color: #000000; 
}

此规则仅将

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

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

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

#black {
   color: #000000; 
}

对于我们的文档中id属性设置为black每个元素，此规则将内容呈现为black 。你可以把它变得更加特别。例如 -

h1#black {
   color: #000000; 
}

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

id选择器的真正强大之处在于它们被用作后代选择器的基础，例如 -

#black h2 {
   color: #000000; 
}

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

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

body > p {
   color: #000000; 
}

如果它们是元素的直接子元素，则此规则将呈现所有黑色段落。放在其他元素（如

或）内的其他段落不会对此规则产生任何影响。

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

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

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

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

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

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

这里所有的属性和值对都用semicolon (;) 。您可以将它们保存在一行或多行中。为了更好的可读性，我们将它们分开。

有一段时间，请不要理会上面提到的属性。这些属性将在后面的章节中介绍，您可以在CSS References中找到有关属性的完整详细信息

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

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