这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
课程重点
- CSS 代码构成
- CSS 使用方法
- CSS 流程之选择器组、文本渲染
- 调试 CSS
CSS是什么？
用来定义页面元素的样式 eg：字体，颜色，动画等
在HTML中使用CSS的常用有3种办法
- 外链 CSS单独做成文件，通过link标签引入（推荐）
- 嵌入 把样式的代码写入HTML
- 内联 把属性写在style属性里
选择器
Selector
- 按标签名、类名、id
- 按照属性
- 按照在DOM树中的位置
通配选择器
'*'匹配所有
标签选择器
id选择器
通过id的属性给内容设置样式（且id应该唯一） eg：这里的logo
类选择器
对同一类型的标签可以用 class
属性选择器
通过对属性添加[ ]设置样式
匹配某个元素的时候生效的属性
eg：
伪类
在不同状态下定义样式
eg：有无鼠标停顿，是否被访问
状态性伪类
结构性伪类
根据在DOM树中的位置判断 eg：li：frist-child li:last-child
选择器间的组合
eg：
选择器组
给多个选择器对应相同的方式
eg：对应这些标签都进行设置
怎么渲染文本
颜色
RGB模型
写法有二：
hsl模型
alpha 透明度
字体 font-family
从左至右多种字体匹配
英文字体先写先渲染
font-size
字重
line-height
white-space属性
nowrap 不换行
pre 保留空格
pre -wrap有换行保留空格
pre-line 合并空格，但保留换行
课程重点
- CSS 选择器的特异度
- CSS 继承
- CSS 求值过程解析
- CSS 布局方式及相关技术
选择器优先级问题
本质：根据特异度决定
越特殊的选择器优先级越高
id(#)>(伪)类.>标签E
继承
.bnt被.bnt primary覆盖
未覆盖的属性则继承下来
某些元素不可继承而我们希望继承使用：inherit
‘*’所有元素
box-sizing：inherit都从父系继承
html{ box-sizing：border-box； } 给html的box-sizing里所有元素设为border-box
下同 给.some-widght设为content-box
如果一直向上都没有继承到，则使用初始值，对于不可继承元素同样适用
初始值 initial
布局
布局相关技术
课程重点
- CSS 盒模型 - 行级
- CSS 盒模型 - 块级
块级盒子与其他盒子不在一行 行级可以
块级元素 eg：body，article，div，main display：block 行级元素 eg：span、em、cite display：inline
inline-block看作一张图一个整体
行级
Flex
主轴与流向相同，侧轴与主轴垂直
Grid
