**CSS3 快速参考指南**
CSS3，全称Cascading Style Sheets Level 3，是Web设计领域中用于描述网页及应用程序用户界面外观和表现的一门语言。它极大地扩展了CSS2.1的功能，引入了许多新的选择器、模块、属性和值，使样式表更加灵活，功能更加强大。
### 一、选择器增强
1. **伪类选择器**：如`:hover`, `:active`, `:focus`，用于元素在不同状态下的样式控制。新增的有`:nth-child(n)`, `:nth-of-type(n)`, `:first-child`, `:last-child`等，便于更精准地选取子元素。
2. **结构伪类**：`:nth-of-type()`, `:last-of-type()`, `:only-child`, `:empty`等，根据元素在DOM中的位置进行选择。
3. **属性选择器**：例如`[attr=value]`，可以匹配具有特定属性和值的元素。
4. **伪元素**：`:before`和`:after`可以插入内容到元素的前面或后面，而`:first-letter`和`:first-line`则对首字母和首行进行样式设置。
### 二、模块增强
1. **边框与背景**：支持圆角边框`border-radius`，线性渐变`linear-gradient`，径向渐变`radial-gradient`，以及盒阴影`box-shadow`。
2. **文字效果**：`text-shadow`用于添加文字阴影，`text-overflow`控制超出容器的文字显示，`word-wrap`允许单词换行。
3. **多列布局**：`column-count`, `column-gap`, `column-width`等属性实现多列布局。
4. **Flexbox**：弹性布局模型，通过`display: flex`定义容器，`flex-direction`, `justify-content`, `align-items`等控制元素排列。
5. **Grid布局**：`display: grid`和`grid-template-columns/rows`等属性创建二维网格布局。
6. **响应式设计**：`@media`查询允许根据设备特性应用不同的样式。
### 三、新属性
1. **颜色处理**：新增`hsl()`和`hsla()`颜色模式，以及透明度`opacity`。
2. **过渡与动画**：`transition`控制属性变化过程，`animation`定义复杂的动效。
3. **变形**：`transform`属性实现元素的旋转、缩放、平移和倾斜。
4. **滤镜**：`filter`属性可实现模糊、饱和度、亮度等视觉效果。
5. **自定义字体**：`@font-face`规则引入自定义字体。
6. **Flexbox和Grid中的间距调整**：`gap`属性在Flexbox和Grid布局中设定元素间的间距。
### 四、浏览器兼容性
CSS3的各个部分在不同浏览器上的兼容性各异。开发者需注意使用前缀如`-webkit-`, `-moz-`, `-ms-`, `-o-`以确保在旧版本浏览器中的兼容性。
### 五、最佳实践
1. **代码组织**：使用预处理器如Sass或Less，提高代码复用性和可维护性。
2. **重置与正常化**：使用CSS重置（如Eric Meyer Reset）或正常化（如Normalize.css）来消除浏览器默认样式差异。
3. **优先级**：理解CSS的层叠规则，合理安排选择器权重。
4. **性能优化**：减少HTTP请求，压缩CSS，使用CSS Sprites和媒体查询合并小图片。
5. **语义化**：遵循HTML5语义元素，用CSS实现视觉效果而非HTML结构。
6. **响应式设计**：采用移动优先策略，确保网站在各种设备上都有良好体验。
7. **测试**：使用工具如Autoprefixer处理浏览器前缀，使用CSS Lint检查语法错误。
以上就是关于CSS3的一些关键知识点，通过掌握这些，开发者可以构建更现代、更具交互性的网页和应用程序。不断学习和实践是提升CSS技能的关键，因为CSS3仍在不断发展和完善之中。
css3-cheat-sheet.rar （1个子文件） 
css3-cheat-sheet.pdf 120KB
