CSS3
属性选择器:
[attr]名称
[attr="value"]选中了属性，并且规定了属性值
结构选择器
nth-child(){ }标签名称一样，
nth-of-type(){ }标签名称不一样
结构选择器的使用
1.当标签名称是一样的时候
- 标签名称的集合:first-child{} 集合下面的第一个
- 标签名称的集合:last-child{} 集合下面的最后一个
- 标签名称的集合:nth-child(序号){} 集合下面的第几个(从前往后)
- 标签名称的集合:nth-last-child(序号){} 集合下面的第几个(从后往前)
- n 选择全部(切记不要装杯)
- 2n/3n 公式
- odd/even 奇数/偶数
- 了解:标签名称:only-child{} 只有一个子级元素的时候被选择中
2.当标签名称是不一样的时候: 先筛选出相同的标签名称,再从集合中选择到想到的标签
- 标签名称的集合:first-of-type{} 集合下面的第一个
- 标签名称的集合:last-of-type{} 集合下面的最后一个
- 标签名称的集合:nth-of-type(序号){} 集合下面的第几个(从前往后)
- 标签名称的集合:nth-last-of-type(序号){} 集合下面的第几个(从后往前)
- 了解:标签名称:only-of-type{} 只有一个子级元素的时候被选择中
层级选择器
选择器: 包含选择器 父级选择器 子级选择器{}
1.> 直接子级
2.+ E+F
选择紧贴在E元素之后F元素。
3.~ 后面的全部
hover
- 改变自身 选择器:hover{}
- 通过父级改变子级 父级选择器:hover 子级选择器{}
- 改变相邻的同级
背景属性
所有的背景图片都是从padding区域开始排列的
属性:background-size
属性值
- 100% 100% 宽 高 拉伸变形
- cover 覆盖 等比例的缩放 背景图片不会变形
- contain 覆盖包含 根据图片大小进行变化
边框属性
边框圆角属性:border-radius(半径)
属性值:数值单位/百分比单位
- 一个属性值: 四个角 50%~100% 圆
- 两个属性值: 左上右下 右上左下
- 三个属性值: 左上 右上左下 右下
- 四个属性值: 左上 右上 右下 左下
- 八个属性值: 左上x 右上x 右下x 左下x/左上y 右上y 右下y 左下y
如何利用设计图量取圆角
阿里巴巴矢量图标库
文本属性 不是图片
1.离线使用(下载)
离线下载后文件的解释
- demo_index.html+demo.css 操作手册
- iconfont.css 文本修饰描述
- iconfont.js/json 引入图标方式
- iconfont.ttf\woff\woff2 文件类型
- unicode方式导入 兼容性最好 缺点是不支持多色
- fontclass方式导入 兼容相对来说较好 缺点依然是不支持多色 建议在工作中使用这种方式
- symbol方式导入 兼容性最差 svg格式导入 渲染很差 不如jpg 支持多色
2.在线使用
font class方式为工作所用
