这是我参与[第五届青训营]伴学笔记创作活动的第2天，和大家分享自己学习《理解CSS》章节课程的收获。
一、本堂课重点内容
- CSS代码构成
- CSS使用方法
- CSS流程之选择器组、文本渲染
- 调试CSS
二、详细知识点介绍
1.CSS是什么？
CSS用来定义页面元素的样式，包括设置字体和颜色、设置位置和大小、添加动画效果等。CSS基本语句的格式如下：
- 选择器：选中页面中的元素，便于给元素定义样式。
-
- 多种方式选择元素：标签名、类名、id、属性、DOM树中的位置
-
- 选择器的类型：通配选择器（匹配所有）、标签选择器（通过标签选择样式）、id选择器（id唯一）、类选择器、属性选择器
- 属性：选中的元素的某些属性特征。
- 声明：属性+分号+属性值+冒号。
- 规则：上图中的选择器+大括号。CSS由一条条规则组成。
2.在页面中使用CSS的三种方法
- 外链：CSS单独写在另一个文件中，用link标签引入到页面中（推荐理由：内容与样式分离）
- 嵌入： 把CSS嵌入到style标签中
- 内联：直接把CSS写到当前元素的style属性中
3.CSS是如何工作的
4.伪类
伪类不基于标签和属性定位元素。存在几种伪类：状态伪类、结构性伪类。
- 状态伪类：当元素与用户交互处于不同状态下设置的伪类，例如链接的hover、active、visited等伪类。
- 结构伪类：根据元素在父级结点中的相对位置选中，例如first-child、last-child等。
5.选择器组合类型
- 直接组合AB：满足A同时满足B。例如：
input:focus - 后代组合A B：选中B，如果它是A的子孙。例如：
nav a - 亲子组合A > B:选中B，如果它是A的子元素。例如：
section > p - 兄弟选择器A ~ B:选中B，如果它在A后且和A同级。例如：
h2 ~ p - 相邻选择器A + B:选中B，如果它紧跟在A后面。例如：
h2 + p
6.颜色表示方法
-
RGB模型
-
HSL模型以及例子
-
直接指定颜色的关键字
-
透明度
7.字体
三、课后个人总结
察觉到的知识盲区：伪类、颜色表示方法
