学习使用 CSS 为 HTML 添加样式

在尝试学习 CSS 之前，你应该了解 HTML 的基础知识。建议你先学习 HTML 简介模块。

一旦你掌握了 HTML 的基础知识，我们建议你同时学习更深入的 HTML 和 CSS，在这两个主题之间来回切换学习。这是因为当你应用 CSS 时，HTML 会变得更加有趣，学习起来也更有乐趣，而不了解 HTML 就无法学习 CSS。

在开始这个主题之前，你还应该熟悉使用计算机和被动地使用网络（即，仅仅浏览和消费内容）。你应该按照安装基础软件中详细说明的内容设置好一个基本的工作环境，并且理解如何创建和管理文件，这在处理文件中有详细介绍——这些都是我们从零开始学网页初学者完整模块的一部分。

如果你对网页开发完全陌生，建议你在继续学习这个主题之前，先完成从零开始学网页的学习。不过，CSS 基础文章中涵盖的大部分内容也在我们的 CSS 第一步模块中有更详细的讲解。

本主题包含以下模块，建议按顺序阅读这些模块。你应该从第一个模块开始。

CSS 第一步

CSS（层叠样式表）用于样式化和布局网页。例如，可以更改内容的字体、颜色、大小和间距，将内容分成多列，或添加动画和其他装饰功能。本模块将为你提供通往精通 CSS 之路的平缓起点，让你了解 CSS 的基本工作原理、语法，以及如何开始使用 CSS 为 HTML 添加样式。

构建 CSS 块

本模块承接 CSS 第一步，进行进一步的学习——既然你已经熟悉了 CSS 的语言和语法，有了一些使用 CSS 的基本经验，是时候再深入一些了。本模块涉及了层叠与继承、可用的所有种类的选择器、单位、尺寸、样式化背景和边框、调试，还有更多。这样做的目的是，在继续深入到更加具体的规则，例如样式化文本和 CSS 布局前，为你提供一个编写合格 CSS 的工具包，帮你理解所有必要的理论。

样式化文本

在覆盖了 CSS 语言的基础知识之后，下一个需要集中学习的 CSS 主题是文本样式化——这是你使用 CSS 最常做的事情之一。这里我们研究文本样式化的基本原理，包括设置字体、粗细、斜体、行���和字母间距、阴影等文本特征。我们最后还会讨论如何将自定义字体应用到页面上，以及如何样式化列表和链接。

CSS 布局

到目前为止，我们已经学习了 CSS 基础知识、如何设置文本样式、如何设计并操作内容所在的盒子。现在应该考虑如何把你的盒子以合适的位置放置在视口内和其他盒子旁边了。我们已经学习了在深入 CSS 布局之前需要学会的必要知识，下一步我们通过学习设置 display 属性，使用新的布局工具如弹性盒（flexbox）、CSS 网格和定位，以及你仍想知道的一些传统技术，来深入学习 CSS 布局。

使用 CSS 解决常见问题解释了怎样使用 CSS 解决创建一个网页时常遇到的问题。

从这里开始，你大致就能在 HTML 元素和它们的背景上应用颜色、改变形状尺寸和元素的位置、向元素上添加并定义边框。但是，只要你对 CSS 的基础知识有了扎实的了解，就没有做不到的事情了。学习 CSS 的最大好处之一就是，一旦你了解了 CSS 的基础知识，即使你还不知道如何操作，通常也能很好地了解哪些可以做到，哪些不可以做到！

CSS 确实有些独特，它的工作方式与大多数编程语言和设计工具有些不同。为什么 CSS 会以这种方式工作呢？在下面的视频中，Miriam Suzanne 提供了一个有用的解释，说明了 CSS 为什么会这样工作，以及为什么它会这样演变：

MDN 上的 CSS 文档

MDN 上 CSS 文档的主要入口，可以在这里找到 CSS 语言所有特性的详细参考文档。想要了解某个属性可以取的所有值吗？这是一个很好的去处。