4.2.2.2 CSS 基础

很快就到我们 CSS 的基础了。CSS (层叠样式表) 用于给文档添加样式。通过 HTML 我们拥有了一些语义化的文本，比如我们知道一片文章的标题和段落，段落中又有很多需要加粗或者斜体的文本。那么到底如何处理这些文本呢？我们就需要给浏览器定下渲染的规则。这样的规则就用 CSS 语言来描述。

我们在这里只节选部分内容，因为在现代前端技术栈中，直接编写 CSS 的情况并不太多，我这里只挑选一些常用的 CSS 来讲解。如果你对 CSS 的细节感兴趣，可以完整阅读 MDN 的 CSS 部分 的内容。下面的内容可以认为是 MDN 的 CSS 部分的一个导读，专门节选出了一个比较完整而且常用的子集。

入门

请阅读以下教程，顺便完成教程中给定的任务:

• MDN: 什么是 CSS?
• MDN: 让我们开始 CSS 的学习之旅
• MDN: CSS 的组成
• MDN: CSS 如何运行

完成以上教程后，可以尝试以下任务，测试是否掌握：

MDN: 运用你的新知识

层叠，盒模型与字体

在了解了基础的用法之后，我们就会进一步讲更精细的控制方法。层叠控制了互相冲突的 CSS 样式的优先级，确定最终渲染的应该是什么样式。盒模型提供了 CSS 操作元素各种尺寸的方式。字体设置确定了 CSS 如何渲染文本。

阅读以下教程并学习：

• MDN: 层叠、优先级与继承
• MDN: 盒模型
• MDN: 基本文本和字体样式

定位与布局

定位元素和布局也是常用的点：

• MDN: 介绍 CSS 布局

小结

这些教程虽然只占了 MDN 的 CSS 教程的一小部分 (大概 1/5)，却基本涵盖了常用的 CSS 内容。对于现代前端这种很少手写 CSS 而是大量依赖样式库来快速开发的场合，掌握这些内容已经足够游刃有余地驾驭样式库提供的各种组件了。