1.2 CSS 的基本语法

CSS 语言的基本语法由三部分组成：选择器、属性和值。它们共同定义了网页元素的样式规则。

一个完整的 CSS 规则通常遵循如下格式：

selector {
  property: value;
}

例如，下面是一个简单的 CSS 规则，表示将所有 p 元素的文本颜色设置为红色，字体大小为 16px：

p {
  color: red;
  font-size: 16px;
}

选择器是 CSS 规则中最重要的部分，它定义了哪些元素会应用特定的样式。常见的选择器包括：

元素选择器（Type Selector）：
- 选择页面中所有指定标签的元素。
- 例如，选择所有的 <h1> 元素：
```
h1 {
  color: blue;
}
```
类选择器（Class Selector）：
- 选择所有具有指定类的元素。类选择器前面加一个点 (.)。
- 例如，选择所有具有 highlight 类的元素：
```
.highlight {
  background-color: yellow;
}
```
ID 选择器（ID Selector）：
- 选择页面中具有特定 ID 的元素。ID 选择器前面加一个井号 (#)。
- 例如，选择 ID 为 header 的元素：
```
#header {
  font-size: 24px;
}
```
通配符选择器（Universal Selector）：
- 选择页面中的所有元素。它使用星号（*）表示。
- 例如，设置所有元素的 margin 为 0：
```
* {
  margin: 0;
}
```
后代选择器（Descendant Selector）：
- 选择某个元素内部的子元素（包括嵌套的元素）。例如，选择 div 元素内的所有 p 元素：
```
div p {
  color: green;
}
```
伪类选择器（Pseudo-class Selector）：
- 选择特定状态的元素。例如，选择鼠标悬停在链接上的状态：
```
a:hover {
  color: red;
}
```
伪元素选择器（Pseudo-element Selector）：
- 选择元素的特定部分或新增内容。例如，选择每个 p 元素的首字母：
```
p::first-letter {
  font-size: 2em;
  color: orange;
}
```

CSS 属性是控制元素外观的具体设置，值则是为这些属性指定的具体内容。每个属性都有一个或多个可能的值。

一些常见的属性包括：

字体与文本相关属性：
- color：设置文本的颜色。
- font-family：设置文本的字体。
- font-size：设置文本的字体大小。
- font-weight：设置文本的字体粗细。
盒子模型相关属性：
- width 和 height：设置元素的宽度和高度。
- margin：设置元素的外边距。
- padding：设置元素的内边距。
- border：设置元素的边框。
背景相关属性：
- background-color：设置元素的背景颜色。
- background-image：设置元素的背景图像。
布局与定位属性：
- position：设置元素的定位方式（如 static、relative、absolute、fixed、sticky）。
- display：设置元素的显示方式（如 block、inline、flex、grid）。

在一个 CSS 规则中，每个属性和值组合被称为声明。一个规则中可以有多个声明，声明之间使用分号分隔。

例如：

p {
  color: red;
  font-size: 16px;
  line-height: 1.5;
}

在 CSS 中，注释是以 /* 开头，以 */ 结尾。注释的内容不会影响页面的样式，主要用于代码的说明或备注。

例如：

/* 这是一个注释 */
p {
  color: blue;  /* 设置文本颜色为蓝色 */
}

CSS 的“层叠性”意味着当多个规则应用于同一元素时，浏览器将根据一定的规则决定哪个样式生效。优先级规则通常是基于以下几点：

CSS 语法的核心结构是规则集，由选择器、属性和值组成。选择器定义了哪些 HTML 元素会受到影响，属性和值决定了这些元素的具体样式。CSS 语法非常灵活，通过各种选择器和属性组合，可以实现丰富多样的网页样式和布局。掌握 CSS 基本语法是前端开发的基础，能够帮助开发者精确控制网页的外观。

#前端开发分享于 2025-03-03

上一篇：1.1 什么是 CSS 下一篇：1.3 CSS 的引入方式