# css

**Repository Path**: bwcxwh/css

## Basic Information

- **Project Name**: css
- **Description**: 为零基础学习者量身定制 CSS 学习路径，遵循由浅入深的科学规划，凭借细致易懂的讲解，助力新手高效掌握 CSS 技能。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-02
- **Last Updated**: 2025-09-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: CSS, 前端学习, 零基础

## README

# 从零学习 CSS 的学习目录

## 前言

这份学习目录旨在帮助初学者从零开始系统学习 CSS（层叠样式表），从基础概念逐步进阶到高级技巧，最终能够独立完成响应式网站设计和开发。

## 学习路径概览

1. **CSS 基础入门** - 掌握 CSS 核心概念和语法
2. **CSS 布局与定位** - 学习各种布局技术
3. **CSS 高级特性** - 探索动画、响应式设计等高级功能
4. **CSS 工程化与性能优化** - 提升代码质量和性能
5. **项目实践与进阶** - 通过实战巩固和提升技能

---

## 第一阶段：CSS 基础入门

### 1. [CSS 简介与基础概念](1.CSS简介与基础概念.md)

- CSS 的定义与作用
- CSS 的发展历史
- CSS 与 HTML 的关系
- CSS 的工作原理

### 2. [CSS 基础语法](2.CSS基础语法.md)

- CSS 规则的结构（选择器、属性、值）
- CSS 注释
- CSS 单位（px, em, rem, %, vh, vw 等）
- CSS 颜色表示方法（十六进制、RGB、RGBA、HSL、HSLA）

### 3. [CSS 选择器](3.CSS选择器.md)

- 基础选择器
  - 元素选择器
  - ID 选择器
  - 类选择器
  - 通用选择器
- 组合选择器
  - 后代选择器
  - 子元素选择器
  - 相邻兄弟选择器
  - 通用兄弟选择器
- 属性选择器
- 伪类选择器
  - 状态伪类（:hover, :active, :focus, :visited）
  - 结构伪类（:first-child, :last-child, :nth-child）
- 伪元素选择器（::before, ::after, ::first-line, ::first-letter）

### 4. [CSS 盒模型](4.CSS盒模型.md)

- 盒模型的组成（内容区、内边距、边框、外边距）
- 标准盒模型与 IE 盒模型的区别
- box-sizing 属性的使用
- 外边距合并问题
- 内边距和边框对元素尺寸的影响

### 5. [CSS 文本样式](5.CSS文本样式.md)

- 字体属性（font-family, font-size, font-weight, font-style）
- 文本属性（text-align, text-decoration, text-transform, text-indent, line-height）
- 字间距与字母间距
- 文本阴影
- 字体图标基础

### 6. [CSS 颜色与背景](6.CSS颜色与背景.md)

- 颜色理论基础
- CSS 颜色表示方法详解
- 背景色（background-color）
- 背景图片（background-image）
- 背景平铺（background-repeat）
- 背景定位（background-position）
- 背景尺寸（background-size）
- 背景附着（background-attachment）
- 背景简写属性

---

## 第二阶段：CSS 布局与定位

### 7. [CSS 布局与定位](7.CSS布局与定位.md)

- 文档流布局
- 块级元素与行内元素
- display 属性详解
- 浮动布局（float）及其清除方法
- 定位系统（position 属性）
  - static 定位
  - relative 定位
  - absolute 定位
  - fixed 定位
  - sticky 定位
- z-index 属性与层叠上下文

### 8. [弹性盒布局（Flexbox）](8.CSSFlexbox布局.md)

- Flexbox 的基本概念
- Flex 容器属性
  - display: flex
  - flex-direction
  - flex-wrap
  - flex-flow
  - justify-content
  - align-items
  - align-content
- Flex 项目属性
  - order
  - flex-grow
  - flex-shrink
  - flex-basis
  - flex
  - align-self
- Flexbox 常见布局模式

