2025-11-26 16:47:29 +08:00

5.1 KiB

Raw Blame History

title, date, author, top_img

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

选择器与属性

基本语法结构

CSS的规则通常长这样：

选择器 {
    属性: 值;
}

元素选择器

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

h1 {
    color: red;
}

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

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

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

CSS

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

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

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

p {
  color: blue;
}

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

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

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

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

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

类选择器

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

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

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

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

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

.alert {
  color: red;
}

ID 选择器

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

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

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

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

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

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

后代选择器 (Descendant Selector)

根据“位置”来选元素。

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

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

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

div 是父元素（外面的）。
p 是子元素（里面的）。
中间的空格很关键！

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

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

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

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

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

.nav a {
    color: orange;
}

伪类 (Pseudo-classes)

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

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

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

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

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

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

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

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

.nav a:hover {
    color: green;
}

盒模型

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

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

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

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

5.1 KiB Raw Blame History Unescape Escape