CSS 21 Days - CSS 学习路径

一个专为开发者设计的 CSS 自学项目，通过 21 天的系统学习，掌握现代 CSS 开发技能。

---

English Description

CSS-21-Days is a comprehensive CSS learning project designed for developers. Through 21 days of structured learning, you'll master modern CSS development skills.

Features

• Structured Learning Path: 21-day curriculum from basics to advanced
• Bilingual Support: Chinese and English documentation
• Interactive Demos: Hands-on HTML examples for each concept
• Practical Focus: Real-world scenarios and best practices
• Framework-Oriented: Prepares you for React, Vue, TailwindCSS, and more

---

📚 项目结构 | Project Structure

css-21-days/
├── README.md              # 项目介绍（中英双语）
├── LICENSE                # MIT License
├── plan/                  # 规划文档 | Planning Documents
│   └── learning-path.md   # 21天学习路径
├── docs/                  # 学习文档 | Documentation
│   ├── zh/                # 中文版 | Chinese Version
│   │   ├── class1_css选择器基础.md
│   │   └── class2_盒模型.md
│   └── en/                # 英文版 | English Version
│       ├── class1_css_selectors.md
│       └── class2_box_model.md
└── demos/                 # 演示页面 | Demo Pages
    ├── zh/                # 中文演示
    │   ├── class1_css选择器基础.html
    │   └── class2_盒模型.html
    └── en/                # English Demos
        ├── class1_css_selectors.html
        └── class2_box_model.html

---

🚀 快速开始 | Quick Start

中文 | Chinese

1. 查看 plan/learning-path.md 了解完整学习路径
2. 从 docs/zh/class1_css选择器基础.md 开始学习
3. 打开对应的 demos/zh/*.html 文件进行实践

English

1. Check plan/learning-path.md for the complete learning path
2. Start with docs/en/class1_css_selectors.md
3. Open corresponding demos/en/*.html files for practice

---

📅 学习路径 | Learning Path

第一梯度（高优先级）- Day 1-8

Day	知识点	Topic
1	CSS选择器基础	CSS Selectors Basics
2	盒模型	Box Model
3	display属性	Display Property
4-5	Flexbox布局	Flexbox Layout
6	CSS单位	CSS Units
7-8	响应式设计	Responsive Design

第二梯度（进阶）- Day 9-15

Day	知识点	Topic
9	CSS变量	CSS Variables
10	position定位	Position
11	伪类和伪元素	Pseudo-classes & Pseudo-elements
12	背景和边框	Background & Border
13	文本和字体	Text & Font
14-15	Grid网格布局	Grid Layout

第三梯度（扩展）- Day 16-19

• CSS 过渡和动画 | CSS Transitions & Animations
• z-index 和层叠上下文 | z-index & Stacking Context
• CSS 函数和 transform | CSS Functions & Transform
• CSS Modules / Scoped CSS

第四梯度（查漏补缺）- Day 20-21

• 回顾和薄弱点加强
• 框架 CSS 实战

---

🎯 目标框架 | Target Frameworks

本项目为以下框架提供 CSS 基础：

• React - 组件化开发
• Vue - 渐进式框架
• TailwindCSS - 实用优先的 CSS 框架
• Laravel Livewire - 全栈框架
• AlpineJS - 轻量级前端框架

---

📖 学习资源 | Resources

视频 | Videos

• B站：渡一教育/黑马程序员的 CSS 课程
• YouTube: Kevin Powell

文档 | Documentation

• MDN CSS 文档
• CSS-Tricks
• TailwindCSS 文档

在线练习 | Practice

• Flexbox Froggy
• CSS Grid Garden
• CodePen

---

📝 许可证 | License

MIT License - 详见 LICENSE 文件

---

祝你学习顺利！| Happy Learning! 🎉