### 9. [CSSGrid 布局](9.CSSGrid布局.md)

- Grid 的基本概念（容器、项目、行、列、轨道、单元格、区域）
- Grid 容器属性
  - display: grid
  - grid-template-columns/rows
  - grid-template-areas
  - grid-template
  - gap (grid-gap)
  - justify-items/align-items
  - justify-content/align-content
- Grid 项目属性
  - grid-column-start/end
  - grid-row-start/end
  - grid-column/grid-row
  - grid-area
  - justify-self/align-self
- Grid 布局实战

---

## 第三阶段：CSS 高级特性

### 10. [CSS 动画与过渡](10.CSS动画与过渡效果.md)

- 过渡（transition）属性详解
- 动画（animation）属性详解
- @keyframes 规则
- 动画缓动函数
- 3D 变换基础
- 常见动画效果实现

### 11. [响应式网页设计](11.CSS响应式设计.md)

- 响应式设计的概念
- 媒体查询（Media Queries）
- 断点设置策略
- 流动布局
- 弹性图片
- 移动优先设计与渐进增强
- 响应式框架简介

### 12. [CSS 变量与计算](12.CSS变量与自定义属性.md)

- CSS 变量（Custom Properties）的定义与使用
- CSS 变量的作用域与继承
- CSS 变量的优势与应用场景
- calc()函数
- clamp()函数
- min()和 max()函数

### 13. [CSS 预处理器基础](13.CSS预处理.md)

- 预处理器概念与优势
- Sass/SCSS 基础语法
- Less 基础语法
- PostCSS 简介
- 预处理器在项目中的应用

---

## 第四阶段：CSS 工程化与性能优化

### 14. [CSS 工程化与性能优化](14.CSS工程化与性能优化.md)

- CSS 工程化概述
- CSS 预处理器
- CSS 后处理器
- CSS 模块化与组件化
- CSS 构建工具与工作流
- CSS 性能优化技巧

### 15. [CSS 高级特性](15.CSS高级特性.md)

- 高级选择器
- CSS 函数
- CSS 混合模式与滤镜
- CSS 形状与裁剪
- CSS 3D 变换与透视
- CSS 自定义属性与主题系统
- CSS 动画与交互高级技巧

---

## 第五阶段：项目实践与进阶

### 16. [CSS 项目实践与进阶](16.CSS项目实践与进阶.md)

- 个人作品集网站
- 电商网站首页
- 响应式博客布局
- 企业官网设计
- 单页应用样式设计

### 17. [浏览器兼容性处理](17.浏览器兼容性处理.md)

- 浏览器兼容性问题分析
- 浏览器前缀使用
- 特性检测
- Polyfill 的使用
- 兼容性测试方法

---

## 学习资源推荐

### 官方文档

- [MDN Web Docs - CSS](https://developer.mozilla.org/zh-CN/docs/Web/CSS)
- [W3C CSS 规范](https://www.w3.org/Style/CSS/)

### 书籍推荐

- 《CSS: The Definitive Guide》
- 《CSS Secrets》
- 《深入理解 CSS》
- 《响应式 Web 设计实作指南》

### 实用工具

- [Can I Use](https://caniuse.com/) - 浏览器兼容性查询
- [CSS Grid Generator](https://cssgrid-generator.netlify.app/)
- [Flexbox Froggy](https://flexboxfroggy.com/) - 交互式 Flexbox 学习游戏
- [CSS Diner](https://flukeout.github.io/) - 交互式选择器学习游戏

---

## 学习建议

1. **循序渐进**：从基础开始，逐步深入高级特性
2. **实践为主**：多写代码，尝试不同的实现方式
3. **查阅文档**：遇到问题时，养成查阅官方文档的习惯
4. **关注前沿**：CSS 一直在发展，关注新特性和最佳实践
5. **分析优秀网站**：学习专业设计师的实现方式
6. **参与社区**：加入 CSS 社区，分享经验和问题

祝学习愉快！