html-day12css新增属性及选择器
1.优雅降级和渐进增强
优雅降级:一开始先针对高版本完成所有功能和酷炫效果,后面再单独针对低版本浏览器进行处理, 以保证其完成最基本的功能即可。【向下兼容】 渐进增强:先针对低版本浏览器完成基本功能,然后再针对高版本浏览器添加更多功能和酷炫的效果。 【向上兼容】
2.css3新增的属性
1.文字阴影 text-shadow:x的偏移 y的偏移 模糊程度 阴影的颜色; 2.盒子阴影 box-shadow:x的偏移 y的偏移 模糊程度 延伸半径 阴影的颜色 inset; inset代表内阴影,不加它就是外阴影; 延伸半径可以不要 3.圆角半径 border-raduis:*px | *%; 如果是*%,代表是宽度和高度的百分比。 注意:如果要是正圆,必须宽高一样 4.背景图的大小 background-size:宽度 高度; 注意:如果和background属性混用,必须复合background属性在前 5.英文大小写转换 text-transform:capitalize首字母大写 | lowercase小写 | uppercase大写;
3.字体图标
1.使用阿里巴巴矢量图标库 【iconfont】 2.使用自定义字体 @font-face{ font-family:'自定义字体的名字'; src:url('字体文件的路径'); } 使用的时候,设置对应内容的字体类型为自定义的字体名字
4.选择器
1.属性选择器 选中有attr属性的元素e e[attr] 选中有attr属性且属性值为v的元素e e[attr='v'] 选中有attr属性且属性值以v开头的元素e e[attr^='v'] 选中有attr属性且属性值以v结尾的元素e e[attr$='v'] 2.结构伪类选择器 e:first-child 选中第一个子元素e e:last-child 选中最后一个子元素e e:nth-child(n) 选中第n个子元素e e:nth-last-child(n) 选中倒数第n个子元素e n是一个乘法因子:可以是数字;英文-odd奇数,even偶数;可以是数学表达式; e:only-child 选中唯一的子元素e [用于场景判定] 注意:child系列强调的是该元素在其父元素的所有子元素中的排序。 type系列强调的是该元素在同类型兄弟元素之间的排序。 【将child换成of-type就是对应type的写法】 3.UI状态伪类选择器 e:disabled 选中不可用的元素e e:enabled 选中可用的元素e e:checked 给选中的元素e 4.否定伪类选择器 e:not(f) 选中e中所有不满足条件f的剩余元素 5.目标伪类选择器 e:target 当e为目标区域的时候,选中它