css
CSS
- Cascading Style Sheet
- 层叠样式表
举例：
权重高选择器的样式覆盖权重低的，进行叠加
基本规则
1 | 选择器 { |
选择器
用于匹配HTML元素
- 有不同的匹配规则
- 多个选择是可以叠加的
分类和权重
解析方式和性能
- 解析方式 浏览器是从右往左，先找最右边的选择器，再验证上级是否符合
- 为了加快哪些不符合
值得关注的选择器
选择器分类
- 元素选择器 a{}
- 伪元素选择器 ::before{}
- 类选择器 .link{}
- 属性选择器 [type=rodio]{}
- 伪类选择器 :hover{}
- ID选择器 #id{}
- 组合选择器 [type=checkbox] + label{}
- 否定选择器 :not(.link){}
- 通用选择器 *{}
伪元素: 不会出现再HTML中，也不会出现在DOM树中，但它一个真实存在的元素，它可以显示内容和设置样式
伪类: 表示状态
选择器权重
| 选择器 | 权重值 |
|---|---|
| ID选择器 #id{} | +100 |
| 类 | +10 |
| 属性 | +10 |
| 伪类 | +10 |
| 元素 | +1 |
| 伪元素 | +1 |
| 其它 | +0 |
计算一个不进位的权重值
比如：
- #id .link a[href]
100(#id) + 10(.link) + 1(a) + 0([href]) = 111
- #id .link.active
100(#id) + 10(.link) + 10(.active) = 120
不进位: 数字不进位的，比如多少个类选择器权重相加都不能超过ID选择器权重
举例：
其它规则
!important优先级最高- 元素属性 优先级高
- 相同权重 后写的生效
例子：
非布局样式
字体
字体族
- serif / sans-serif / monospace / cursive / fantantasy
多字体fallback
- 指定字体找不到，就向后查找
网络字体，自定义字体
iconfont
iconfont-阿里巴巴矢量图标库
使用了伪元素 before
行高
- 行高的构成
- 行高相关的现象和方案
- 行高的调整
- 为什么行高设的不一样，但显示的行高是一样的？
文本排版
背景
- 背景颜色
- 渐变色背景
- 多背景叠加
- 背景图片和属性 (雪碧图)
- base64和性能优化
- 多分辨率适配
边框
- 边框的属性： 线型 大小 颜色
- 边框背景图
- 边框衔接(三变形)
滚动
- 滚动行为和滚动条
- visible
- hidden
- scroll
- auto
文本折行
- overflow-wrap(word-wrap)通用换行控制
- 是否保留单词
- word-break 针对多字节文字
- 中文句子也是单词
- white-space 空白处是否断行
装饰性属性
- 字重（粗体） font-weight
- 斜体 font-style: itatic
- 下划线 text-decoration
- 指针 cursor
CSS Hack
- Hack 即不合法但生效的写法
- 主要用于区分不同浏览器
- 缺点：难理解 难维护 易失效
- 替代方案： 特性检测
- 替代方案： 针对性加class
实例
真题
CSS样式(选择器)的优先级
- 计算权重确定
- !important
- 内联样式
- 后写优先级高
雪碧图的作用
- 减少HTTP请求数 提高加载性能
- 有一些情况下可以减少图片大小
自定义字体的使用场景
- 宣传/品牌/banner等固定文案
- 字体图标