这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
什么是CSS
CSS 全称为 Cascading Style Sheets 即层叠样式表 CSS主要包含了:
- 选择器 Selector
- 属性 Property
- 属性的值 Value
- 声明 Declaration (属性和属性值对的集合)
CSS的三种使用方式
- 外链 在HTML的外部链接中(开发中常用)
- 嵌入 在HTML中使用
<style>标签块控制样式(示例中常见) - 内联 通过HTML标签的属性style控制样式(组件中常用)
CSS是如何工作的
工作流程在课程7分04秒，原图在MDN上也有
CSS特异度与选择器优先级
特异度包括了选择器优先级，在HTML渲染过程中，特异度觉定一个CSS的最终样式
CSS的继承
一般来说与文字相关的属性是可继承的，与盒模型相关的属性是不可继承的(可以显式使用属性继承)
CSS盒模型
盒模型内的布局规则有：
- 行级布局
- 块级布局(注意这里的块布局和块元素不是一回事)
第一日总结
在CSS入门课程的学习过程中比较有触动的是讲述从DOM树和样式规则到最终在页面内计算像素级样式的流程图。讲授人非常耐心的讲述了一整个流程并给出了例子，这使我对HTML解析流程有了一个更加深刻的认识(看上去整个浏览器工作原理快要串起来了，这是好事)。课程内其他内容安排诸如flex和grid布局与在youtube上先期跟过的视频相似，大抵是flex和grid在开发中的常用内容就这么多，这也是一件好事情。我发现项目一的文档还在迭代，要是不会的越来越多还是比较打击自信心的。
有意思的是我发现了一个小bug。当在学习视频中开两倍速时，如果网络状态不佳并且播放完视频预加载内容在页面刷新后会显示你完成了整个视频学习，同时视频时间轴的最大时间会变为刷新前学完的视频时长。
