CSS3基础
属性选择器
-E 表示标签名称
-[ ] 选择属性
-attr 属性
-
E[attr] 指定了属性 没有选择属性名
-
E[attr="value"] 指定了属性 并且选择属性名
-
E[attr~="value"] 指定了属性 属性值存在或者包含都会被选择到
-
-
E[attr$="value"] 指定了属性 属性值以xxx结束就可以被选择到
-
E[attr*="value"] 指定了属性 属性值只有存在就可以被选择到
-
E[attr|="value"] 指定了属性 属性值必须要要以value-xxx开头
总结：
属性选择器 比较鸡肋
重要：
E[attr]
E[attr="value"] js动态添加属性 dialog
结构选择器
1.当所有标签的名称都是一样的情况
x：first-child{} x表示当前标签的集合
x：last-child{}
x：nth-child（n）{} n表示第几个
n 表示全部
2n/3n 倍数
even，odd 偶数，奇数
x：nth-last-child（）{}
x：only-child{}
2.当标签名称不一样的情况
先筛选出相同的标签放在一起作为一个集合
再在这个集合中进行选择
-x：first-of-type{}
-x：last-of-type{}
-x：nth-of-type（）{}
-x：nth-last-of-type（）{}
-x：only-of-type{}
3.x:root 匹配文档的根元素
4.x：empty 空的
总结：
结构选择器中常见的是一下两个 记住这两个即可
当标签名称是一样的情况下x：nth-child（）{}
当标签名称不一样的情况下x：nth-of-type（）{}
目标选择器
-：target 哪个元素需要改变就给哪个元素添加即可（需要结合锚点）
层级选择器
css3中的层级选择器
div>P{}
直接子级元素
1.+表示同级元素的最近一个兄弟元素
2.~表示相邻同级后面所有的兄弟元素
选择器总结：
1.属性选择器 - 标签名称[属性] 指定了标签名 并且选择到了属性 - 标签名称[属性="属性值"] 指定了标签名 并且选择到了属性和属性值
2.结构选择器
- 标签名称一样的情况 标签名称的集合:nth-child(n){}
- 标签名称不一样的情况 标签名称的集合:nth-of-type(){}
3.目标选择器
- 必须要结合锚点使用(css中是没有点击事件)
- 在改变的元素上添加:target{}
4.ui、动态、语言、html
5.层级选择器
- 大于号(>) 直接子级元素
css3中的文本属性
文本阴影
属性：text-shadow
属性值：常见的有四个属性值
水平方向
垂直方向
模糊程度 不可以接负值
颜色
盒子阴影
属性：box-shadow
属性值：常见的有四个属性值
水平方向
垂直方向
模糊程度 不可以接负值
颜色
第五个属性值 inset 表示阴影向内的
阿里巴巴矢量库的使用
阿里巴巴矢量图标库是文本（文本属性）
如何去使用 - 本地形式使用 - 本地形式需要下载 - 下载解压之后文件的解释 - demo_index.html+demo.css 操作手册 - iconfont.css iconfont.js iconfont.json 修饰图标的 - iconfont.ttf/woff/woff2 字体类型的资源
- 在线形式使用
本地的第一种方法
引入font-face需要注意路劲
需要修改unicode编码
优点：兼容性最高 低版本的ie上都可以使用
缺点：没有颜色
本地的第二种方法
fontclass的使用
fontclass是unicode的优化版本
fontclass在工作中是最常用的
优点：兼容到ie8+
缺点：不能使用多彩图标
本地的第三种方法
symbol的使用
优点：有颜色
缺点：兼容性差，解析慢，比图片解析还要慢，很少使用
在线方式
背景属性
背景尺寸
属性：background-size
宽，高 100% 100% 背景图片会拉伸或者变形
cover 覆盖，不会变形 超出的区域显示不出来
contain 覆盖，不会变形也不会拉伸 更不会超出隐藏
颜色的拓展
颜色的设置
英文单词
十六进制
rgb/rgba
hsl（很少用，注意面试） hsla
hue 色调0~360
saturation 饱和度0%~100%
lightness 亮度0%~100%
边框圆角
属性：border-radius
属性值：数值+单位
一个属性值：表示四个角的值都是一样的 左上 右上 右下 左下 50%~100%都可以
两个属性值：左上+右上 右下+左下
三个属性值：左上 右上+左下 右下
四个属性值：左上 右上 右下 坐下
浙公网安备 33010602011771号