学习使用 CSS 样式化 HTML

在尝试任何 CSS 之前，你应该学习 HTML 的基础知识。我们建议你首先完成我们的 HTML 简介 模块。

一旦你理解了 HTML 的基本原理，我们建议你同时学习更多的 HTML 和 CSS，在两个主题之间来回切换。这是因为当你应用 CSS 时，HTML 会变得更加有趣和好玩，而且你不可能在不知道 HTML 的情况下学习 CSS。

在开始本主题之前，你还应该熟悉使用计算机和被动地使用 Web（即只查看它，消费内容）。你应该设置一个基本的工作环境，如 安装基本软件 中所述，并了解如何创建和管理文件，如 处理文件 中所述 — 这两部分都是我们 Web 入门 完整的新手模块的一部分。

在继续本主题之前，还建议你完成 Web 入门，尤其是在你完全不熟悉 Web 开发的情况下。但是，其 CSS 基础 文章中涵盖的大部分内容也在我们的 CSS 初步 模块中有所涵盖，尽管内容更加详细。

本主题包含以下模块，建议按照顺序学习。你应该从第一个开始。

CSS 初步

CSS（层叠样式表）用于样式化和布局网页 — 例如，更改内容的字体、颜色、大小和间距，将其分成多列，或添加动画和其他装饰性功能。本模块为你通往 CSS 掌握之路提供了轻松的开始，包括其工作原理、语法以及如何开始使用它为 HTML 添加样式的基础知识。

CSS 构建块

本模块承接 CSS 初步，你现在已经熟悉了该语言及其语法，并获得了一些使用它的基本经验，现在是时候深入探讨了。本模块介绍了级联和继承、所有可用的选择器类型、单位、大小调整、样式化背景和边框、调试等等。

目的是为你提供编写合格 CSS 的工具包，并帮助你理解所有基本理论，然后再转向更具体的学科，如 文本样式 和 CSS 布局。

CSS 样式化文本

在涵盖了 CSS 语言的基础知识之后，接下来你需要关注的 CSS 主题是文本样式 — 这也是你使用 CSS 最常见的事情之一。在这里，我们介绍了文本样式的基础知识，包括设置字体、粗体、斜体、行距和字距、阴影和其他文本功能。最后，我们介绍了如何将自定义字体应用于页面，以及样式化列表和链接。

CSS 布局

到目前为止，我们已经学习了 CSS 的基础知识、如何设置文本样式以及如何设置和操作内容所在的盒子。现在是时候学习如何根据视口和其他盒子来放置这些盒子了。我们已经学习了必要的先决条件，因此现在可以深入研究 CSS 布局，了解不同的显示设置、Flexbox、CSS Grid 和定位等现代布局工具，以及您可能仍然需要了解的一些传统技术。

使用 CSS 解决常见问题 提供了指向内容部分的链接，这些内容解释了如何在创建网页时使用 CSS 解决非常常见的问题。

从一开始，您主要会将颜色应用于 HTML 元素及其背景；更改元素的大小、形状和位置；以及在元素上添加和定义边框。但是，一旦您对 CSS 的基础知识有了扎实的了解，就没有什么事情是您做不到的。学习 CSS 最好的方面之一是，一旦您掌握了基础知识，通常您就能很好地了解哪些事情可以做，哪些事情不能做，即使您还不知道如何做！

CSS 的工作方式与您遇到的大多数编程语言和设计工具略有不同。它为什么以这种方式工作？在下面的视频中，Miriam Suzanne 提供了一个关于 CSS 工作原理以及它如何演变的有用解释。

MDN 上的 CSS

MDN 上 CSS 文档的主要入口点，您可以在其中找到 CSS 语言所有功能的详细参考文档。想知道某个属性可以取哪些值？这是一个不错的去处。