---
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
选择器 {
属性: 值;
}
```
## 元素选择器
举个例子，如果我们想把网页上所有的``标题变成红色：
```css
h1 {
color: red;
}
```
- `h1` 是 **选择器**（选中所有 h1 标签）。
- `color` 是 **属性**（我们要改颜色）。
- `red` 是 **值**（改成红色）。
这叫 **元素选择器**，因为它选中了所有叫 `h1` 的元素。没问题，我们继续！🚀
为了确保你完全掌握了刚才的逻辑，我先揭晓一下刚才小练习的答案。要把 `
` 标签的文字变成蓝色，代码是这样的：
CSS
假设你的 HTML 里有这样一个段落标签：
```html
我是一个普通的段落。
```
如果想把这个段落的文字颜色改成 **蓝色 (blue)**
```css
p {
color: blue;
}
```
很简单对吧？这叫 **元素选择器**，因为它选中了所有叫 `p` 的元素。
------
🔥 进阶：如何只选中“某一个”？
在实际做网页时，我们通常不希望**所有**的段落都长得一样。比如，你可能希望有一个段落是特别的“警告信息”。
这时候，我们需要给 HTML 标签起个“名字”或者贴个“标签”。
1. **类 (Class)**：
- **作用**：就像给一群人穿上同样的制服。多个元素可以共用同一个 class。
- **CSS 写法**：用 `.` (小圆点) 开头。
2. **ID**：
- **作用**：就像身份证号。整个页面里，一个 ID 只能给一个元素用，是唯一的。
- **CSS 写法**：用 `#` (井号) 开头。
## 类选择器
假设我们的 HTML 代码是这样的：
```html
注意：这是一个警告！
我只是一个路人甲。
```
如果我们只想选中那个带有 `alert` 类的段落，把它的颜色变成 **红色 (red)**，CSS 选择器应该怎么写？
**提示**：记得 Class 选择器要用 `.` 开头哦。
```css
.alert {
color: red;
}
```
## ID 选择器
比 Class 更“独一无二”的：**ID**。
在 CSS 里，我们要用 **井号 (#)** 来代表 ID。
```html
欢迎来到我的主页
```
如果我们想把这个标题的 **字体大小 (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
我是普通链接
```
选中 **`.nav` 里面的 `a` 标签**，并把它的颜色改成 **橙色 (orange)**。
**提示**：记得利用空格来表示层级关系哦！
```css
.nav a {
color: orange;
}
```
## 伪类 (Pseudo-classes)
现在你已经能控制元素“静止”时的样子了，接下来我们要让网页变得更有**互动感**。我们要学习的是 **伪类 (Pseudo-classes)**。
最常用的一个伪类是 `:hover`。
- **作用**：它是指“当鼠标**悬停**在元素上时”的那个瞬间。
- **语法**：在选择器后面紧跟着写 `:hover` (注意：冒号前面**不能**有空格)。
```css
/* 例子：所有按钮在鼠标放上去时，背景变黑 */
button:hover {
background-color: black;
}
```
```html
我是普通链接
```
要求： 当鼠标**悬停**在 `.nav` 里面的 `a` 标签上时，把它的**文字颜色**变成 **绿色 (green)**。
**提示**：你需要把刚才学的“后代选择器”和现在的“伪类”结合起来写哦！
```css
.nav a:hover {
color: green;
}
```
# 盒模型
既然你已经学会了怎么给元素“上色”，接下来我们要学怎么控制它们的“身材”和“距离”。
在 CSS 的世界里，**所有的元素（无论是图片、段落还是标题）本质上都是一个矩形的盒子**。
我们要控制这个盒子，主要靠这四个属性（由内向外）：
1. **内容 (Content)**：盒子的核心，就是文字或图片本身。
2. **内边距 (Padding)**：内容和边框之间的空间。就像快递盒子里的气泡膜，保护内容不紧贴着纸箱壁。
3. **边框 (Border)**：盒子的边缘。
4. **外边距 (Margin)**：盒子和其他盒子之间的距离。就像人与人之间的社交距离。
## CSS Text(文本)