# CSS_learn
**Repository Path**: wangweimayun/css_learn
## Basic Information
- **Project Name**: CSS_learn
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-09
- **Last Updated**: 2026-04-28
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# CSS_learn —— 从零开始系统学习 CSS
## 项目概述
本项目是一套系统、完整的 **CSS 基础到进阶学习教程**，涵盖从 CSS 基本概念到现代布局技术的全部核心知识点。每个章节均配有独立可运行的 HTML 示例文件，代码注释详尽，案例丰富，旨在帮助学习者通过"理论学习 + 代码实践"的方式快速掌握 CSS 网页样式设计技能。
### 学习目标
- 理解 CSS 的核心概念和工作原理
- 熟练掌握各类选择器的使用场景和优先级规则
- 精通盒子模型、文档流、浮动、定位等布局基础
- 掌握 Flexbox 弹性布局的现代网页布局方式
- 了解 CSS3 新特性（圆角、阴影、动画、媒体查询等）
- 能够独立完成静态网页的样式设计与响应式适配
- 掌握雪碧图和字体图标等前端性能优化技巧
---
## 课程大纲
本教程共 **20 个章节**，按照从基础到进阶、从理论到实践的顺序编排，建议按序号顺序学习。
| 章节 | 主题 | 核心内容 |
|:---:|:---|:---|
| 01 | CSS 简介 | CSS 的基本概念、作用、与 HTML 的关系、简单样式演示 |
| 02 | CSS 的引入方式 | 内联样式、内部样式、外部样式三种引入方式及最佳实践 |
| 03 | 选择器（一）| 元素选择器、全局选择器（`*`）、类选择器（`.class`） |
| 04 | 选择器（二）| ID 选择器（`#id`）、合并选择器、选择器优先级计算规则 |
| 05 | 字体属性 | `font-size`、`font-family`、`font-weight`、`font-style`、`color`、`line-height` 等 |
| 06 | 背景属性 | `background-color`、`background-image`、`background-repeat`、`background-position`、`background-size` 等 |
| 07 | 文本属性 | `text-align`、`text-decoration`、`text-indent`、`text-transform`、`letter-spacing`、`word-spacing` 等 |
| 08 | 表格属性 | `border-collapse`、`border-spacing`、`caption-side`、`empty-cells` 等表格样式控制 |
| 09 | 关系选择器 | 后代选择器、子代选择器（`>`）、相邻兄弟选择器（`+`） |
| 10 | CSS 盒子模型（Box Model）| `content`、`padding`、`border`、`margin`、`box-sizing`、margin 塌陷 |
| 11 | 弹性盒模型（Flex Box）| `display: flex`、主轴与交叉轴、`flex-direction`、`justify-content`、`align-items`、`flex-wrap`、`align-content` |
| 12 | 文档流 | 标准文档流概念、块级元素与行内元素、脱离文档流的方式 |
| 13 | 浮动 | `float` 属性、浮动特性、浮动对文档流的影响 |
| 14 | 清除浮动 | 浮动的副作用、清除浮动的多种方法（空标签法、`overflow`、伪元素法等）|
| 15 | 定位 | 相对定位（`relative`）、绝对定位（`absolute`）、固定定位（`fixed`）、粘性定位（`sticky`）、`z-index` 层叠顺序 |
| 16 | CSS3 新特性 | 圆角（`border-radius`）、阴影（`box-shadow`、`text-shadow`） |
| 17 | 动画 | `@keyframes` 关键帧动画、`animation` 属性、`animation-play-state` 控制 |
| 18 | 媒体查询 | `@media` 响应式布局、断点设置、移动端适配 |
| 19 | 雪碧图 | CSS Sprite 技术原理、背景图定位、减少 HTTP 请求的性能优化 |
| 20 | 字体图标 | Iconfont 字体图标引入与使用、矢量图标的优势 |
---
## 各章节详细说明
### 01 CSS 简介
介绍 CSS（Cascading Style Sheets，层叠样式表）的基本概念，演示如何通过简单的 `color` 和 `font-size` 属性改变 HTML 元素的样式，建立对 CSS 的初步认知。
### 02 CSS 的引入方式
详细讲解三种 CSS 引入方式：
- **内联样式**：通过元素的 `style` 属性直接书写，优先级最高但难以维护
- **内部样式**：在 `` 中使用 `