下面为你整理一份系统、清晰、实用的 《CSS 指南（CSS Guide）》，适合作为入门学习、复习或参考手册使用。
🎨 CSS 指南（CSS Guide）
1. CSS 是什么？
CSS（Cascading Style Sheets，层叠样式表） 用于控制网页的视觉表现，例如颜色、布局、字体等。
与 HTML 的结构、JavaScript 的交互一起构成网页前端三大核心技术。
2. CSS 的三种引入方式
2.1 外部样式（推荐）
<link rel="stylesheet" href="style.css">
2.2 内部样式
<style>
h1 { color: blue; }
</style>
2.3 内联样式（不推荐）
<p style="color:red;">文字</p>
3. CSS 选择器（Selectors）
3.1 基础选择器
* { } /* 通配符选择器 */
p { } /* 标签选择器 */
#box { } /* ID 选择器 */
.item { } /* 类选择器 */
3.2 组合选择器
div p { } /* 后代选择器 */
div > p { } /* 子元素 */
div + p { } /* 相邻兄弟 */
div ~ p { } /* 一般兄弟 */
3.3 属性选择器
a[target="_blank"] { }
input[type="text"] { }
3.4 伪类选择器（交互）
a:hover { } /* 悬停 */
input:focus { }
li:first-child { }
3.5 伪元素选择器
p::before { content: "★"; }
p::after { content: ""; }
4. CSS 基础属性
4.1 字体与文本
font-size: 16px;
font-weight: bold;
font-family: "Arial";
line-height: 1.6;
text-align: center;
color: #333;
4.2 盒模型（核心概念）
每个元素由以下部分构成：
margin（外边距）
border（边框）
padding（内边距）
content（内容）
常见属性：
width: 200px;
height: 100px;
padding: 20px;
margin: 10px;
border: 1px solid #000;
box-sizing: border-box; /* 推荐 */
4.3 背景
background-color: #f0f0f0;
background-image: url(bg.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
5. CSS 布局（重点！）
5.1 Flexbox（弹性布局）
最常用现代布局方式。
父元素：
display: flex;
justify-content: center; /* 水平排列 */
align-items: center; /* 垂直排列 */
flex-direction: row; /* 或 column */
子元素：
flex: 1; /* 分配空间 */
order: 2; /* 调整排序 */
5.2 Grid（网格布局）
更强大的二维布局工具。
父元素：
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 10px;
子元素：
grid-column: 1 / 3;
grid-row: 1 / 2;
5.3 浮动布局（旧技术）
float: left;
clear: both;
5.4 定位
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;
常用：
position: absolute;
top: 20px;
left: 30px;
6. CSS 响应式设计（Responsive）
6.1 媒体查询
@media (max-width: 768px) {
body { font-size: 14px; }
}
6.2 viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
7. CSS 动画
7.1 过渡（transition）
button {
transition: all .3s ease;
}
button:hover {
transform: scale(1.1);
}
7.2 动画（keyframes）
@keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}
.box {
animation: fade 1s ease;
}
8. CSS 自定义属性（变量）
:root {
--main-color: #3498db;
}
button {
color: var(--main-color);
}
9. CSS 最佳实践（W3C 推荐）
✔ 使用 class 名称，而不是大量使用 ID
✔ 使用语义清晰的 class，如 .btn-primary
✔ 避免过高的选择器优先级
✔ 多使用 Flex / Grid，不建议使用 float
✔ 按功能分组 CSS，提高可维护性
✔ 使用 box-sizing: border-box;
✔ 使用变量统一管理颜色、间距、字号
10. CSS 学习路线图
- 基础选择器、属性
- 盒模型
- Flex 布局
- Grid 布局
- 动画
- 响应式设计
- SCSS / Tailwind（进阶）
- 模块化 & 组件化 CSS
🎁 可以继续为你提供：
📄 CSS 速查表 Cheat Sheet
📘 CSS + HTML 实战教程
🎨 为你写一个完整网页的 CSS 结构
📦 将本指南导出为 PDF / PPT / Markdown
🧪 手把手讲解 Flex 或 Grid 布局
你需要我把这份指南扩展成「完整教材」，还是导出成 PDF？
