这是我参与「第五届青训营 」笔记创作活动的第2天。
一、本堂课重点内容：
- CSS 代码构成
- CSS 使用方法
- CSS 流程之选择器组、文本渲染
- 调试 CSS
- CSS 选择器的特异度
- CSS 继承
- CSS 求值过程解析
- CSS 布局方式及相关技术
- CSS 盒模型
二、详细知识点介绍：
- CSS 代码构成
通常由选择器、属性值、声明构成。形如：
h1{
color:white;
font-size:14px;
}
- CSS 使用方法
由外链、嵌入、内联等方式在页面中使用。CSS是通过浏览器在解析HTML的同时加载解析CSS然后添加样式到DOM节点中来展示页面的。
- CSS 流程之选择器组、文本渲染
选择器可以通过找出页面中的元素来直接设置样式，也可以按照标签名、类名、id、属性或者DOM树中的位置来选择元素。
id选择器的样式是在前面加#，且这个id的值应该是唯一的。
类选择器即class，为最常规的用法。
属性选择器，应该给这个属性用[]包裹来选中。
CSS可以设置文本的RGB颜色、HSL颜色、alpha透明度、font-family字体等很多样式。
- 调试 CSS
右键点击页面，选择检查或使用快捷键Ctrl+Shift+I（Windows），Cmd+Opt+I（Mac）。
- CSS 选择器的特异度
id选择器优先级最高，其次是类，然后是标签。
- CSS 继承
某些属性会自动继承其父元素的计算值，除非显式指定一个值。
此外，可以使用显示继承的方式直接继承。形如：
* {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
.some-widget {
box-sizing: content-box;
}
在CSS中，每个属性都有一个初始值，可以使用initial关键字显示重置为初始值。
- CSS 求值过程解析
DOM树和样式规则共同进入filtering，filtering对应用到该页面的规则用选择器匹配、属性有效、符合当前media等条件进行筛选。
因为一个元素的某属性可能有0到多个声明值，随后就通过cascading按照来源、!important、选择器特异性、书写顺序等选出一个优先级最高的属性值。
在层叠过程中，使用赢得优先级比赛的那个值。只有当层叠值为空时，就使用继承或初始值，这里要经过defaulting。
在经过cascading和defaulting之后，指定值能够保证一定不为空，就通过resolving将一些相对值或者关键字转化为绝对值，相对路径转为绝对路径。
然后得到计算值，通过formatting将计算值进一步转换，将关键字、百分比等都转为绝对值，得到使用值。
通过constraining将小数像素值转为整数，即可得到实际值。
- CSS 布局方式及相关技术
布局（Layout）用于确定内容的大小和位置的算法。要依据元素、容器、兄弟节点和内容等信息来计算。
较常规的布局相关技术有行级、块级、表格布局、FlexBox、Grid布局、浮动和绝对定位。
较常用属性有width、height、padding、border、margin等。
- CSS 盒模型
在课程中主要说了块级和行级。
块级不能和其他盒子并列排放、适用所有的盒模型属性。
而行级和其他行级盒子一起放在一行或拆开成多行，盒模型中的width、height不适应。
三、实践练习例子：
一个红色的导航栏。
<nav>
<a href="#">首页</a>
<a href="#">导航1</a>
<a href="#">导航2</a>
</nav>
<main>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
</main>
<a href="#" class="go-top">返回顶部</ a>
<style>
nav {
position: fixed;
line-height: 3;
background: rgba(0，0，0，0.3);
width: 100%;
}
四、课后个人总结：
- CSS需要掌握的元素较多，需要较多的练习时间。
- CSS和HTML是紧密结合的，要有一种全局思维，才能写出美观的界面。
- CSS就是指Cascading Style Sheets（层叠样式表），样式定义如何显示HTML元素，样式通常存储在样式表中，把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题，外部样式表可以极大提高工作效率，外部样式表通常存储在CSS 文件中，多个样式定义可层叠为一个。
五、引用参考：
