学习使用 CSS 为 HTML 添加样式

层叠样式表——或 CSS——是你在学完 HTML 之后应该学习的第一门技术。HTML 用于为你的内容定义结构和语义,CSS 用于为内容提供样式和对内容进行布局。例如,你可以使用 CSS 更改内容的字体、颜色、大小和间距,将内容分成多列,或添加动画和其它装饰特性。

前提

在尝试 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 解决常见问题提供了用于解释如何使用 CSS 解决创建网页时常遇到的问题的内容的链接。

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

“CSS 真奇怪”

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

参见

MDN 上的 CSS 文档

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