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

本次课程的知识点为：

1. CSS的作用
2. CSS选择器
3. CSS的继承
4. CSS的常用布局

1.CSS的作用

我们常说的CSS即Cascading-Style-Sheets（层叠样式表）
它是用来定义页面元素的样式的，比如我们看到一个网页中一个元素的颜色大小以及位置等等
我们看到很多丝滑流畅的网站设计都离不开CSS的功劳
其中CSS的渲染流程可抽象为一下几个步骤：

2.CSS选择器

CSS的选择器可以找出页面中的元素，以便给他们设置样式
幸运的是我们有丰富的选择器可以使用： 其中常规的有

• 通配选择器
• 标签选择器
• ID选择器
• 类选择器

还有

其中关于ID选择器和类选择器中，需要注意的是：
ID与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。

CSS优先级

当多个规则都作用到了同一个HTML元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义。

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。 作为style属性写在元素内的样式

• id选择器
• 类选择器
• 标签选择器
• 通配符选择器

总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

（若是遇到优先级相同的情况下，则写在后边的代码效果会覆盖写在前边的代码效果）

3.CSS的继承

指特定的CSS属性会向下传递到子孙元素，除非后代元素有制定的值。

4.CSS的常用布局

• 文档流布局
• 浮动布局
• 定位布局
• flex布局