CSS

为你的页面增添样式

CSS 把原始文档变成精致的界面。选择器、盒模型、Flexbox、Grid 和响应式设计，再到动画和 CSS 架构：本课程涵盖你有条理地设计样式所需的一切。

基础

入门 - 一步步打好基础

• 将 CSS 链接到页面了解什么是 CSS，如何把它连接到 HTML 页面，以及如何写下你的第一条规则。
• 基本选择器与颜色学习用元素、类和 id 选择器精确定位元素，然后为它们应用颜色。
• 盒模型理解每个元素都是一个由内容、内边距、边框和外边距组成的盒子，并掌握 box-sizing。
• 文本与字体用 font-family 选择一种字体，然后调整大小、字重和行距，让文字读起来舒服。
• 初次布局区分块级元素与行内元素，并学习几种经典的元素居中技巧。

进阶

中级 - 构建真实项目

• 层叠、优先级与继承学会用优先级预测哪条 CSS 规则会生效，并利用继承少写代码。
• Flexbox：主轴与交叉轴、justify/align、gap、flex-grow掌握 Flexbox 的两条轴，在日常布局中对齐、居中并分布你的元素。
• Grid：列、行、区域用 CSS Grid 的列、行和命名区域，构建画廊和完整的页面布局。
• 定位：relative、absolute、fixed、sticky、z-index用 CSS 定位和一套管理良好的 z-index 层级，把徽章、页头和弹窗精确锚定在你想要的位置。
• 响应式设计：媒体查询、相对单位用移动优先的思路、媒体查询以及 rem、%、vw 单位，让你的界面适配各种屏幕尺寸。

精通

熟练 - 高级模式与性能优化

• CSS 变量与 calc/clamp 函数掌握自定义属性、它们如何在层叠中于运行时求值，以及用于流式界面的 calc() 和 clamp() 函数。
• 过渡与动画：@keyframes、transform、时序用 transform 和 opacity 在合成器上做动画、组织好你的 @keyframes，并尊重用户的动效偏好。
• 现代选择器：:has、:is、:where、进阶 :nth-child利用近期的函数式伪类，基于内容进行选择、在不抬高特异性的情况下对选择器分组，并瞄准复杂的模式。
• CSS 架构：BEM、utility-first、文件组织比较 BEM 与 utility-first 方案、它们在团队中真实的取舍，并用层叠层来组织你的文件。
• 容器查询与 CSS 嵌套让你的组件响应其容器而非视口，并用原生嵌套来组织你的样式表。

大师

专家 - 架构、底层原理与边界情况

• 渲染管线：回流、重绘与合成理解浏览器渲染的四个阶段，从而准确知道哪些 CSS 属性开销高，以及 will-change 在底层是如何工作的。
• 级联层（@layer）与 @scope掌握两个新的级联判定标准——层与作用域邻近度——从而在不打特异性大战的情况下架构你的样式。
• 颜色与高级函数：oklch、color-mix、min/max利用感知均匀的色彩空间、相对颜色语法和带类型的数学函数，构建由浏览器为你计算的设计系统。
• 专家级网格：subgrid、auto-fit 与 minmax无需媒体查询即可构建自适应网格，并用 subgrid 让嵌套组件在父级的轨道上对齐。
• 现代交互：scroll-snap、视图过渡编排磁吸式滚动、由浏览器动画化的状态过渡，并严谨地尊重 prefers-reduced-motion。