这是我参与「第五届青训营 」笔记创作活动的第2天。活动详情：# 伴学笔记创作活动来袭 ｜ 第五届字节跳动青训营
CSS 作为前端技术栈中不可或缺的一部分内容，对页面样式呈现起到了直接作用。本节课通过对 CSS 代码构成、工作流程及使用方式的讲解，建立对 CSS 的全面认知。
今日课程要点：
- CSS 代码构成
- CSS 使用方法
- CSS 工作方式
- 调试 CSS:使用浏览器调试工具
什么是CSS？
Cascading Style Sheets，层叠样式表，用于定义页面元素的样式，包括但不限于字体、颜色、位置。大小、动画效果等。 CSS代码构成如下：
h1//选择器
{ color:white;
font-size:14px;//（属性：属性值）=>声明 不同的声明之间用分号间隔
}
//一条规则
在页面中使用CSS的方式有三种：
- 外链：通过link标签引入（实现内容与样式的分离）。
- 嵌入：将css代码放入style标签内，存储在html页面。
- 内联：在需要修改样式的标签内部通过style="( 属性：属性值；)"的形式为该标签设置css样式。
选择器Selector:通配符选择器（*）、标签选择器、id选择器id、类选择器class、属性选择器（为具有同一种属性的元素设置样式，可选择特定属性值的元素为其设置样式，例如 a[href^="#"]选中以#开头的元素；a[href$=".jpg"]选中以.jpg结尾的元素）、伪类选择器（状态性伪类：当元素处在某种状态时触发，包括visited、hover、active等；结构伪类：根据元素在DOM树中所处的位置进行选择，包括first—child、last—child;）
可对于多个选择器进行组合选择。
| 组合方式 | 示例 | 描述 |
|---|---|---|
| 直接组合 | AB | 满足A的同时满足B |
| 后代组合 | A B | 满足B为A的子孙 |
| 亲子组合 | A>B | 满足B为A的直接子元素 |
| 兄弟选择器 | A~B | 满足A与B同级且B在A后 |
| 相邻选择器 | A+B | 选择紧跟在A之后的B |
颜色表示方式：HSL 色相Hue、饱和度Saturation、亮度Lightness
设置字体：font-family：可设置多个属性。
- 通用字体族：Serif衬线体、Sans-Serif无衬线体、Cursive手写体、Fansaty、monospace等宽字体。
- font-size:设置字体大小。
- font-width：字重，设置字体的粗细，取值为100~900
- line-height：设置行高
white-space：设置内容的展示方式。
