这是我参与「第五届青训营」笔记创作活动的第1天
本堂课的重点内容：
- CSS的基本定义以及CSS的工作原理。
- CSS中伪类选择器，多个选择器作用在同一个HTML标签上渲染的优先级。
- CSS中常用来优化文字段落显示美观的属性，如font-size,font-family,spacing。
- CSS中常用来布局的属性，如display, grid,以及他们具体地布局使用方法，展现出来的效果。
具体案例
CSS定义
CSS是为HTML标记语言提供一种样式描述，定义了其中元素显示方式。
CSS工作原理
浏览器的渲染流程如下-CSS的工作原理包含在其中：
- 用户输入URL后，浏览器就会向服务器发出请求，请求URL对应的资源
- 接到服务器的响应内容后，浏览器的HTML解析器，会将HTML文件解析成一颗DOM树
- 将CSS解析成CSSOM树
- 从DOM树与CSSOM树上 ，构建出Render Tree（渲染树）
- 浏览器从渲染树上知道页面中有哪些有节点，各个节点的样式，以及各个节点的从属关系，最后计算出每个节点在屏幕中的位置后，把内容显示到屏幕上
CSS中选择器
- 通配选择器*: 页面中所有的元素都被选中
- 标签选择器：如div, h1~h6, p,
- id选择器: 如id = "ify",选中时#ify,一个页面中通常只有一个，多个不符合规范
- 类选择器: 如class= "ify", 选中时还.ify,一个页面中可以有多个class标签
- 属性选择器: 如< input type="button"/>,[type="button"] { color: red }
- 伪元素选择器: 如div::before, div::after
- 伪类选择器: 如：last-child,first-child
CSS中组合选择器
- 直接组合 AB AB同时满足 button:click
- 后代组合 A B 选中A的子孙B div p
- 亲子组合 A > B 选中A的子元素B div>p
- 兄弟选择器 A ~ B 选中与A同级的元素B div~p
- 相邻选择器 A + B 选中紧挨在A后面的元素B div+p
伪类选择器
多个选择器作用优先级
CSS优先级排序：!important > 行内样式> id选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配符选择器 > 继承选择器 > 浏览器默认属性。
当有多个级别组合的选择器时，可以采用下优先级计算方式：
每个选择器对应一个初始“四位数”：0、0、0、0
- 若是 行内选择器，加1、0、0、0
- 若是 ID选择器，加0、1、0、0
- 若是 类选择器/属性选择器/伪类选择符，加0、0、1、0
- 若是 标签选择器/伪元素选择器，加0、0、0、1
取最终的四位数从左到右比较大小
注意：
- !important优先级最高，但出现冲突时则需比较“四位数”
- 通配符选择器、子选择器、相邻选择器、兄弟选择器权重值为0
- 优先级相同时，采用就近原则，哪个样式在最后选择哪个
看看下面几道题目：
<style>
.main{
color:black
}
span{
color:red
}
</style>
<div style="color:red !important" class="main">
<span>000</span>
</div>
问：“000是什么颜色”
!important权重最大，大于class="main",可它对于span是一个继承属性，标签属性大于继承属性，000为红色。
<style>
#content .text {text-color:red;}
#content>.title {color:green;}
#content div.title {font-color:blue;}
p {font-color:yellow;}
*{color:black;}
</style>
<div id="content">
<span class="text"><p class="title">1111</p></span>
</div>
问：1111最后的颜色是什么？
- #content .text,没有text-color这个样式
- #content>.title,没直接到p元素，p是继承span
- #content div.title, .title不在div上面，没有这种写法，font-color写法错误
- p{ font-color}写法错误
- *{color:black}，通配符选择器>继承选择器>浏览器默认属性，最后颜色为black
