什么是CSS？
层叠样式表（Cascading Style Sheets）： 用于定义页面的元素样式，如：设置字体和颜色，设置位置和大小，添加动画效果等； 三种CSS应用方式：
①内联式（Inline）：写于标签内利用style 或在标签中使用 onclick 等事件属性添加样式；
②内部样式表（Internal Stylesheet）：在 HTML 的头部利用style标签内定义 CSS 样式；
③外部样式表（External Stylesheet）：将 CSS 样式代码保存到一个独立的 .css 文件中，并在 HTML 头部标签link引入，较为常用。
CSS是如何工作的？
graph LR
加载Html -->解析Html -->创建DOm树 & 加载CSS
加载CSS-->解析CSS-->添加样式到DOM节点-->创建DOm树-->展示页面
CSS中的选择器
选择器的作用：找出页面中的元素并给他们设置样式；可以按照标签、类名、id、属性，甚至DOM树中的位置选择元素。
伪类： 常见的有状态伪类和结构伪类
状态伪类：
元素处于某种状态下被选择，为某种状态下定义样式，比如
a:link{}默认
a:visited{}访问过
a:hover{}鼠标移动到标签上
a:active{}鼠标点击时
:focus(输入框输入状态){}
结构伪类：
根据dom节点位置决定是否选中，例如：
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<style>
li:first-child{}
——选择第一行
li:last-child{}
——选择最后一行
</style>
条件选择时的组合使用
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | AB | 同时满足AB | input:focus |
| 后代组合 | A B | 选中B，如果B是A的子孙 | nav a |
| 亲子组合 | A>B | 选中B，如果B是A的子元素 | section>p |
| 兄弟选择器 | A~B | 选中B，如果它在A后且跟A同级 | h2~p |
| 相邻选择器 | A+B | 选中B，如果它紧跟在A后 | h2+p |
CSS中的颜色
RGB表示法：红绿蓝三原色，最大值为255；
HSL表示法：色相，饱和度，亮度；色相范围（0360），饱和度范围（0100%），亮度范围（0~100%）
alpha透明度：表示透明度
字体相关
font-family设置多种字体，供不同设备适配
通用字体族：Serif衬线体，Sans-Serif无衬线体，Cursive手写体，Fantasy，Monospace等宽字体
font-size
关键字：small、medium、large
长度：px、em
百分数：相对于父元素字体大小
附：中文字体比较大，要进行裁切（裁出所需），减小体积
Html中对于空白符处理
normal：省略多个空格
nowarap：不换行
pre：保留所有的
pre-wrap：行内显示不下时自动换行，保留空格
pre-line：合并空格，保留换行
