这是我参与「第四届青训营 」笔记创作活动的第5天
本堂课的重点
简单的介绍了css的级联，继承和一些单位值等
1.级联
在相同权重的情况下，浏览器会比较代码的顺序，后出现的样式回覆盖原有的样式，原来没有的会合并。
1.！important声明
在该声明下，这个样式无视级联和权重，永久优先
不推荐滥用important。
2、特性值
浏览器会计算选择器的权重（将各个选择器的价格加起来，比较）
行内样式（1000）
id选择器（100）
类选择器、属性选择器、伪类选择器（10）
标签选择器、伪元素选择器（1）
继承
CSS中有些规则将会默认被子元素继承，有些则不会。比如font系列属性，文本系列属性、列表系列属性， cursor。
CSS提供了三个特殊的值用来处理继承inherits
- inherit 继承父元素的样式
- initial 不继承。应用浏览器的默认样式
- unset 不设定，表现该规则本来特性，即如果该规则具有继承属性则继承，否则不继承
单位值
1.颜色
关键字
十六进制编码
RGB CSS自带的颜色函数 rgb(186, 72, 72);
RGBA 设置了不透明度
背景透明，内容不透明 background-color: rgb(186, 72, 72,0.3);
背景和内容都透明：background-color: rgb(186, 72, 72);opacity:0.3;
2.长度和尺寸
1.px是一个固定值单位
2.em是一个相对值单位，相对父元素，会逐级向上寻找，会继承父元素的字体大小
3.rem是一个相对值单位，相对于根元素
4.%是根据父级元素的宽度决定的
3.文本样式
网页默认：宋体，16px
- color 文本颜色
- font-family 为文字指定特殊的字体/一个字体栈（看有哪个），浏览器只会使用浏览器可以访问到的字体
如果提供的网络字体没有，用户没有，我们可以设置网络字体，让用户使用外部字体。
字体栈：先以第一个为准，若没有往后退
p {font-family: "Microsoft YaHei",arial,sans-serif;}
WebFont
当用户电脑中没有安装对应字体的时候， webFont可以加载网络字体进行显示。
@font-face {
font-family: '迷你简蝶语';
src: url('<http://121.4.83.32/mp3/jdy.ttf>');
}
p{
font-family: '迷你简蝶语';
font-size: 30px;
}
font-family：可以使用英文，在本地是没有用的，需要将网页发布，才会生效。
4.字体图标
在开发网站的时候需要各种各样的小图标，这些图标如果要求美工绘制可能比较麻烦，那么我们可以直接使用开源的字体图标库，这些字体图标库使用webFont原理，我们加载一个图标就好像加载一个字体一样简单，通过控制字体大小，字体颜色来控制图标的大小与颜色。
在项目中，会使用字体图标，在以前会使用字体样式的图标，为了兼容性和用户体验，更推荐可以使用字体图标的方式，字体图标只是文字，加载速度更快没有体积。
<link rel="stylesheet" href="./style/font-awesome.min.css">
<i class="fa fa-id-card"></i>
