提交

source/_posts/CSS.md

@@ -5,5 +5,195 @@ 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(文本)