Excalidraw版本控制系统集成：Git管理白板历史
2025/12/22 0:22:22
CSS 是什么
层叠样式表 (Cascading Style Sheets). CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结 构分离.
CSS 就是 "东方四大邪术" 之化妆术.
基本语法规范
<style> p { /* 设置字体颜色 */ color: red; /* 设置字体大小 */ font-size: 30px; } </style> <p>hello</p>选择器 + {一条/N条声明} 选择器决定针对谁修改 (找谁) 声明决定修改啥. (干啥) 声明的属性是键值对. 使用 ; 区分键值对, 使用 : 区分键和值
CSS 样式表的三种引入方式
CSS 样式表主要分为内部样式表、行内样式表和外部样式表三种引入方式，各自有不同的特点和适用场景。
一、内部样式表
- 定义：将样式写在
<style>标签中，嵌入到 HTML 文档内部。 - 位置：理论上
<style>可以放在 HTML 的任意位置，但通常放在<head>标签中（便于集中管理样式）。 - 优点：样式与页面结构实现了初步分离，比行内样式更易维护。
- 缺点：样式与 HTML 仍在同一文件中，分离不够彻底；当 CSS 内容较多时，会导致 HTML 文件臃肿。
- 适用场景：小体量页面、快速原型开发，搜狗搜索等部分网站仍保留这种写法。
- 代码示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>内部样式表示例</title> <!-- 内部样式表：style 标签放在 head 中 --> <style> div { font-size: 16px; color: blue; } </style> </head> <body> <div>这是内部样式表的效果</div> </body> </html>二、行内样式表
- 定义：通过标签的
style属性，为单个标签指定样式。 - 特点：
- 只适用于编写简单样式，仅对当前标签生效。
- 优先级较高，会覆盖内部样式表和外部样式表的同名样式。
- 缺点：无法编写复杂样式，样式与结构完全耦合，不利于维护（违背 “样式与结构分离” 的原则）。
- 代码示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>行内样式表示例</title> <style> /* 内部样式表设置为红色，但会被行内样式覆盖 */ div { color: red; } </style> </head> <body> <!-- 行内样式：color: green 覆盖了内部样式的 red --> <div style="color: green; font-size: 18px;">想要生活过的去，头上总得带点绿</div> </body> </html>三、外部样式表（实际开发最常用）
- 定义：将样式单独写在
.css后缀的外部样式文件中，再通过<link>标签引入到 HTML 文档中。 - 步骤：① 创建 CSS 文件（如
style.css）；② 在 HTML 的<head>标签中使用<link>标签引入该 CSS 文件。 - 代码示例：
- 第一步：创建
style.css文件
/* style.css 外部样式文件 */ div { color: purple; font-size: 20px; }- 第二步：创建
demo.html文件，引入 CSS
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>外部样式表示例</title> <!-- 引入外部样式表：link 标签必须写，否则样式不生效 --> <link rel="stylesheet" href="style.css"> </head> <body> <div>上帝为你关上一扇门，然后就去睡觉了</div> </body> </html> - 第一步：创建
- 优点：样式与 HTML 结构彻底分离，便于多人协作开发和后期维护；同一个 CSS 文件可被多个 HTML 页面复用，减少代码冗余。
- 缺点：受浏览器缓存影响，修改 CSS 文件后，页面可能不会立刻生效。
- 解决缓存问题：
- 浏览器中按
Ctrl + F5强制刷新页面，强制重新加载 CSS 文件； - 给 CSS 文件添加版本号（如
style.css?v=1.0），修改时更新版本号。
- 浏览器中按
一、CSS 代码风格规范
样式格式
- 紧凑风格：样式属性写在同一行（如
p { color: red; font-size: 30px; }） - 展开风格（推荐）：每个属性单独换行，结构更清晰（如：
css
p { color: red; font-size: 30px; }
）
- 紧凑风格：样式属性写在同一行（如
样式大小写CSS 本身不区分大小写，但开发中统一使用小写字母，保证代码一致性。
空格规范
- 冒号（
:）后需加空格（如color: red） - 选择器与左大括号（
{）之间需加空格（如p {）
- 冒号（
二、CSS 选择器
1. 选择器的功能
用于选中页面中的指定元素，是设置元素样式的前提（类似游戏中 “先选中单位，再指挥行动”）。
2. 选择器的种类（CSS2 标准）
分为基础选择器和复合选择器两类：
| 类别 | 具体类型 |
|---|---|
| 基础选择器 | 标签选择器、类选择器、id 选择器、通配符选择器 |
| 复合选择器 | 后代选择器、子选择器、并集选择器、伪类选择器 |
注：CSS3 对选择器做了补充，需结合后续内容学习。
补充说明
CSS 选择器是控制页面样式的核心工具，不同选择器的优先级、适用场景不同：
- 基础选择器用于选中单一类型的元素（如标签选择器选中所有同标签元素）；
- 复合选择器用于更精准的元素选择（如后代选择器选中某元素内的子元素）。
三、基础选择器详解
1. 标签选择器
- 定义：用 HTML 标签名作为选择器，选中所有该标签的元素。
- 语法：
标签名 { 样式属性; } - 示例：
p { color: green; }（选中所有<p>标签设置文字绿色） - 特点：能快速为同类型标签统一设置样式，但无法差异化选择标签。
2. 类选择器
- 定义：用类名选中元素，实现差异化样式设置。
- 语法：
- 定义：
.类名 { 样式属性; } - 调用：
<标签 class="类名">
- 定义：
- 示例：
.red { color: red; }<div class="red">红色文字</div> - 特点：
- 一个类选择器可被多个标签调用
- 一个标签可调用多个类名（类名之间用空格分隔），例如：
<div class="red big">...</div> - 类名命名规范：不能以纯数字、中文命名，建议使用英文 + 数字，见名知意
3. id 选择器
- 定义：用 id 属性值选中唯一的元素。
- 语法：
- 定义：
#id名 { 样式属性; } - 调用：
<标签 id="id名">
- 定义：
- 示例：
#nav { font-size: 16px; }<div id="nav">导航栏</div> - 特点：id 在 HTML 页面中是唯一的，一个 id 选择器只能被一个标签调用，不能复用。
4. 通配符选择器
- 定义：用
*表示，选中页面中所有的 HTML 元素。 - 语法：
* { 样式属性; } - 示例：
* { margin: 0; /* 清除所有元素的外边距 */ padding: 0; /* 清除所有元素的内边距 */ } - 特点：无需调用，自动选中所有元素；常用于清除页面默认样式，特殊场景使用（因会增加浏览器渲染负担，不建议随意使用）。
基础选择器总结
| 选择器类型 | 语法 | 作用 | 特点 |
|---|---|---|---|
| 标签选择器 | 标签名 {...} | 选中所有同标签元素 | 统一设置样式，无法差异化 |
| 类选择器 | . 类名 {...} | 选中一个 / 多个标签 | 可复用，支持多类名 |
| id 选择器 | #id 名 {...} | 选中单个标签 | 唯一，不可复用 |
| 通配符选择器 | * { ... } | 选中所有标签 | 自动选中，用于清除默认样式 |
四、复合选择器详解
1. 后代选择器（包含选择器）
- 作用：选中父元素内的所有后代元素（包括子元素、孙元素等所有层级）。
- 语法：
元素1 元素2 { 样式属性; }（元素 1 和元素 2 之间用空格分隔） - 示例：
ul li { color: blue; } /* 选中ul内所有li元素 */ .nav a { font-size: 14px; } /* 选中类为nav的元素内所有a元素 */ - 注意：元素 1 是祖先元素，元素 2 是后代元素，可嵌套多层（如
div ul li a）。
2. 子选择器（子元素选择器）
- 作用：仅选中父元素的直接子元素（不包含孙元素等深层级元素）。
- 语法：
元素1>元素2 { 样式属性; }（元素 1 和元素 2 之间用 >` 分隔） - 示例：
div>p { color: red; } /* 仅选中div的直接子元素p，不包含div内li中的p */ .box>a { text-decoration: none; } /* 仅选中类为box的元素的直接子元素a */
3. 并集选择器（群组选择器）
- 作用：同时选中多个元素，为其设置相同的样式，减少代码冗余。
- 语法：
元素1, 元素2, 元素3 { 样式属性; }（元素之间用逗号分隔） - 示例：
div, p, .red { color: green; font-size: 16px; } /* 同时选中所有div、p标签和类为red的元素 */ h1, .nav>li { font-weight: normal; } /* 选中h1标签和类为nav的元素的直接子元素li */ - 书写规范：多个元素可换行书写，例如：
div, p, .red { color: green; }
4. 伪类选择器
- 作用：选中元素的特定状态（如链接的未访问 / 已访问状态、鼠标悬浮状态等）。
- 特点：以冒号（
:）结尾，用于表示元素的特殊状态。 - 常见类型：
（1）链接伪类选择器
用于设置<a>标签的不同状态，需按LVHA顺序书写（否则样式可能失效）：a:link：选中未被访问过的链接a:visited：选中已被访问过的链接a:hover：选中鼠标悬浮在上面的链接a:active：选中鼠标点击并按住时的链接- 示例：
a:link { color: #333; text-decoration: none; } /* 未访问链接：灰色，无下划线 */ a:visited { color: #666; } /* 已访问链接：深灰色 */ a:hover { color: red; text-decoration: underline; } /* 鼠标悬浮：红色，有下划线 */ a:active { color: green; } /* 点击时：绿色 */ - 实际开发简化写法：通常只设置
a（默认状态）和a:hover（悬浮状态），例如：a { color: #333; text-decoration: none; } a:hover { color: red; text-decoration: underline; }
（2）焦点伪类选择器
用于选中获取焦点的表单元素（如输入框
input）。- 语法：
input:focus { 样式属性; } - 示例：
input:focus { outline: none; /* 清除默认焦点轮廓 */ border: 1px solid red; /* 焦点时边框变红 */ background-color: #f5f5f5; /* 焦点时背景色变浅 */ }
复合选择器总结
| 选择器类型 | 语法 | 作用 | 关键符号 |
|---|---|---|---|
| 后代选择器 | 元素 1 元素 2 {...} | 选中元素 1 内所有元素 2 | 空格 |
| 子选择器 | 元素 1 > 元素 2 {...} | 选中元素 1 的直接子元素 2 | >（大于号） |
| 并集选择器 | 元素 1, 元素 2 {...} | 选中元素 1 和元素 2 | ,（逗号） |
| 伪类选择器 | 元素：伪类 {...} | 选中元素的特定状态 | :（冒号）（如 link、hover、focus） |
CSS 属性有很多, 可以参考文档https://www.w3school.com.cn/cssref/index.asp 不需要全都背下来, 而是在使用中学习.