学习使用 CSS 设置 HTML 样式

¥Prerequisites

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

¥You should learn the basics of HTML before attempting any CSS. We recommend that you work through our Introduction to HTML module first.

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

¥Once you understand the fundamentals of HTML, we recommend that you learn further HTML and CSS at the same time, moving back and forth between the two topics. This is because HTML is far more interesting and much more fun to learn when you apply CSS, and you can't learn CSS without knowing HTML.

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

¥Before starting this topic, you should also be familiar with using computers and using the web passively (i.e., just looking at it, consuming the content). You should have a basic work environment set up, as detailed in Installing basic software, and understand how to create and manage files, as detailed in Dealing with files — both of which are parts of our Getting started with the web complete beginner's module.

还建议你在继续本主题之前完成 开始使用网络，特别是如果你对 Web 开发完全陌生。然而，CSS 基础知识 文章中介绍的大部分内容也包含在我们的 CSS 第一步 模块中，尽管更详细。

¥It is also recommended that you work through Getting started with the web before proceeding with this topic, especially if you are completely new to web development. However, much of what is covered in its CSS basics article is also covered in our CSS first steps module, albeit in a lot more detail.

¥Modules

本主题包含以下模块，并按照建议的顺序进行操作。你应该从第一个开始。

¥This topic contains the following modules, in a suggested order for working through them. You should start with the first one.

CSS 第一步

CSS（层叠样式表）用于设置网页的样式和布局 - 例如，更改内容的字体、颜色、大小和间距，将其拆分为多列，或添加动画和其他装饰功能。本模块为你掌握 CSS 之路提供了一个温和的开端，介绍了 CSS 的工作原理、语法是什么样子以及如何开始使用它向 HTML 添加样式的基础知识。

CSS 构建块

本模块从 CSS 第一步 结束的地方继续进行 - 现在你已经熟悉了该语言及其语法，并获得了一些使用它的基本经验，是时候更深入地研究了。该模块着眼于级联和继承、我们可用的所有选择器类型、单位、大小、背景和边框样式、调试等等。

这里的目的是为你提供一个用于编写合格 CSS 的工具包，并帮助你在继续学习 文本样式 和 CSS 布局 等更具体的学科之前理解所有基本理论。

CSS 样式文本

介绍了 CSS 语言的基础知识后，你需要关注的下一个 CSS 主题是样式文本 — 这是你将使用 CSS 执行的最常见操作之一。在这里，我们了解文本样式的基础知识，包括设置字体、粗体、斜体、行距和字母间距、阴影和其他文本功能。我们通过将自定义字体应用到你的页面以及样式列表和链接来完善该模块。

CSS 布局

至此，我们已经了解了 CSS 基础知识、如何设置文本样式以及如何设置内容所在框的样式和操作。现在是时候看看如何将盒子放置在相对于视口以及彼此正确的位置了。我们已经介绍了必要的先决条件，因此我们现在可以深入研究 CSS 布局，查看不同的显示设置、Flexbox、CSS 网格和定位等现代布局工具，以及你可能仍然想了解的一些遗留技术。

¥Solving common CSS problems

使用 CSS 解决常见问题 提供了一些内容的链接，解释了如何使用 CSS 来解决创建网页时非常常见的问题。

¥Use CSS to solve common problems provides links to sections of content explaining how to use CSS to solve very common problems when creating a web page.

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

¥From the beginning, you'll primarily apply colors to HTML elements and their backgrounds; change the size, shape, and position of elements; and add and define borders on elements. But there's not much you can't do once you have a solid understanding of even the basics of CSS. One of the best things about learning CSS is that once you know the fundamentals, usually you have a pretty good feel for what can and can't be done, even if you don't know how to do it yet!

¥"CSS is weird"

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

¥CSS works a bit differently from most programming languages and design tools you'll come across. Why does it work the way it does? In the following video, Miriam Suzanne provides a useful explanation of why CSS works as it does, and why it has evolved as it has:

¥See also

MDN 上的 CSS

MDN 上 CSS 文档的主要入口点，你可以在其中找到 CSS 语言所有功能的详细参考文档。想知道属性的所有价值吗？这是一个值得一去的好地方。