这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
CSS是什么？
层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS的英文全称：Cascading Style Sheets
用来定义页面元素的样式：
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
CSS是如何工作的？
CSS是怎样工作的？总的来说，过程分以下几步：
- 处理 HTML 标记并构建 DOM 树。
- 处理 CSS 标记并构建 CSSOM 树。
- 将 DOM 与 CSSOM 合并成一个渲染树。
- 根据渲染树来布局，以计算每个节点的几何信息。
- 将各个节点绘制到屏幕上。
各类选择器
选择器Selector
- 找出页面中的元素，以便给他们设置样式
- 使用多种方式选择元素：
-
- 按照标签名、类名或id
-
- 按照属性
-
- 按照DOM树中的位置
通配选择器
- 通过‘*’
- 匹配所有
标签选择器
- 通过标签设置样式
id选择器
- 通过“#”+id名的方式设置样式
- id值在页面中唯一
类选择器
- 通过“.”+类名的方式设置样式
- class值可以不唯一
属性选择器
- 通过元素的属性或属性值来设置样式
- 用“[]”来标识
组合
- 通过类名、id或者标签名等进行组合形成组合选择器
选择器组
- 同时给多个选择器定义相同的样式
- 通过用“,”隔开
颜色
通过color来设置颜色
- rgb表示方法：rgb(112,172,124)或 #8fac87
- HSL:hsl(170,100%,50%) hsl（色相，饱和度，亮度）
- alpha 透明度
字体 font-family
- 可以指定多个字体
设置字体大小 font-size
- 关键字：small、medium、large
- 长度：px、em
- 百分数：相对于父元素字体大小
设置字体样式 font-style
- 斜体：italic
- 非斜体：normal
设置字重 （字的粗细）font-weight
- 用100到900的数字来表示
line-height
- 设置行高
- normal：默认行为
- nowrap：不换行
- pre：保留所有
- pre-wrap：一行放不下去的时候换行（保留空格）
- pre-line：合并空格保留换行
调试CSS
- 右键点击页面，选择“检查”
- 使用 快捷键：Ctrl+Shift+I （Window），Cmd+Opt+I（Mac）
深入CSS
选择器优先级
越复杂越优先
- 选择器的特异度
继承
某些属性会自动继承其父元素的计算值，除非显示指定一个值
- 文字相关可以继承
- 盒模型一般不可以继承
- 不可继承属性可以通过显示继承的方式继承父级样式（inherit）
初始值
- CSS中，每个属性都有一个初始值
-
- background-color 的初始值为transparent
-
- margin-left的初始值为0
- 可以使用initial关键字显示重置为初始值
CSS求值过程
布局（Layout）是什么？
确定内容的大小和位置的算法；依据元素、容器、兄弟节点和内容等信息来计算。
- 常规流：（文档流）行级、块级、表格布局、FlexBox、Grid布局
- 浮动
- 绝对定位
块级vs行级
课后总结
CSS 作为前端技术栈中关键一环，对页面元素及样式呈现起到了直接作用。
在了解 CSS 基本原理后，本节课进一步深入讨论，通过具体案例对于选择器的特异度展开讲解，在此基础上进一步引出 CSS 继承与布局的话题，对其定义及相关技术分别作出介绍。
最后主要围绕盒模型中行“行级”与“块级”这两种常见的布局结构展开，讲解其基本定义、各自特征、工作属性和排版规则，提供业内操作思路，强化 CSS 实战技能。
