这是我参与「第五届青训营」伴学笔记创作活动的第二天
一、本堂课重点内容
- CSS 代码构成
- CSS 使用方法
- CSS 流程之选择器组、文本渲染
- 调试 CSS
- CSS 选择器的特异度
- CSS 继承
- CSS 求职过程解析
- CSS 布局方式相关技术
- CSS 盒模型 - 行级
- CSS 盒模型 - 块级
二、详细知识点介绍
1-4点我们基本上了解了CSS的知识，知道 CSS 是做什么的，还了解了颜色-HSL值，这个让页面更加多姿多彩，也有很多的选择余地。
4-8主要介绍了CSS的选择器和继承以及布局等。
CSS的选择器：
- 类别选择器
- 标签选择器
- ID 选择器
- 后代选择器
- 子选择器
- 伪类选择器
关于继承则有两种：显示继承和隐示继承。
CSS 的布局方式则有：grid布局和flex布局。
9-10 主要介绍了盒模型的行级和块级，以及如何使用。
三、课后个人总结
关于 CSS 的选择器的权重一定要记清楚，不然到时候显示出来的结果和自己预想的不一样，很难排查出来，选择器的用法也很重要，会了的话，对于页面的样式就很轻松很多，布局的话，我之前学的时候是没有仔细了解grid布局和flex布局，只是学了一下html+css随便做了一个页面就完事了，对于这方面我还是有点欠缺的，以后得多了解了解。
块级和行级的主要的是块级盒子会换行，行级盒子不会换行。
四、补充知识
CSS 还有特别好玩的一个地方就是它的新特征以及动画 animation 、2D转换 和 3D 转换，可以不借助JavaScript做出一些动的页面，非常炫酷，这里主要补充一下动画的常用属性：
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画 |
| animation | 所有动画属性的简写属性，除了animation-play-state属性 |
| animation-name | 规定@kayframes动画的名称。（必须的） |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒，默认是0.（必须的） |
| animation-timing-function | 规定动画的速度曲线，默认是"ease" |
| animation-delay | 规定动画合适，默认是0。 |
| animation-iteration-count | 规定动画被播放的次数，默认是1，还有infinite（循环） |
| animation-direction | 规定动画是否在下一周期逆向播放，默认是"normal"，altermate逆播放 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是"running"，还有"paused"。 |
| animation-fill-mode | 规定动画结束后状态，保持forwards回到起始backwards |
五、引用参考
补充知识我主要引用了 pink 老师的笔记，这里主要是之前上网课的时候记的笔记。
