这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

1 CSS是什么

层叠样式表(Cascading Style Sheets)是一种用来表现HTML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

2 在页面中使用CSS有三种方式

外链： <link type="text/css" rel="stylesheet" href="css文件的路径" />

嵌入： 选择器 { 样式名 : 样式值; 样式名 : 样式值; ..... }

内联： <标签 style="样式名:样式值;样式名:样式值;样式名:样式值;..."></标签>

选择器的作用：

1.找出页面中的元素，以便给他们设置样式（name,id）

2.使用多种方式去选择元素

可以按照标签名，类名或者ID，也可以按照属性，或者按照DOM树中的位置。

这三种方式使用方式不相同，但尽量还是将html和css分开，使用外链的方式，单独把样式写在专门的css文件中。使用嵌入方式的话，会导致代码行数变长，不太方便。如果内联方式，会导致代码非常混乱，混入了很多样式，而且只能控制该标签内的样式，不能实现批量处理。

3 CSS的工作方式

当浏览器展示一个文件的时候，它必须兼顾文件的内容和文件的样式信息。

首先浏览器载入HTML文件，将HTML文件转化成一个DOM（Document Object Model），然后，浏览器会拉取该HTML相关的大部分资源，比如嵌入到页面的图片、视频和CSS样式。在浏览器拉取到CSS之后会进行解析，根据选择器的不同类型把他们分到不同的地方当中。浏览器基于它找到的不同的选择器，将不同的规则或者说是不同方式应用在对应的DOM的节点中，并添加节点依赖的样式，这个步骤称为渲染树。应用于渲染树之后，渲染树会依照应该出现的结构进行布局。

4 总结

今天讲解的内容比较多，主要就是对上一节课学到的html，再进一步上加入样式，使页面呈现更多的效果。