200 lines
5.1 KiB
Markdown
200 lines
5.1 KiB
Markdown
---
|
||
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(文本)
|
||
|