学习使用 CSS 为 HTML 添加样式

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

一旦你理解了 HTML 的基础知识，我们就建议你同时更深入地学习 HTML 和 CSS，在这两个专题之间来回切换。这么做是因为在应用了 CSS 后，HTML 会变得更加有趣，学习起来也更有乐趣。并且不了解 HTML 的话，也无法学习 CSS。

在开始本专题之前，你还应该熟悉如何使用电脑，如何被动地使用 Web（例如，只是浏览和消费内容）。你应该按照安装基础软件中的详细内容搭建基础工作环境，以及按照处理文件中的内容理解如何创建和管理文件——两个都是 Web 入门纯新手模块的一部分。

在开始本专题之前，还是建议你先学习 Web 入门，尤其当你是 Web 开发的纯新手的话。不过，CSS 基础这篇文章中涉及的大部分内容在 CSS 第一步模块中也有所涉及，而且更详细。

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

CSS 第一步

CSS（层叠样式表）用于为网页添加样式，对网页进行布局——例如，修改内容的字体、颜色、大小和间距，将内容分成多列，或添加动画和其它装饰特性。在前往掌握 CSS 基础知识（CSS 的运作方式，CSS 语法是什么样子，在 HTML 中如何使用 CSS 添加样式）的道路上，本模块是一个很好的开始。

CSS 构建块

本模块承接 CSS 第一步——这时你已经熟悉 CSS 语言及其语法，有了基本的使用经验，是时候再深入一些。在本模块中，你会学习层叠和继承、可用的选择器类型、单位、大小、为背景和边框添加样式、调试，以及其它内容。

本文的目的是，在了解诸如为文本添加样式和 CSS 布局等特定领域的知识之前，提供一个能让你编写合格 CSS 的工具集并帮助你理解基本的理论。

为文本添加样式

在学完 CSS 语言的基础知识后，下一个集中学习的 CSS 主题是为文本添加样式——用 CSS 做的最多的事之一。本文介绍了为文本添加样式的基础知识，包括：设置字体、加粗、斜体、行间距、字间距、阴影和其它文本特性。在本模块中，还会学习的内容有：在页面中应用自定义字体、为列表和链接添加样式。

CSS 布局

看到这儿，你已经学习过 CSS 基础知识、如何为文本添加样式、如何为放置内容的盒子添加样式并操纵它。现在，是时候学习参照视口或另一个盒子时如何将盒子放置在正确的位置。必要的前置知识已经具备，此时你可以深入 CSS 布局，学习不同的显示设置、现代的布局工具（如弹性盒、CSS 网格）、定位，以及一些你可能仍想了解的传统技术。

使用 CSS 解决常见问题提供了用于解释如何使用 CSS 解决创建网页时常遇到的问题的内容的链接。

刚开始，你主要是为 HTML 元素及其背景应用颜色，改变元素的大小、形状和位置，为元素添加和定义边框。但这并不是你唯一能做的，只要你对 CSS 的基础知识有了坚实的理解的话。学习 CSS 最棒的事情之一就是，一旦你了解了基础，即使你还不知道如何做，通常会对能做的和不能做的有一个很好的感知。

CSS 与你接触到的大多数编程语言和设计工具的运作方式有点不同。CSS 为什么以这种方式运作？在下面的视频中，对 CSS 为什么这样运作以及 CSS 为什么演变成这样做了很好的解释：

MDN 上的 CSS 文档

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