这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
在此之前，有过一部分的CSS基础，该CSS课程还是有许多干货的，新知识用★来标记，由于会布局相关的知识所以没有详细列出。
新知识（收获）
CSS求值过程 - 8
1.什么是CSS？
CSS全称（Cascading Style Sheets）,它是用来定义页面元素的样式。
- 设置字体的颜色
- 设置位置和大小
- 添加动画效果
2.如何导入CSS样式？
有三种方式：外链、嵌入、内联。
- 外链:
<link re="stylesheet" href="/assets/style.css> - 嵌入：
<style> li{margin:0; list-style:none;} <style> - 内联：
<p style="margin:1em 0">Content</p>
3.CSS是如何工作的呢？
4.CSS选择器
4.1-选择器的作用
找出页面中的元素，以便给他们设置样式。同时我们可以使用多种方式选择元素如：
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
4.2-选择器种类
通配选择器、id选择器、标签选择器、类选择器、属性选择器和伪类选择器
4.3-CSS选择器优先级
important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认， 同一级别css引入方式不同，优先级不同 如：内联(行内)样式 > 内部样式表 > 外部样式表 > 导入样式(@import) 优先级的算法。
5.CSS颜色用法
5.1-颜色RGB用法
RGB（红绿蓝），即颜色是由红绿蓝混合搭配出现的颜色，取值范围（0-255）。 用法：rgb（红色、绿色、蓝色）。 复制代码
5.2-颜色HSL用法
HSL（Hue（色彩）、Saturation（饱和度）、Lightness（亮度）），即元素又这三种组成。
色彩取值范围（0-360）、饱和度和亮度取值范围（0-100%）
用法：hsl（色彩、饱和度、亮度）。
5.3-颜色饱和度
饱和度（alpha），即用来选择是否遮盖所做样式，取值范围（0-1）。
搭配rgb或hsl来使用，如：rgba（255,0,0,1）或hsla（0,100%，50%，1）等。
6.字体样式及用法
6.1-字体样式（font-family）
-
Serif衬线体：Georgia、宋体 -
Sans-Serif无衬线体：Arial、Helvetica、黑体、微软雅黑 -
Cursive手写体：Caflisch、Script、楷体 -
Fantasy：ComicSansMS、Papyrus -
Monospace等宽字体：Consolas、Courier、中文字体
注意事项：字体列表最后写上通用字体族，且英文字体放在中文字体前。
6.2-字体大小（font-size）
-
关键字：small、medium、large -
长度：px、em -
百分数：相对于父元素字体大小
6.3-字体用法
font：style weight size/height family，如：
font：bold 14px Helbetica，serif
7.CSS属性继承
继承，顾名思义就是子元素会继承父元素中定义的样式，某些属性会自动继承其父元素的计算值，除非显式指定一个值。而显式指定一个值的方式我们称为显式继承。
7.1.显示继承
* {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
.some-widget {
box-sizing: content-box;
}
7.2.CSS属性初始值
CSS中，每个属性都有一个初始值如：
- backgroun-color的初始值为transparent
- margin-left的初始值为0
我们也可以使用intial关键字显式重置为初始值如：
- background-color：intial
8.CSS求值过程★
CSS求值全过程：cdpn.io/webzhao/deb…
强调：计算值和使用值的区别
计算值：浏览器拿到HTML和CSS可以立马计算出来的值，比如父元素的字体大小是20px，子元素的字体大小是1.2em可以立马算出来。
使用值：浏览器拿到HTML和CSS无法计算出来的值，比如body宽度百分比，单纯靠HTML和CSS是无法计算出来的，要拿到实际渲染的环境中拿到当前浏览器宽度才能决定
9.CSS布局
10.个人总结
学完此CSS课程的收获还是挺大的，尤其是CSS求值过程那一块，接下来我还要继续跟着青训营学习后续知识来查缺补漏。
