CSS #
文档结构 #
本指南按以下结构组织：
1. CSS基础 #
| 主题 | 描述 | 文档链接 |
|---|---|---|
| CSS简介 | CSS的基本概念和作用 | css-intro.md |
| 语法基础 | CSS选择器、属性和值的基本语法 | css-syntax.md |
| 引入方式 | 内联样式、内部样式表和外部样式表 | css-import.md |
| 注释 | CSS注释的使用方法 | css-comments.md |
| 颜色 | 颜色表示方法（RGB、十六进制、HSL等） | css-colors.md |
2. 选择器 #
| 选择器 | 描述 | 文档链接 |
|---|---|---|
| 元素选择器 | 通过HTML元素名选择 | element-selector.md |
| ID选择器 | 通过元素ID选择 | id-selector.md |
| 类选择器 | 通过元素类名选择 | class-selector.md |
| 属性选择器 | 通过元素属性选择 | attribute-selector.md |
| 后代选择器 | 选择元素的后代元素 | descendant-selector.md |
| 子选择器 | 选择元素的直接子元素 | child-selector.md |
| 相邻兄弟选择器 | 选择相邻的兄弟元素 | adjacent-sibling-selector.md |
| 通用兄弟选择器 | 选择所有兄弟元素 | general-sibling-selector.md |
| 伪类选择器 | 选择特定状态的元素 | pseudo-class-selector.md |
| 伪元素选择器 | 选择元素的特定部分 | pseudo-element-selector.md |
| 组合选择器 | 多种选择器的组合使用 | combinator-selector.md |
3. 盒模型 #
| 主题 | 描述 | 文档链接 |
|---|---|---|
| 盒模型基础 | 内容、内边距、边框和外边距 | box-model.md |
| 内容区域 | width和height属性的使用 | content-area.md |
| 内边距 | padding属性的使用 | padding.md |
| 边框 | border属性的使用 | border.md |
| 外边距 | margin属性的使用 | margin.md |
| 盒模型类型 | 标准盒模型与IE盒模型 | box-sizing.md |
4. 文本样式 #
| 主题 | 描述 | 文档链接 |
|---|---|---|
| 字体 | font-family、font-size等属性 | font.md |
| 字重 | font-weight属性的使用 | font-weight.md |
| 字体样式 | font-style属性的使用 | font-style.md |
| 文本对齐 | text-align属性的使用 | text-align.md |
| 文本装饰 | text-decoration属性的使用 | text-decoration.md |
| 文本转换 | text-transform属性的使用 | text-transform.md |
| 文本缩进 | text-indent属性的使用 | text-indent.md |
| 行高 | line-height属性的使用 | line-height.md |
| 字母间距 | letter-spacing属性的使用 | letter-spacing.md |
| 单词间距 | word-spacing属性的使用 | word-spacing.md |
5. 背景 #
| 主题 | 描述 | 文档链接 |
|---|---|---|
| 背景颜色 | background-color属性的使用 | background-color.md |
| 背景图片 | background-image属性的使用 | background-image.md |
| 背景重复 | background-repeat属性的使用 | background-repeat.md |
| 背景位置 | background-position属性的使用 | background-position.md |
| 背景大小 | background-size属性的使用 | background-size.md |
| 背景附着 | background-attachment属性的使用 | background-attachment.md |
| 背景简写 | background属性的简写形式 | background-shorthand.md |
6. 布局技术 #
| 主题 | 描述 | 文档链接 |
|---|---|---|
| 正常流 | HTML元素的默认布局方式 | normal-flow.md |
| 浮动 | float属性的使用和清除浮动 | float.md |
| 定位 | position属性的使用（static、relative、absolute、fixed、sticky） | position.md |
| 弹性盒模型 | Flexbox布局模型 | flexbox.md |
| 网格布局 | Grid布局模型 | grid.md |
| 多列布局 | columns属性的使用 | multi-columns.md |
| 显示属性 | display属性的使用 | display.md |
| 可见性 | visibility属性的使用 | visibility.md |
| 溢出处理 | overflow属性的使用 | overflow.md |
7. 响应式设计 #
| 主题 | 描述 | 文档链接 |
|---|---|---|
| 视口设置 | viewport元标签的使用 | viewport.md |
| 媒体查询 | 根据不同条件应用样式 | media-queries.md |
| 相对单位 | em、rem、vw、vh等单位的使用 | relative-units.md |
| 流体布局 | 使用百分比和max-width创建灵活布局 | fluid-layout.md |
| 图片响应式 | 响应式图片的处理方法 | responsive-images.md |
| 移动优先 | 移动优先的设计理念 | mobile-first.md |
8. 高级特性 #
| 主题 | 描述 | 文档链接 |
|---|---|---|
| 动画 | CSS动画的创建和使用 | css-animations.md |
| 过渡 | CSS过渡效果的实现 | css-transitions.md |
| 变换 | CSS变换（旋转、缩放、平移等） | css-transforms.md |
| 滤镜 | CSS滤镜效果 | css-filters.md |
| 渐变 | 线性渐变和径向渐变 | css-gradients.md |
| 阴影 | 文本阴影和盒阴影 | css-shadows.md |
| 圆角 | border-radius属性的使用 | border-radius.md |
| 弹性盒子高级 | Flexbox的高级用法 | flexbox-advanced.md |
| 网格布局高级 | Grid的高级用法 | grid-advanced.md |
| 变量 | CSS自定义属性（变量） | css-variables.md |
9. 最佳实践与性能优化 #
| 主题 | 描述 | 文档链接 |
|---|---|---|
| 代码组织 | CSS代码的组织和命名规范 | css-organization.md |
| 选择器优化 | 高效使用CSS选择器 | selector-optimization.md |
| 性能优化 | 提高CSS性能的技巧 | css-performance.md |
| 浏览器兼容性 | 处理不同浏览器的兼容性问题 | browser-compatibility.md |
| CSS重置 | 重置浏览器默认样式 | css-reset.md |
| CSS预处理器 | Sass、Less等预处理器的使用 | css-preprocessors.md |
| CSS框架 | Bootstrap、Tailwind CSS等框架的使用 | css-frameworks.md |
学习路径 #
入门阶段（CSS新手） #
- 了解CSS的基本概念和作用
- 掌握CSS基础语法和选择器
- 学习文本样式和颜色的使用
- 理解盒模型的基本概念
- 创建简单的CSS样式
进阶阶段（CSS熟练） #
- 深入学习各种选择器的使用
- 掌握背景和边框的高级用法
- 学习布局技术（浮动、定位、Flexbox）
- 理解CSS的优先级和继承
- 创建复杂的页面布局
高级阶段（CSS专家） #
- 掌握Grid布局
- 深入学习响应式设计技术
- 学习CSS动画、过渡和变换
- 理解CSS变量和高级特性
- 学习性能优化和最佳实践
- 掌握CSS预处理器和框架
- 创建复杂的交互效果和响应式界面
大师阶段（CSS大师） #
- 深入理解CSS的工作原理
- 掌握复杂布局的解决方案
- 学习CSS架构和组件化设计
- 参与开源项目和社区贡献
- 持续关注CSS的最新发展
资源推荐 #
- MDN Web Docs：最权威的CSS文档
- W3Schools：适合初学者的教程
- CSS-Tricks：CSS技巧和教程
- Can I Use：CSS特性的浏览器兼容性查询
- CSS Diner：交互式CSS选择器练习
- Flexbox Froggy：交互式Flexbox练习
- Grid Garden：交互式Grid练习
贡献指南 #
欢迎对本指南进行贡献！如果你发现错误或有改进建议，请联系我们。
更新日志 #
- 2026-02-07：创建初始版本，包含完整的CSS学习大纲
继续探索本指南，逐步掌握CSS技术，从新手成长为CSS大师！
最后更新：2026-02-07