这是我参与「第四届青训营」笔记创作活动的的第2天
一、课前准备
二、CSS是什么？
- Cascading Style Sheets
- 用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
三、CSS是如何工作的
graph LR
加载HTML --> 解析HTML --> 创建DOM树 --> 展示页面
解析HTML --> 加载CSS --> 解析CSS --> 添加样式到DOM节点 -->创建DOM树
四、选择器Selector
- 找出页面中的元素，以便给他们设置样式
- 使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
五、伪类（pseudo-classes）
- 不基于标签和属性定位元素
- 几种伪类
- 状态伪类
- 结构性伪类
六、组合（Combinators）
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | AB | 满足A同时满足B | input：focus |
| 后代组合 | A B | 选中B，如果它是A的子孙 | nav a |
| 亲子组合 | A > B | 选中B，如果它是A的子元素 | section > p |
| 兄弟选择器 | A ~ B | 选中B，如果它在A后且和A同级 | h2 ~ p |
| 相邻选择器 | A + B | 选中B，如果它紧跟在A后面 | h2 + p |
七、颜色 - HSL
Hue：色相（H）是色彩的基本属性，如红色、黄色等；取值范围是0-360。 Saturation：饱和度（S）是指色彩的鲜艳程度，越高越鲜艳；取值范围是0-100%。 Lightness：亮度（L）指颜色的明亮程度；越高颜色越亮；取值范围是0-100%。
八、font-family使用建议
- 字体列表最后写上通用字体族
- 英文字体放在中文字体前面
九、font-size
- 关键字
- small、medium、large
- 长度
- px、em
- 百分数
- 相对于父元素字体大小
十、调试CSS
- 右键点击页面，选择「检查」
- 使用快捷键
- Ctrl+Shift+I（Windows）
- Cmd+Opt+I（Mac）
十一、继承
某些属性会自动继承其父元素的计算值，除非显示指定一个值。
十二、初始值
- CSS中，每个属性都有一个初始值
- background-color的初始值为transparent
- margin-left的初始值为0
- 可以使用initial关键字显示重置为初始值
- background-color：initial
十三、布局（Layout）是什么？
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
十四、学习CSS的几点建议
- 充分利用MDN和M3C CSS规范
- 保持好奇心，善用览器的开发者工具
- 持续学习，CSS新特性还在不断出现
十五、课后小结
从昨天到今天的内容很好的衔接了起来，老师讲的很详细，目前为止明白了怎样将CSS运用到HTML中，使得展示出来的页面更美观，能够按照我们心里所想的样式，只是感觉今天的课程还是蛮有难度的，知识点太多，有的不好理解，坚持下去！
