Style Specification Format in CSS

我们将讨论 CSS 中的样式规则格式。让我们先理解样式规则的含义。

样式规则

CSS 中使用 <style> 标签或 “style” 属性定义的规则和声明集合称为样式规则。

样式能让网页上的 HTML 元素看起来更美观，吸引更多用户。我们可以利用 CSS 为元素提供样式。

样式规则格式

样式规则格式是用于定义 HTML 元素样式规则的结构。

语法

“选择器” 用于选择我们要应用样式的 HTML 元素。“property1” 和 “property2” …… property_n 是用于为所选元素设置样式的属性。我们可以利用不同的 CSS 属性为一个元素应用多种样式。

CSS 中有不同的选择器，如下所示：

1. 元素选择器

元素选择器就是 HTML 元素的名称，例如 p, h1, div 等。

语法

在上面的语法中，“p” 是元素选择器。“p” 这个名称用于为 <p> 元素应用样式。

示例

我们将使用元素选择器为 HTML 元素设置样式。在本演示中，我们将为 <h2>, <div> 和 <p> 元素设置样式。

代码

输出

在这里，输出中我们可以看到使用 元素选择器 为 HTML 元素设置的样式。

2. ID 选择器

ID 选择器选择具有特定 ID 的元素。“id” 属性为元素提供 ID 名称。在一个网页中，ID 名称对每个元素都应该是唯一的。它通过在 ID 名称前添加一个 哈希 (#) 字符来选择。

语法

在上面给出的语法中，“#id” 是 ID 选择器。

示例

在本演示中，我们将使用 ID 选择器为 HTML 元素设置样式。我们将为 <h1> 和 <h2> 元素设置样式。

代码

输出

这是输出，我们可以看到使用 ID 选择器 为 <h1> 和 <h2> 元素设置的样式。

3. 类选择器

类选择器用于选择具有特定类的元素。“class” 属性用于为元素指定类名。在一个网页中，我们可以为不同的 HTML 元素指定相同的类名。它通过在类名前添加一个 元素名称 和一个 点 (.) 字符来选择。

语法

在上面的语法中，“element-name.class” 是类选择器。

示例

在本演示中，我们将借助类选择器为 HTML 元素应用样式。我们将使用相同的类名来为 <h1> 元素、<h2> 元素 和 <h3> 元素 应用样式。

代码

输出

这是输出，我们可以看到使用 类选择器 为 HTML 元素应用了样式。

4. 通用类选择器

通用类选择器用于为不同元素提供相同的样式。“class” 属性用于为元素指定通用类名。它通过在类名前添加一个 点 (.) 字符来选择。

语法

在上面的语法中，“.class” 是通用类选择器。

示例

在本演示中，我们将借助通用类选择器为 HTML 元素应用样式。我们将为 <h1>、<h2> 和 <h3> 元素应用相同的样式。

代码

输出

我们可以看到，使用 通用类选择器 为 <h1>、<h2> 和 <h3> 元素应用了相同的样式。

5. 通配符选择器

通配符选择器用于选择所有 HTML 元素。使用 星号 (*) 符号来选择所有 HTML 元素。

语法

在上面的语法中，“*” 是通配符选择器。属性写在大括号内。

示例

在本演示中，我们将借助通配符选择器为 HTML 元素应用样式。

代码

输出

我们可以看到，使用 通配符选择器 为 HTML 元素应用了样式。

6. 群组选择器

群组选择器用于一次选择多个 HTML 元素。它允许将相同的样式应用于多个 HTML 元素。

语法

在上面的语法中，“element1, element2, element3, …” 是群组选择器。

示例

在本演示中，我们将借助群组选择器为 HTML 元素应用样式。

代码

输出

我们可以看到，使用 群组选择器 为 HTML 元素应用了样式。

7. 伪类

伪类是用于选择特定元素并更改其状态的选择器。在伪类前使用 冒号 (:) 符号。

语法

在选择器位置写入选择器名称，在伪类位置写入伪类名称。在选择器和伪类之间使用 冒号 (:) 符号。属性写在大括号内。

选择器可以是元素、ID、类等。有多种伪类，如下所述：

• :hover: 当用户将鼠标悬停在元素上时，用于更改元素的显示。
• :active: 当元素处于活动状态时，用于更改元素的显示。
• :link: 用于为未访问的链接设置样式。
• :visited: 用于为已访问的链接设置样式。
• :focus: 当元素获得焦点时，用于为该元素设置样式。
• :first-child: 用于为元素的第一个子元素设置样式。
• :second-child: 用于为元素的第二个子元素设置样式。

示例

在本演示中，我们将借助伪类为 HTML 元素应用样式。我们将使用 元素选择器和 “:hover” 伪类 来在用户将鼠标悬停在链接上时更改链接颜色。我们将使用 ID 选择器和 “:focus” 伪类 来在文本区域获得焦点时更改其背景颜色。

代码

输出

下面的输出展示了结果：

当用户将鼠标悬停在链接上，并且文本区域获得焦点时，我们可以看到链接和文本区域的显示都已更改，这是通过 伪类 实现的。

我们可以通过 **三种方法** 为 HTML 元素设置样式：

1. 行内样式

这是通过使用 **行内 CSS** 为 HTML 元素添加样式的 first 方法。在此方法中，在要应用样式的每个 HTML 元素内部使用 “style” 属性。

行内 CSS 示例

让我们通过一个示例来理解行内 CSS。

代码

输出

这是输出，我们可以看到使用 **行内 CSS** 为 <p> 元素 应用了样式。

2. 内部样式

第二种方法是使用 **内部 CSS** 为 HTML 元素设置样式，为此，在 HTML 代码的 head 部分使用 <style> 标签。

内部 CSS 示例

让我们通过这个示例来理解内部 CSS。

代码

输出

我们可以看到使用 **内部 CSS** 为 <h2> 和 <li> 元素应用了样式。

3. 外部样式

添加 HTML 元素样式的第三种方法是使用 **外部 CSS**。创建外部样式表，然后使用 <link> 标签 将外部文件链接到 HTML 文件。

外部 CSS 示例

让我们通过这个示例来理解外部 CSS。

外部 CSS 代码

HTML 代码

输出

我们可以看到使用 **外部 CSS** 为 <h2>、<table>、<tr>、<th> 和 <td> 元素应用了样式。

结论

在本文中，我们已经了解了 **CSS 中的样式规则格式**。我们已经学习了许多示例来正确理解样式规则格式。以下是需要记住的要点：

1. 样式规则是 CSS 中的规则和声明的集合。

2. 使用各种选择器为 HTML 元素应用样式，如下所示：

• 元素选择器： 此函数通过其名称选择元素，例如 h1, p 等。
• ID 选择器： 用于通过 ID 名称选择元素。示例：#id-name
• 类选择器： 通过类名选择元素。示例：element-name.class-name
• 通用类选择器： 用于通过通用类名选择元素。示例：.generic-class-name
• 通配符选择器： 选择所有 HTML 元素。示例：*
• 伪类： 选择 HTML 元素并更改元素的状态。示例：element-name:pseudo-class-name

3. 有三种方法可以为元素应用样式：

• 行内 CSS： 用于使用 “style” 属性 为 HTML 元素添加样式。
• 内部 CSS： 用于在 head 部分使用 <style> 标签 为 HTML 元素添加样式。
• 外部 CSS： 用于使用 外部样式表 并通过 head 部分的 <link> 标签 将其链接到 HTML 文档，从而为 HTML 元素添加样式。