HTMLcss3

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: ur1('字体文件的路径");
}

使用的时候,设置对应内容的字体类型为自定义的字体名字

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个子元素ei
e:only-child                        选中唯一的子元素【场景判定】

注意:child系列强调的是该元素在其父元素的所有子元素的排序

​ type系列强调的是该元素在同类型兄弟元素之间的排序

3.UI状态伪类选择器

e: disabled				选中不可用的元素e
e: enabled				选中可用的元素e
e: checked				选中的元素e

4.否定伪类选择器

e: not(f)				选中e中所有不满足条件f的剩余元素

5.目标伪类选择器

e:target						当e为目标区域的时候,选中它

设置元素在z轴上的堆叠层次

​ z-index:数字;

​ 值为正负均可,大的覆盖小的。

​ 每个元素默认的z-index的值为0

​ 必须给元素设置非静态定位,该属性才能生效。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值