Appearance
CSS3 教程目录（新手向）
说明：现代浏览器中「CSS3」多指 CSS 2.1 之后 的模块（选择器、圆角、弹性布局、网格、动画等）。本目录按 先易后难、先静态后动态 排序，适合零基础按顺序学，也可按需跳读。
第一篇：入门与基础
第 1 章 认识 CSS3
1.1 什么是 CSS、CSS2 与「CSS3」的关系
1.2 样式写在哪：行内、内部 <style>、外部 .css
1.3 浏览器如何读 CSS：层叠、继承、优先级（简要）
1.4 开发工具：开发者工具里看样式、改样式做实验
1.5 浏览器兼容怎么看：Can I Use、前缀 -webkit- 等（概念即可）
1.6 本教程的学习顺序建议
第 2 章 语法速览（为后面章节打底）
2.1 规则结构：选择器 { 属性: 值; }
2.2 注释、大小写、分号习惯
2.3 常用单位：px、%、em、rem、vw/vh（先会用，再深究）
2.4 颜色写法：#、rgb/rgba、hsl/hsla、颜色名
第二篇：选择器与层叠（CSS3 选择器扩展）
第 3 章 基础选择器复习
3.1 元素、类 .、ID #、后代与组合
3.2 选择器权重（特异性）入门：为什么有的样式盖不住
第 4 章 属性选择器
4.1 [attr]、[attr="value"]
4.2 前缀、后缀、包含子串：^=、$=、*=
4.3 用属性选择器做表单、链接、图标等小技巧
第 5 章 结构化伪类
5.1 :first-child、:last-child、:only-child
5.2 :nth-child(n)、:nth-last-child(n)：公式与奇偶 odd/even
5.3 :first-of-type、:last-of-type、:nth-of-type
5.4 :empty、:not()
第 6 章 状态与交互伪类
6.1 :hover、:active、:focus、:focus-visible（可访问性）
6.1 :disabled、:checked、:required 与表单样式
6.3 :target 做页内锚点高亮、折叠面板思路
第 7 章 伪元素（::）
7.1 ::before、::after 与 content
7.2 ::first-line、::first-letter
7.3 ::selection 选中文本样式
7.4 单冒号与双冒号区别（了解即可）
第三篇：颜色、背景与图像
第 8 章 透明度与颜色
8.1 opacity 与整元素透明
8.2 rgba()、hsla() 只让背景或文字带透明
8.3 与 background 叠加时的常见误区
第 9 章 背景（CSS3 部分）
9.1 多张背景图叠放、顺序与层叠规则
9.2 background-size：cover、contain、具体宽高
9.3 background-origin、background-clip（含「背景只铺在边框内」等）
9.4 background-position 扩展（多图分别定位）
第 10 章 渐变
10.1 线性渐变 linear-gradient：方向、色标、多色
10.10 径向渐变 radial-gradient
10.3 重复渐变 repeating-linear-gradient
10.4 实战：按钮光泽、简单天空、条纹背景
第 11 章 滤镜与混合（进阶可选）
11.1 filter：blur、brightness、contrast、grayscale 等
11.2 backdrop-filter 毛玻璃效果
11.3 mix-blend-mode 简介（与 PS 混合模式类似）
第四篇：盒模型、边框与阴影
第 12 章 box-sizing
12.1 标准盒模型 vs border-box
12.2 为什么全局设 box-sizing: border-box 很常用
第 13 章 圆角与边框图
13.1 border-radius：四角统一、四角分别设置、椭圆角
13.2 border-image 概念与简单用法（可选）
第 14 章 阴影
14.1 box-shadow：偏移、模糊、扩散、内阴影、多阴影
14.2 text-shadow 文字阴影
14.3 用阴影做「假边框」、光晕、卡片层次
第五篇：文字与排版
第 15 章 Web 字体 @font-face
15.1 为什么需要自定义字体
15.2 @font-face 基本写法、font-display 简要
15.3 使用 Google Fonts / 本地字体文件注意版权与体积
第 16 章 文字与排版属性（CSS3 相关）
16.1 text-shadow（可与第 14 章呼应）
16.2 word-wrap / overflow-wrap、word-break
16.3 text-overflow: ellipsis 单行省略号
16.4 多行省略思路（-webkit-line-clamp 等）
第六篇：布局（重点）
第 17 章 显示类型与 BFC 入门
17.1 display: block / inline / inline-block
17.2 隐藏：display: none vs visibility: hidden
17.3 简单了解 BFC：清除浮动、边距折叠（为 Flex/Grid 打基础）
第 18 章 弹性盒 Flexbox（一）
18.1 为什么需要 Flex：一维布局、主轴与交叉轴
18.2 容器属性：display: flex、flex-direction、flex-wrap
18.3 justify-content、align-items、align-content
第 19 章 弹性盒 Flexbox（二）
19.1 子项：flex-grow、flex-shrink、flex-basis、flex 简写
19.2 align-self、order
19.3 实战：导航栏、居中、等高列、底部对齐
第 20 章 网格布局 CSS Grid（一）
20.1 二维布局与 Flex 的分工
20.2 定义网格：display: grid、grid-template-columns / rows
20.3 fr 单位、repeat()、minmax()、gap
第 21 章 网格布局 CSS Grid（二）
21.1 按线放置：grid-column / grid-row
21.2 命名区域 grid-template-areas
21.3 对齐：justify-items、align-items、place-items
21.4 实战：整页骨架、卡片墙、响应式网格
第 22 章 多列布局（可选）
22.1 column-count、column-gap、column-rule
22.2 适合长文分栏，与 Grid 的区别
第 23 章 定位与层叠上下文（与布局配合）
23.1 position: relative / absolute / fixed / sticky
23.2 z-index 与层叠上下文（概念 + 常见坑）
第七篇：变形、过渡与动画
第 24 章 2D 变形 transform
24.1 translate、scale、rotate、skew
24.2 变换原点 transform-origin
24.3 多个 transform 组合顺序
第 25 章 3D 变形（进阶可选）
25.1 perspective、transform-style
25.2 简单翻转卡片效果
第 26 章 过渡 transition
26.1 transition-property、duration、timing-function、delay
26.2 哪些属性可过渡、哪些不能（如 display）
26.3 实战：按钮、卡片悬停、菜单展开
第 27 章 动画 @keyframes
27.1 @keyframes 定义关键帧
27.2 animation-name、duration、iteration-count、direction、fill-mode
27.3 用动画做加载条、呼吸灯、简单角色动效
27.4 动画与过渡的选择：何时用哪个
第八篇：响应式与用户界面
第 28 章 媒体查询
28.1 @media 语法：screen、print、max-width / min-width
28.2 移动优先 vs 桌面优先写法
28.3 常用断点思路（非固定标准，按设计来）
第 29 章 视口与响应式单位
29.1 <meta name="viewport"> 作用
29.2 rem 布局思路、vw/vh 注意移动端 100vh 问题（了解）
第 30 章 响应式图片与对象适配
30.1 max-width: 100% 图片不撑破容器
30.2 object-fit、object-position（头像、封面图）
第 31 章 用户界面相关属性
31.1 resize、outline（与 border 区别）、cursor
31.2 pointer-events、user-select 使用场景与注意点
第九篇：现代 CSS 补充（强烈建议新手后期学）
第 32 章 自定义属性（CSS 变量）
32.1 --变量名 与 var()
32.2 作用域：:root 与局部覆盖
32.3 做主题色、暗色模式切换思路
第 33 章 calc() 与数学函数
33.1 calc(100% - 20px) 典型用法
33.2 min()、max()、clamp() 做流体字号、宽度（简介）
第十篇：综合实战与规范
第 34 章 小型综合案例（建议每案例 1～2 小时）
34.1 个人简介卡片（圆角、阴影、Flex）
34.2 响应式导航栏（Flex + 媒体查询）
34.3 图片画廊（Grid + 悬停过渡）
34.4 登录表单美化（伪类、focus 样式）
34.5 简单落地页（Hero + 特性区 + 页脚）
第 35 章 书写与维护习惯
35.1 类名命名思路（BEM 等，选一种即可）
35.2 避免过度嵌套、魔法数字
35.3 与 HTML 语义、可访问性（焦点可见等）配合
附录 A 速查表
- Flex 容器 / 子项属性一览
- Grid 常用属性一览
- 选择器与伪类速查
附录 B 常见问题 FAQ
- 样式不生效的排查顺序
- Flex / Grid 子项尺寸异常
- 动画卡顿、
will-change慎用说明 - iOS Safari 常见差异（简要）
附录 C 延伸学习
- CSS 新特性（容器查询
container、:has()等） - 预处理器 Sass/Less（可选）
- 官方文档与 MDN 阅读建议
学习节奏建议（新手）
| 阶段 | 建议内容 | 目标 |
|---|---|---|
| 第 1～2 周 | 第一篇～第四篇 + 少量练习 | 能写出带圆角、渐变、阴影的静态块 |
| 第 3～4 周 | 第五篇～第六篇（Flex + Grid 必练） | 能搭常见页面结构 |
| 第 5～6 周 | 第七篇 + 第八篇 | 会做悬停动效与简单 @keyframes，能做基础响应式 |
| 持续 | 第九篇 + 综合案例 | 代码可维护，能查文档自学新属性 |
本文件为教程目录大纲，可按章节拆成独立 .md 文档并挂入 VitePress 侧栏。