📌  相关文章
📜  css 块 - CSS (1)

📅  最后修改于: 2023-12-03 15:30:11.119000             🧑  作者: Mango

CSS 块 - CSS

CSS 块（也称为 CSS 规则集）是一组样式规则，用于指定将应用于文档中特定元素的样式。CSS 块由选择器和一组声明组成，每个声明由属性和值组成。

语法

CSS 块采用以下语法：

选择器 {
  属性: 值;
  属性: 值;
  ...
}

选择器是指定要应用样式的元素的标识符。属性是要更改的样式属性的名称，值是要为属性设置的值。

例如，以下 CSS 块将更改所有 <h1> 元素的文本颜色：

h1 {
  color: red;
}
选择器

选择器是把 CSS 规则应用于文档中特定元素的标识符。CSS 选择器可以基于元素的标签名、类、ID、属性、位置和其他条件进行选择。

以下是一些常用的 CSS 选择器：

  • 标签选择器：通过元素的标签名选择元素，例如 p、h1 等。
  • 类选择器：通过元素的类名选择元素，类名以 . 开头，例如 .my-class。
  • ID 选择器：通过元素的 ID 选择元素，ID 以 # 开头，例如 #my-id。
  • 属性选择器：通过元素的属性选择元素，例如 [type="text"]。
  • 伪类选择器：通过元素的状态选择元素，例如 :hover、:active。
  • 后代选择器：选择指定元素的后代元素。

例如，以下 CSS 块使用类选择器将所有带有 my-class 类名的元素的文本颜色更改为红色：

.my-class {
  color: red;
}
声明

CSS 声明是指定样式属性及其对应值的部分。如果一个 CSS 块包含多个声明，它们之间应该用分号隔开。

例如，以下 CSS 块将更改选择器匹配的元素的文本颜色和背景颜色：

h1 {
  color: red;
  background-color: yellow;
}
CSS 块的应用

CSS 块可以应用于单个元素、一组元素或整个文档。

应用于单个元素

如果要为单个元素应用 CSS 块，需要在元素的 style 属性中指定 CSS 块。例如，以下示例将更改 <h1> 元素的文本颜色：

<h1 style="color: red;">Hello, world!</h1>
应用于一组元素

如果要应用 CSS 块于一组元素，需要使用相同的选择器来选择这些元素。例如，以下示例将更改所有 <p> 元素的字体大小：

p {
  font-size: 16px;
}
应用于整个文档

要将 CSS 块应用于整个文档，可以将 CSS 块放置在 <head> 标签中的 <style> 标签中。例如，以下示例将更改整个文档的背景颜色：

<head>
  <style>
    body {
      background-color: #f2f2f2;
    }
  </style>
</head>
总结

CSS 块提供了一种将样式应用于文档中特定元素的方式。CSS 块由选择器和一组声明组成，用于指定要更改的样式属性及其对应值。CSS 块可以应用于单个元素、一组元素或整个文档，可以使用标签选择器、类选择器、ID 选择器、属性选择器、伪类选择器和后代选择器来指定选择器。