1 课程内容概括

本节课主要介绍了前端的技术栈的一个基本内容：CSS。

2 CSS简介

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

3 在页面中使用CSS

要在页面中使用CSS，可以使用外链、嵌入、内联三种方式。

4 CSS的工作方式

加载HTML后会解析HTML，随后会创建DOM树，而在解析HTML时会同时加载CSS，解析CSS后会添加样式到DOM节点。

5 CSS选择器

Selector，选择器的作用是找出页面中的元素，便于为它们设置样式。可以通过标签名、类名或ID选择，也可以按照属性选择，还可以按照DOM树中的位置选择。

6 伪类

伪类是不基于标签和属性定位元素的，可分为状态伪类和结构性伪类。

7 组合

可分为直接组合、后代组合、亲子组合、兄弟选择器、相邻选择器。

8 特异度

特异度是在多条规则存在的情况下，判断哪条规则生效的。

9 布局

布局可以确定内容的大小和位置，根据元素、容器、兄弟节点、内容等信息计算。布局技术：常规流 - 行级、块级、表格布局、FlexBox、Grid布局浮动绝对定位

10 CSS盒模型

参见：developer.mozilla.org/zh-CN/docs/…

11 其它、总结与思考

本节课还并针对常见的CSS属性做了介绍。比如font-size、颜色等，此外，还介绍了在浏览器中利用检查功能或使用快捷键完成CSS调试的方法。由于课程本身并不能涵盖全部的CSS标签，通过MDN等文档系统学习是更好的选择。学习时应该注意边学边用，以巩固知识，降低遗忘概率，达到更好的学习效果。CSS是前端的三种基础知识之一，学习CSS是后续更深入学习前端知识的基础，因此本节课的内容也比较重要。在学习CSS时，也应该与HTML一样，注意在实践中的补充。

理解CSS | 青训营笔记