这是我参与「第五届青训营 」笔记创作活动的第二天
一、重点内容
- CSS 代码构成
- CSS 使用方法
- CSS 流程之选择器组、文本渲染
- 调试 CSS
- CSS 选择器的特异度
- CSS 继承
- CSS 求值过程解析
- CSS 布局方式及相关技术
- CSS 盒模型 - 行级
- CSS 盒模型 - 块级
二、详细内容
一、初步认识
1、了解CSS
2、在页面中使用CSS
1、外链
2、嵌入
3、内链
3、选择器
- 通配选择器
- 标签选择器
- id选择器
- 类选择器
- 属性选择器
4、伪类
selector:pseudo-class {
property: value;
}
5、组合
6、颜色
RGB--三原色
HSL--色相，饱和度，亮度
ALHPA--透明度
7、字体
- font-family：设置字体；
- font-style：设置字体的风格，例如倾斜、斜体等；
- font-weight：设置字体粗细；
- font-size：设置字体尺寸；
- font-variant：将小写字母转换为小型大写字母；
- font-stretch：对字体进行伸缩变形（使用较少，并且主流浏览器都不支持）；
- font：字体属性的缩写，可以在一个声明中设置多个字体属性。
二、深入认识
1、继承
inherit--显示继承
2、初始值
initial--初始值
3、求值过程
使浏览器能确定CSS的值
4、布局
- width--宽度
- height--高
- padding--内边距
- border--边框
- margin--外边距
- overflow--溢出
盒模型
-
盒模型 - 行级（从左到右）
body、article、div、main、section、h1-6、p、ul、li -
盒模型 - 块级（从上到下）
span、em、strong、cite、code -
同时存在（行级、块级）
5、Flex Box
6、对齐方式
- justify-content
- align-items
7、Gird布局(二维)
网格线
8、float
float:left--文字环绕
9、position
- static
- relative
- fixed
- absolute
- sticky
三、课后总结
1、首先了解CSS
CSS:层叠样式表,是一种样式表语言
2、CSS构成
3、在页面中使用CSS（三种方式）
嵌入、外链、内链
