---
title: CSS
date: 2024-03-23 10:30:31
author: 文永达
top_img: https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg
---

# 选择器与属性

## 基本语法结构

CSS的规则通常长这样：
```css
选择器 {
    属性: 值;
}
```

## 元素选择器

举个例子，如果我们想把网页上所有的`<h1>`标题变成红色：

```css
h1 {
    color: red;
}
```

- `h1` 是 **选择器**（选中所有 h1 标签）。
- `color` 是 **属性**（我们要改颜色）。
- `red` 是 **值**（改成红色）。

这叫 **元素选择器**，因为它选中了所有叫 `h1` 的元素。没问题，我们继续！🚀

为了确保你完全掌握了刚才的逻辑，我先揭晓一下刚才小练习的答案。要把 `<p>` 标签的文字变成蓝色，代码是这样的：

CSS

假设你的 HTML 里有这样一个段落标签：

```html
<p>我是一个普通的段落。</p>
```

如果想把这个段落的文字颜色改成 **蓝色 (blue)**

```css
p {
  color: blue;
}
```

很简单对吧？这叫 **元素选择器**，因为它选中了所有叫 `p` 的元素。

------

🔥 进阶：如何只选中“某一个”？

在实际做网页时，我们通常不希望**所有**的段落都长得一样。比如，你可能希望有一个段落是特别的“警告信息”。

这时候，我们需要给 HTML 标签起个“名字”或者贴个“标签”。

1. **类 (Class)**：
   - **作用**：就像给一群人穿上同样的制服。多个元素可以共用同一个 class。
   - **CSS 写法**：用 `.` (小圆点) 开头。
2. **ID**：
   - **作用**：就像身份证号。整个页面里，一个 ID 只能给一个元素用，是唯一的。
   - **CSS 写法**：用 `#` (井号) 开头。

## 类选择器

假设我们的 HTML 代码是这样的：

```html
<p class="alert">注意：这是一个警告！</p>

<p>我只是一个路人甲。</p>
```

如果我们只想选中那个带有 `alert` 类的段落，把它的颜色变成 **红色 (red)**，CSS 选择器应该怎么写？

**提示**：记得 Class 选择器要用 `.` 开头哦。

```css
.alert {
  color: red;
}
```

## ID 选择器

比 Class 更“独一无二”的：**ID**。

在 CSS 里，我们要用 **井号 (#)** 来代表 ID。

```html
<h1 id="main-title">欢迎来到我的主页</h1>
```

如果我们想把这个标题的 **字体大小 (font-size)** 设置为 **40px**，你应该怎么写这段 CSS？

**提示**：记得 ID 要用 `#` 开头哦。

```css
#main-title {
  font-size: 40px;
}
```

## 后代选择器 (Descendant Selector)

**根据“位置”来选元素**。

有时候，你不想选中“所有的 `a` 标签”，你只想选中“侧边栏 (Sidebar) 里的 `a` 标签”。这就需要用到**后代选择器**。

**语法规则**： 我们在两个选择器之间加一个 **空格 (Space)**，表示“里面的”意思。

```css
/* 选中所有在 div 里面的 p 标签 */
div p {
  color: green;
}
```

- `div` 是父元素（外面的）。

- `p` 是子元素（里面的）。

- 中间的**空格**很关键！

假设我们有下面这段 HTML，里面有两个链接，但我们只想修改在 `.nav` 里面的那个链接：

```html
<div class="nav">
  <a href="#">我是导航菜单</a>
</div>

<a href="#">我是普通链接</a>
```

选中 **`.nav` 里面的 `a` 标签**，并把它的颜色改成 **橙色 (orange)**。

**提示**：记得利用空格来表示层级关系哦！

```css
.nav a {
    color: orange;
}
```

## 伪类 (Pseudo-classes)

现在你已经能控制元素“静止”时的样子了，接下来我们要让网页变得更有**互动感**。我们要学习的是 **伪类 (Pseudo-classes)**。

最常用的一个伪类是 `:hover`。

- **作用**：它是指“当鼠标**悬停**在元素上时”的那个瞬间。
- **语法**：在选择器后面紧跟着写 `:hover` (注意：冒号前面**不能**有空格)。

```css
/* 例子：所有按钮在鼠标放上去时，背景变黑 */
button:hover {
  background-color: black;
}
```

```html
<div class="nav">
  <a href="#">我是导航菜单</a>
</div>

<a href="#">我是普通链接</a>
```

要求： 当鼠标**悬停**在 `.nav` 里面的 `a` 标签上时，把它的**文字颜色**变成 **绿色 (green)**。

**提示**：你需要把刚才学的“后代选择器”和现在的“伪类”结合起来写哦！

```css
.nav a:hover {
    color: green;
}
```

# 盒模型

既然你已经学会了怎么给元素“上色”，接下来我们要学怎么控制它们的“身材”和“距离”。

在 CSS 的世界里，**所有的元素（无论是图片、段落还是标题）本质上都是一个矩形的盒子**。

我们要控制这个盒子，主要靠这四个属性（由内向外）：

1. **内容 (Content)**：盒子的核心，就是文字或图片本身。
2. **内边距 (Padding)**：内容和边框之间的空间。就像快递盒子里的气泡膜，保护内容不紧贴着纸箱壁。
3. **边框 (Border)**：盒子的边缘。
4. **外边距 (Margin)**：盒子和其他盒子之间的距离。就像人与人之间的社交距离。

## CSS Text(文本)

