CSS 总结

本教程从零开始，带你掌握了 CSS 的常用概念和用法。下面做一个简要回顾，并给出后续学习建议。

一、基础部分

• CSS 简介：CSS 是层叠样式表，负责网页的「样子」，与 HTML（结构）配合使用。
• 编辑器：推荐用 VS Code 或在线编辑器（如 CodePen）练习。
• 语法：选择器 + { 属性: 值; }；注释用 /* */。
• Id 和 Class：.class 可复用，#id 页面内唯一；做样式优先用 class。
• 创建方式：内联、内部 <style>、外部 <link>；项目推荐外部样式表。

二、样式与盒子

• 背景：background-color、background-image、background-repeat、background-position、background-size。
• 文本：color、text-align、line-height、text-decoration、text-shadow 等。
• 字体：font-family、font-size、font-weight、font-style、font 简写。
• 链接：:link、:visited、:hover、:active 四种状态。
• 列表：list-style-type、list-style-position、list-style-image。
• 表格：border-collapse、border、padding、背景与对齐。
• 盒子模型：content → padding → border → margin；box-sizing: border-box 更易布局。
• 边框：border-width、border-style、border-color 及简写。
• 轮廓：outline，不占空间，常用于 :focus。
• margin / padding：外边距与内边距；垂直 margin 会合并。

三、布局与定位

• 分组和嵌套：选择器分组（逗号）、后代（空格）、子选择器（>）。
• 尺寸：width、height、min-width、max-width 等。
• Display：block、inline、inline-block、none、flex、grid。
• Position：relative、absolute、fixed、sticky；配合 top/right/bottom/left、z-index。
• Overflow：visible、hidden、scroll、auto。
• Float：左/右浮动；清除浮动（clear、BFC）。
• 对齐：text-align、margin: 0 auto、Flex 的 justify-content/align-items。

四、选择器与组件

• 组合选择符：后代（空格）、子（>）、相邻兄弟（+）、通用兄弟（~）。
• 伪类：:hover、:focus、:first-child、:nth-child 等。
• 伪元素：::before、::after、::first-line、::first-letter。
• 导航栏、下拉菜单、提示工具、图片廊：结构 + 定位 + :hover。
• 图像：透明度（opacity、rgba）、拼合图（background-position）。
• 媒体类型与媒体查询：@media screen/print、max-width/min-width 做响应式。
• 属性选择器：[attr]、[attr=value]、[attr^=value] 等。
• 表单：input、textarea、button 的样式与 :focus、:disabled。
• 计数器：counter-reset、counter-increment、counter()/counters()。
• 网页布局：Flex/Grid 做整体结构，max-width + 媒体查询做响应式。
• !important：慎用，优先用选择器权重和顺序。

五、后续建议

1. 多写多改：每个知识点在本地或 CodePen 里写一遍，改数值看效果。
2. 做小项目：做一个简单首页、表单页、卡片列表，把布局、文本、背景、响应式都用上。
3. 看规范与文档：需要时查 MDN 或 W3C 规范，巩固属性含义和兼容性。
4. 学一点预处理器（可选）：Sass/Less 的变量、嵌套、混合可让 CSS 更易维护，可在基础牢固后再学。

恭喜你完成本教程的学习，接下来可以在实际项目中反复练习，逐步形成自己的书写习惯和布局思路。