本课程将 CSS 的基础知识分解为清晰易懂的各个部分。 在接下来的几个模块中，您将了解 CSS 的核心方面如何运作，以及如何在项目中有效地使用它们。使用“学习 CSS”徽标旁边的菜单窗格浏览模块。
您将学习 CSS 基础知识，例如盒模型、层叠和特异性、Flexbox、网格和 z-index。您还将学习函数、颜色类型、渐变、逻辑属性和继承，从而成为一名全面的前端开发者，能够应对任何用户界面。
每个模块都包含许多互动式演示和自我评估，可用于检验您的知识掌握情况。除了通过阅读和演示进行学习之外，每个主题还附带一集播客，让您能够以另一种方式学习并不断拓展知识。
本课程面向初级和高级 CSS 开发者。您可以从头到尾浏览整个系列，全面了解 CSS，也可以将其作为特定样式主题的参考。如果您是 Web 开发新手，请参阅学习 HTML，了解如何编写标记和关联样式表。
您将了解以下内容：
箱线图模型
由于 CSS 显示的所有内容都是盒子，因此了解 CSS 框模型的运作方式是 CSS 的核心基础。
选择器
如需将 CSS 应用于某个元素，您需要先选择该元素。CSS 提供了多种不同的方式来实现此目的，您可以在本模块中了解这些方式。
嵌套
嵌套 CSS 样式规则可让您的样式表更有条理、更易于阅读和维护。
级联
有时，两条或更多条相互冲突的 CSS 规则可能会应用于一个元素。了解浏览器如何选择使用哪个，以及如何控制此选择。
特异性
本模块将深入探讨特指度，这是级联的关键部分。
继承
如果您未指定某些 CSS 属性的值，它们会沿用父元素的相应属性值。在本模块中，您将了解此功能的运作方式以及如何利用它来获益。
颜色
在 CSS 中，您可以通过多种不同的方式指定颜色。本模块将介绍最常用的颜色值。
调整大小单位
了解如何使用 CSS 调整元素大小，从而灵活运用网络这一媒介。
布局
概述了在构建组件或网页布局时可供选择的各种布局方法。
Flexbox
Flexbox 是一种布局机制，旨在以一维方式布局一组内容。在此模块中了解如何使用它。
网格
CSS 网格布局提供了一个二维布局系统，可控制行和列中的布局。了解网格提供的所有功能。
逻辑属性
逻辑属性和值（与流相关）与文字的流向相关，而不是与屏幕的物理形状相关。了解如何利用这种更新的 CSS 方法。
自定义属性
借助自定义属性（或 CSS 变量），您可以整理和重复使用 CSS 中的值，从而使样式更灵活且更易于理解。
间距
了解如何为所用的布局方法和所构建的组件选择最佳元素间距设置方法。
伪元素
伪元素就像是添加或定位额外的元素，而无需添加更多 HTML。这些角色种类繁多，您可以在本模块中了解相关信息。
伪类
借助伪类，您可以根据状态变化应用 CSS。这意味着您的设计可以对用户输入（例如无效的电子邮件地址）做出反应。
边框
边框可为方框提供框架。了解如何使用 CSS 更改边框的大小、样式和颜色。
阴影
在 CSS 中，您可以通过多种方式为文字和元素添加阴影。 了解如何使用每种选项，以及这些选项分别适用于哪些任务。
焦点
了解焦点在 Web 应用中的重要性。您将了解如何管理焦点，以及如何确保网页上的路径适用于使用鼠标的用户和使用键盘进行导航的用户。
光标和指针
光标是用户了解自己正在与什么内容互动的重要方式。在本模块中，您将了解如何在特定情况下设置光标样式。
Z-index 和堆叠上下文
了解如何使用 z-index 和堆叠上下文来控制元素相互叠加的顺序。
锚点定位
CSS 锚点定位提供了一种以声明方式相对于另一个元素定位元素的方法。
浮层和对话框
弹出式窗口是指具有 popover 属性的任何元素，可用于各种互动模式，包括提示、提醒、Toast 等。
函数
CSS 具有一系列内置函数。了解一些主要功能及其使用方法。
路径、形状、剪切和遮罩
借助路径、形状、剪切和遮罩，开发者可以通过各种函数在 CSS 中呈现复杂的形状，从而为用户打造令人难忘的体验。
梯度
在本模块中，您将了解如何使用 CSS 中提供的各种类型的渐变。渐变可以创建各种有用的效果，而无需使用图形应用来创建图片。
动画
动画是突出显示互动元素的好方法，可为设计增添趣味。了解如何使用 CSS 添加和控制动画效果。
过滤条件
CSS 中的滤镜意味着您可以应用一些效果，而这些效果以前可能只在图形应用中实现。在本模块中，您可以了解有哪些可用的功能。
混合模式
通过混合两个或更多图层来创建合成效果，并在此有关混合模式的模块中了解如何隔离白色背景中的图片。
列表
从结构上讲，列表由填充了列表项的列表容器元素组成。在本模块中，您将学习如何设置列表所有部分的样式。
计数器
CSS 提供了多种方式来控制列表中的计数器，以满足不同的使用场景。在本模块中，您将学习如何控制列表中的计数器。
过渡
了解如何定义元素状态之间的过渡。使用过渡效果，通过为用户互动提供视觉反馈来改善用户体验。
适用于 SPA 的视图过渡
视图过渡功能可让您在 SPA 中的网页之间显示连续性或上下文。
溢出
溢出是指如何处理不适合设定的父级大小的内容。 在本模块中，您将跳出固有思维模式，学习如何设置溢出内容的样式。
背景
了解如何使用 CSS 设置框的背景样式。
文字和排版
了解如何在网页上设置文字样式。
容器查询
与媒体查询不同，容器查询允许您根据元素祖先（或容器）的大小和状态对元素进行更具体的调整。
总结和后续步骤
其他资源，可帮助您采取后续步骤。
那么，您准备好学习 CSS 了吗？让我们开始吧。