本课程将 CSS 的基础知识分解为清晰易懂的部分。在接下来的几个模块中，您将学习 CSS 核心方面的工作原理以及如何在项目中有效地使用它们。使用“Learn CSS”徽标旁边的菜单窗格来浏览模块。
您将学习 CSS 基础知识，如盒模型、层叠和特异性、flexbox、grid 和 z-index。您还将学习函数、颜色类型、渐变、逻辑属性和继承，使您成为一名全面的前端开发人员，准备好应对任何用户界面。
每个模块都充满了互动演示和自我评估，供您测试您的知识。除了通过阅读和演示进行学习外，每个主题还附带一集播客，作为另一种学习和继续扩展知识的方式。
本课程专为初级和高级 CSS 开发人员设计。您可以从头到尾浏览整个系列，全面了解 CSS，或者您可以将其用作特定样式主题的参考。对于那些刚接触 Web 开发的人，请查看 Learn HTML 以了解如何编写标记并链接您的样式表。
以下是您将学到的内容
盒模型
由于 CSS 显示的所有内容都是一个盒子，因此了解 CSS 盒模型的工作原理是 CSS 的核心基础。
选择器
要将 CSS 应用于元素，您需要选择它。CSS 为您提供了多种不同的方法来执行此操作，您可以在本模块中探索它们。
层叠
有时，两个或多个相互竞争的 CSS 规则可以应用于一个元素。了解浏览器如何选择使用哪个，以及如何控制此选择。
特异性
本模块深入探讨了特异性，这是层叠的关键部分。
继承
如果您没有为某些 CSS 属性指定值，它们就会继承。在本模块中，了解这是如何工作的以及如何利用它。
颜色
在 CSS 中有几种不同的方法来指定颜色。本模块检查最常用的颜色值。
尺寸单位
了解如何使用 CSS 调整元素大小，并在灵活的 Web 媒介中工作。
布局
概述了构建组件或页面布局时必须选择的各种布局方法。
Flexbox
Flexbox 是一种布局机制，专为在一个维度中布局项目组而设计。在本模块中学习如何使用它。
Grid
CSS Grid Layout 提供了一个二维布局系统，控制行和列的布局。探索网格提供的所有功能。
逻辑属性
逻辑的、流相关的属性和值与文本流相关联，而不是屏幕的物理形状。了解如何利用这种较新的 CSS 方法。
间距
了解如何为您正在使用的布局方法和正在构建的组件选择最佳的元素间距方法。
伪元素
伪元素就像添加或定位一个额外的元素，而无需添加更多 HTML。它们有多种作用，您可以在本模块中了解它们。
伪类
伪类允许您根据状态更改应用 CSS。这意味着您的设计可以对用户输入做出反应，例如无效的电子邮件地址。
边框
边框为您的盒子提供框架。了解如何使用 CSS 更改边框的大小、样式和颜色。
阴影
有许多方法可以在 CSS 中为文本和元素添加阴影。了解如何使用每个选项以及它们旨在完成的任务。
焦点
了解焦点在您的 Web 应用程序中的重要性。您将学习如何管理焦点，以及如何确保页面路径对于使用鼠标和使用键盘导航的人都有效。
Z-index 和堆叠上下文
了解如何通过使用 z-index 和堆叠上下文来控制元素彼此堆叠的顺序。
函数
CSS 有一系列内置函数。了解一些关键函数以及如何使用它们。
渐变
在本模块中，您将了解如何使用 CSS 中可用的各种类型的渐变。渐变可以创建各种有用的效果，而无需图形应用程序来创建图像。
动画
动画是突出显示交互元素，并为您的设计增加趣味性的好方法。了解如何使用 CSS 添加和控制动画效果。
滤镜
CSS 中的滤镜意味着您可以应用您可能认为只能在图形应用程序中实现的效果。在本模块中，您可以发现有哪些可用的滤镜。
混合模式
通过混合两个或多个图层来创建合成效果，并学习如何在本模块中关于混合模式的内容中隔离白色背景的图像。
列表
从结构上讲，列表由填充有列表项的列表容器元素组成。在本模块中，您将学习如何设置列表所有部分的样式。
过渡
了解如何定义元素的各状态之间的过渡。使用过渡通过为用户交互提供视觉反馈来改善用户体验。
溢出
溢出是您如何处理不适合设定父级大小的内容。在本模块中，您将跳出框框思考，并学习如何设置溢出内容的样式。
背景
了解如何使用 CSS 设置框背景的样式。
文本和排版
了解如何在 Web 上设置文本样式。
结论和后续步骤
更多资源可帮助您采取后续步骤。
那么，您准备好学习 CSS 了吗？ 让我们开始吧。