理解CSS（一） | 青训营笔记这是我参与「第四届青训营」笔记创作活动的第2天。本次笔记的内容是CSS第一部分。本次

这是我参与「第四届青训营」笔记创作活动的第2天。 本次笔记的内容是CSS第一部分。

CSS的内容繁杂，细节众多，在过去的学习中，我一再感到缺乏清晰的脉络，难以全面地掌握。本次课程对CSS相关内容进行了系统的梳理和讲解。

一、了解CSS

CSS指Cascading Style Sheets，即层叠样式表。CSS可以用来定义页面元素的样式，包括设置字体、颜色、位置、大小、添加动画效果等。

当浏览器加载html文档并完成解析之后，浏览器一方面利用解析结果构建DOM树，另一方面加载CSS并解析，将解析所得的样式添加到DOM树的节点，由此构成的DOM树用于进一步渲染展示页面。

选择器用于找出页面中的元素以为其设置样式。选择元素的方式有多种，有按照标签名、类名或id进行选择，按照属性进行选择，按照DOM树中位置进行选择。除了基本的通配选择器、标签选择器、id选择器、类选择器、属性选择器外，还有伪类选择器、组合选择器、选择器组。

颜色编码的方式有很多，最常用的两种是RGB和HSL。许多颜色有单独的名称，以便记忆和沟通。除此之外，通过设置alpha值可以控制透明度。

课程介绍了若干种类的通用字体族与它们的适用情况。介绍了web font的使用方法和建议的罗列顺序（英文字体在前，中文字体在后）。除此之外，用例介绍了字体属性的控制效果。

CSS的调试，可以利用浏览器的「检查」功能，在Windows下快捷键为Ctrl+Shift+I，在Mac下为Cmd+Opt+I。