这是我参与「第四届青训营 」笔记创作活动的第二天
在参加青训营之前，我对于CSS基础了解的很少，止步于CSS的种类：外链 嵌入 内联
CSS的定义和构造
> CSS用来定义页面元素的样式 -CSS的构造
h1（选择器：标签 selector）{
设置属性 color:white(属性值)
font-size：14px;声明
}
CSS的工作流程
graph TD
Start --> 加载HTML --> 解析HTML --> 加载CSS --> 解析CSS -->添加样式到DOM节点
CSS选择器
| 通配选择器（*） | id选择器（#logo） | 标签选择器 | 类选择器 | 属性选择器 |
|---|---|---|---|---|
| 给所有的设置样式 | id要唯一 | ^=#: 以#开头的可以匹配，$=.jpg:以.jpg结尾的可以匹配 |
伪类
状态性伪类：对于不同状态的标签进行样式
link：默认状态下visited：访问过hover：鼠标移到的状态active：鼠标按下后foucs:输入框输入文字的状态
**结构伪类**：在DOM节点在DOM树中所在的位置选中
颜色
RGB
#00（R）00（G）00（B）16进制的255 ，rgb（0,0,0）0-255黑色
HSL
H:色相 S: 饱和度 L:亮度 alpha:透明度
字体
font-family：设置多个字体，从前到后
通用字体族：
- Serif衬线体
- Sans-Serif无衬线体
- Cursive手写体
- Fantasy
- Monospace等宽字体
font-size：
- 关键字：small、medium、large
- 长度：px、em
- 百分数：相对于父元素字体大小
font-style：斜体 normal正常，italic斜体
font-weight：字重，字的粗细（100-900）normal：400，bold粗体：700 line-height：行高深入CSS
选择器优先级
特异度：越特殊的优先级越高，看#id .伪类 E标签 的多少
继承某些属性会自动继承其父元素的计算值，除非显示指定一个值 有些不可继承的属性，用显示继承：inherit
初始值：在CSS中，每个属性都有一个初始值- background-color的初始值为transparent
- margin-left的初始值为0
- 可以使用initial关键字显式重置为初始值
- background-color: initial
布局layout
确定内容的大小和位置的算法，依据元素、容器、兄弟节点和内容等信息来计算
