CSS 的基本语法

### CSS 的基本语法

CSS（层叠样式表，Cascading Style Sheets）是用于控制网页布局和样式的语言。它通过选择器来选择页面中的元素，并为这些元素定义样式规则。

#### 1. 选择器的类型

选择器用于指定要应用样式的 HTML 元素。CSS 提供了多种选择器类型，以下是最常见的几种：

##### （1）标签选择器（Type Selector）

通过 HTML 元素的标签名来选择元素。它会对页面中所有相同标签的元素应用样式。

css复制

```css
p {
    color: blue; /* 将所有段落文本设置为蓝色 */
}
```

##### （2）类选择器（Class Selector）

通过 HTML 元素的 `class` 属性来选择元素。类选择器以点号（`.`）开头，可以在多个元素上重复使用。

css复制

```css
.warning {
    color: red; /* 将所有 class 为 warning 的元素文本设置为红色 */
}
```

HTML 示例：

HTML复制

```html
<p class="warning">这是一个警告信息</p>
<div class="warning">这也是一个警告信息</div>
```

##### （3）ID 选择器（ID Selector）

通过 HTML 元素的 `id` 属性来选择元素。ID 选择器以井号（`#`）开头，页面中每个 ID 应该是唯一的。

css复制

```css
#main-title {
    font-size: 24px; /* 将 ID 为 main-title 的元素字体大小设置为 24px */
}
```

HTML 示例：

HTML复制

```html
<h1 id="main-title">主标题</h1>
```

##### （4）通用选择器（Universal Selector）

通用选择器用星号（`*`）表示，选择页面中的所有元素。

css复制

```css
* {
    margin: 0;
    padding: 0; /* 将所有元素的外边距和内边距设置为 0 */
}
```

##### （5）属性选择器（Attribute Selector）

通过 HTML 元素的属性来选择元素。属性选择器以方括号（`[]`）表示。

css复制

```css
input[type="text"] {
    border: 1px solid black; /* 选择所有 type 为 text 的 input 元素 */
}
```

##### （6）伪类选择器（Pseudo-class Selector）

用于选择元素的某种状态或位置。伪类选择器以冒号（`:`）开头。

css复制

```css
a:hover {
    color: green; /* 当鼠标悬停在链接上时，将文本颜色设置为绿色 */
}
```

##### （7）伪元素选择器（Pseudo-element Selector）

用于选择元素的某个部分。伪元素选择器以双冒号（`::`）开头。

css复制

```css
p::first-line {
    font-weight: bold; /* 将段落的第一行设置为加粗 */
}
```

#### 2. 样式规则的结构

CSS 样式规则由选择器和声明块组成。选择器用于选择页面中的元素，声明块包含要应用的样式。

css复制

```css
选择器 {
    属性1: 值1;
    属性2: 值2;
    ...
}
```

- **选择器**：指定要应用样式的元素。
- **声明块**：用大括号 `{}` 包裹，包含一组样式声明。
- **声明**：由属性和值组成，属性和值之间用冒号 `:` 分隔，声明之间用分号 `;` 分隔。

#### 3. 属性和值的使用

CSS 属性用于定义元素的样式，如字体大小、颜色、边距等。每个属性都有对应的值，值的类型可以是数字、单位、颜色代码等。

##### （1）颜色值

- 十六进制颜色：`#ff0000`（红色）
- RGB 颜色：`rgb(255, 0, 0)`（红色）
- 预定义颜色名：`red`
- RGBA 颜色（带透明度）：`rgba(255, 0, 0, 0.5)`（半透明红色）

css复制

```css
p {
    color: #ff0000; /* 十六进制颜色 */
}
```

##### （2）长度单位

- 像素（px）：固定单位，1px 等于屏幕上的一个像素点。
- 百分比（%）：相对于父元素的尺寸。
- em：相对于当前字体大小的单位。

css复制

```css
div {
    width: 50%; /* 相对于父元素宽度的 50% */
    padding: 10px; /* 固定像素值 */
}
```

##### （3）字体属性

- `font-size`：设置字体大小。
- `font-family`：设置字体类型。
- `font-weight`：设置字体粗细（如 `bold` 或 `normal`）。

css复制

```css
h1 {
    font-size: 24px;
    font-family: Arial, sans-serif;
    font-weight: bold;
}
```

##### （4）边距和内边距

- `margin`：设置外边距。
- `padding`：设置内边距。

css复制

```css
div {
    margin: 20px; /* 外边距 */
    padding: 10px; /* 内边距 */
}
```

### 总结

CSS 的基本语法包括选择器、样式规则和属性值。选择器用于选择 HTML 元素，样式规则定义了要应用的样式，属性和值则具体描述了样式的细节。通过合理使用这些语法，可以灵活地控制网页的布局和外观。