这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天 本节课主要是让我们知道什么是CSS、CSS怎么使用，CSS是如何工作、选择器、颜色和字体如何用CSS表示
1. CSS定义
全称为Cascading Style Sheets，是用来定义页面元素的样式，比如设置字体和颜色、设置位置和大小以及添加动画效果。
举个例子：
h1 {
background: white; // 背景色是白色
color: tomato; // 字体颜色是🍅色
font-size: 18px; // 字体大小是18px
}
h1表示一个选择器，color表示一个选择器的属性，white则表示选择器的属性值，font-size: 18px表示一个声明
2. 如何使用CSS
2.1 通过link标签
<link rel="stylesheet" href="/css/style.css">
2.2 通过嵌入
<style>
#app {
background: skyblue;
}
p {
font-size: 20px;
}
</style>
2.3 内联样式
<p style="color: red; font-size: 14px;">段落</p>
3. CSS如何工作
下图是CSS的工作流程，在解析HTML的时候，遇到需要加载CSS文件，那么就去解析CSS，解析完毕，将样式添加到DOM节点中，我这里解释的比较简单，如果想知道具体的建议去搜一下相关的资料。
4. 选择器
组合(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 |
5. 颜色
- rgb
- hsl（色彩，饱和度，亮度）
6. 字体
使用建议：
- 英文字体放在中文字体前面
- 字体列表最后写上通用字体族
font-size :
-
关键字
- small medium large
-
长度
- px em
-
百分数
- 相对于父元素字体大小
