这是我参与「第四届青训营 」笔记创作活动的的第2天
一、本堂课重点内容：
本课主要介绍了选择器，颜色，字，继承，求值过程等知识点。
二、详细知识点介绍：
CSS构成
选择器{属性：属性值；（声明）}（规则）
在页面使用CSS
外链，嵌入，内联
CSS工作
graph TD
加载HTML --> 解析HTML
解析HTML --> 创建DOM树 --> 展示页面
解析HTML --> 加载CSS
加载CSS --> 解析CSS --> 创建DOM树
选择器
属性选择器
<input disabled />
[disabled]{}
<input type="password" />
input[type="password"]{}
^=：以某符号开头
$=：以某符号结尾
伪类选择器
状态的伪类
a的状态
- :link 默认
- :visited 访问过
- :hover 悬浮
- :active 鼠标按下
其他
- :focus
结构的伪类（根据DOM树的位置）
- :first-child
- :last-child
组合
| 名称 | 语法 | 说明 |
|---|---|---|
| 直接组合 | AB | 满足A和B |
| 后代组合 | A B | 选中B，如果B是A的子孙 |
| 亲子组合 | A>B | 选中B，如果B是A的子元素 |
| 兄弟选择器 | A~B | 选中B，如果B在A后，与A同级 |
| 相邻选择器 | A+B | 选中B，如果B紧邻在A后 |
颜色
rgb,hsl
- h:色相
- s:饱和度
- l:亮度
alpha：不透明度
字
字体
- font-family (英文写在中文前比较好)
- 使用web fonts
@font-face{
font-family:;
src:;
}
大小
font-size
字重
font-weight
行高
line-height
合并
font:style weight size/height family
排版
text-align：居中，靠左，靠右，分散
分散：两端对齐，中间空格拉大，对最后一行无效
间距
spacing
首行缩进
text-indent
装饰
text-decoration
空白符
white-space
- normal:默认
- nowrap：不换行
- pre:保留空格换行
- pre-wrap:保留空格，显示不下自动换行
- pre-line:保留换行
继承
有些属性会自动继承父元素的计算值
- 把元素变成可继承的：inherit
- 初始值:initial
CSS求值过程
graph
DOM树 --> filtering --声明值-->cascading--层叠值-->defaulting--指定值-->resolving--计算值-->formatting--使用值-->constraining-->实际值
样式规则 --> filtering
三、课后个人总结：
难点比较少，主要是如果选择器都记忆下来比较困难
