# css-study

**Repository Path**: justfunny/css-study

## Basic Information

- **Project Name**: css-study
- **Description**: AI编写的css教程+练习页面
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-09
- **Last Updated**: 2026-06-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# CSS 学习项目

一份系统化的 CSS 学习资料，包含**完整教程**和**配套互动练习页**。

```text
css-study/
├── README.md                    # 你在这里
├── LICENSE
├── tutorial/                    # 📖 教程文档
│   └── CSS完全教程.md           # 30 章完整教程
└── playgrounds/                 # 🧪 互动练习
    ├── index.html               # 练习总入口（卡片墙）
    ├── shared/                  # 共享样式
    │   ├── reset.css
    │   └── playground.css       # 统一面板布局
    ├── 01-selector/             # 选择器
    ├── 02-box-model/            # 盒模型
    ├── 03-position/             # 定位
    ├── 04-z-index/              # 堆叠上下文
    ├── 05-flex/                 # Flex 布局
    └── 06-grid/                 # Grid 布局
```

## 快速开始

### 1. 阅读教程

直接打开 [`tutorial/CSS完全教程.md`](./tutorial/CSS完全教程.md)。

教程共 30 章，建议路径：

- **第 1–10 章**：基础（CSS 是什么、选择器、层叠、盒模型、单位颜色、文字、显示与定位）
- **第 11–12 章**：核心布局（Flex / Grid）
- **第 13–17 章**：响应式、动画、表单、媒体、CSS 变量
- **第 18–22 章**：架构、最佳写法、Tailwind、项目实践、学习路线
- **第 23–27 章**：现代 CSS 新特性 / 性能 / 调试 / 反模式 / 打印与无障碍
- **第 28–30 章**：知名开源项目分析 / 主流方案对比 / 落地原则

### 2. 打开互动练习

直接用浏览器打开 [`playgrounds/index.html`](./playgrounds/index.html)，从卡片墙进入任意练习。

或者用任意静态服务器跑：

```bash
# Python
python -m http.server 5500

# Node（如果装了 serve）
npx serve .

# VS Code 用户：装 Live Server 扩展，右键 index.html → Open with Live Server
```

## 练习清单

每个练习都是「左侧实时控件 + 右侧预览 + 当前 CSS 代码」的交互式实验台。

| 编号 | 练习名 | 你能学到什么 | 对应教程章节 |
|------|--------|--------------|------------|
| 01 | 选择器 Selector | 输入任意 CSS 选择器即时高亮匹配元素；20+ 现代选择器预设 | 第 3 章 |
| 02 | 盒模型 Box Model | 拖动 padding/margin/border，看 `content-box` vs `border-box` 实际差异 | 第 5 章 |
| 03 | 定位 Position | 在可滚动容器中观察 static/relative/absolute/fixed/sticky 五种行为 | 第 10 章 |
| 04 | z-index / 堆叠上下文 | 看 opacity/transform/isolation 如何意外创建堆叠上下文 | 第 10、23 章 |
| 05 | Flex 布局 | 所有 Flex 属性可视化调试，含 12 项属性说明文档 | 第 11 章 |
| 06 | Grid 布局 | 所有 Grid 属性 + 圣杯 / 卡片墙 / 仪表盘等预设布局 | 第 12 章 |

## 后续可扩展的练习

教程已经覆盖很多其他主题，未来可以继续添加这些练习页：

- **颜色与渐变 playground**：`color-mix()` / `oklch()` / 多层渐变可视化
- **阴影 playground**：多层 box-shadow / Material 风格 / Neumorphism 预设
- **变换 playground**：`transform` 2D/3D 实时调试
- **动画 playground**：keyframes 可视化编辑、贝塞尔曲线
- **响应式 / 容器查询 playground**：拖动容器宽度对比媒体查询与容器查询
- **clamp() 流体计算器**：输入参数，可视化曲线变化
- **CSS 变量主题 playground**：切换 token 一键改变整页风格
- **clip-path / 形状 playground**：实时编辑多边形裁剪路径
- **滤镜 playground**：blur / saturate / contrast 等 filter 叠加调试

## 共享样式说明

`playgrounds/shared/playground.css` 提供了统一的"左侧面板 + 右侧预览"布局：

- `.page` 是整体 Grid 容器（360px 左 + 1fr 右）。
- `.panel` 是左侧滚动面板。
- `.group` 是面板中每个分组。
- `.preview` 是右侧预览区，单个练习的 CSS 文件中只需要给 `.preview` 加自己的属性。

这样新增练习只需要：

1. 在 `playgrounds/` 下建一个 `NN-name/` 文件夹。
2. 创建 `index.html` / `style.css` / `script.js`。
3. 引入 `../shared/reset.css` 和 `../shared/playground.css`。
4. 在 `playgrounds/index.html` 卡片墙中加一张卡片。

## 学习建议

1. **先看教程的一个章节，再打开对应练习**，比单纯读文档收益高很多。
2. 改完属性记得**看右下角"当前 CSS"框**，强化记忆。
3. 写不出来的时候，用浏览器 **DevTools 的 Layout 面板**调，比对 playground 调出的代码。
4. 教程第 25 章列了一组**调试 snippet**，可以直接保存到 DevTools Snippets 反复用。

## License

MIT，详见 [LICENSE](./LICENSE)。