html5 和css3 新增属性

Dear 丶 2023-06-09 14:21 14阅读 0赞

HTML5和CSS3新增属性  
新增选择器  
E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素

E:nth-of-type(n)：匹配父元素的第n个类型为E的子元素

CSS圆角  
设置某一个角的圆角，比如设置左上角的圆角：  
border-top-left-radius:30px 60px;

同时分别设置四个角： border-radius:30px 60px 120px 150px;

设置四个圆角相同：  
border-radius:50%;

css阴影  
box-shadow：h-shadow v-shadow blur spread color inset;  
分别设置阴影：水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影

rgba（新的颜色值表示法）  
盒子透明度表示法：opacity:0.1; filter:alpha(opacity=10)（兼容IE）;  
rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度

transition动画  
transition:proprety duration timing-function delay

proprety (设置过渡属性如width height background-color)

duration (过渡时间)

timing-function(运动方式一般为ease)

delay(延迟)

一般和hover属性连用

用法，在元素属性内写transition:proprety duration timing-function delay；

在hover属性中写变化后样式。

transform变形  
transform：translate(100px,100px);位移

transform：scale（0.5.,0.2）;缩放

transform：rotate（30deg）；旋转

transform：skew （x，y）；斜切

与hover连用

同时在原始样式中写transition:proprety duration timing-function delay；

形成变形动画

旋转

\{rotateX Y Z\}

transform-style：flat or preserve-3d

transform:prespective(800px)设置透视距离。

设置初始旋转值解决跳变bug；

旋转方向判断，箭头对向自己顺时针。

tranform-origin：left top （x y）左上角为原点 设置旋转中心点

backface-visibility 设置背面是否可见

animation  
（annimation-play-state:）设置暂停

1、@keyframes 定义关键帧动画  
2、animation-name 动画名称  
3、animation-duration 动画时间  
4、animation-timing-function 动画曲线

linear 匀速  
ease 开始和结束慢速  
ease-in 开始是慢速  
ease-out 结束时慢速  
ease-in-out 开始和结束时慢速  
steps 动画步数  
5、animation-delay 动画延迟  
6、animation-iteration-count 动画播放次数 n| infinite  
7、animation-direction

normal 默认动画结束不返回  
Alternate 动画结束后返回  
8、animation-play-state 动画状态

paused 停止  
running 运动  
9、animation-fill-mode 动画前后的状态

none 不改变默认行为  
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）  
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）  
both 向前和向后填充模式都被应用  
10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

新增标签  
一般不用，因为与浏览器不匹配

国内搜索引擎不识别

1、header 页面头部、页眉  
2、nav 页面导航  
3、article 一篇文章  
4、section 文章中的章节  
5、aside 侧边栏  
6、footer 页面底部、页脚

示意图

新增表单控件  
一般也不用 因为样式在不同浏览器下不同

新增类型：网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索

网址:  
  
  
邮箱:  
  
  
日期:  
  
  
时间:  
  
  
星期:  
  
  
数量:  
  
  
范围:  
  
  
电话:  
  
  
颜色:  
  
  
搜索:

新增常用表单控件属性：  
1、placeholder 设置文本框默认提示文字  
2、autofocus 自动获得焦点  
3、autocomplete=“off 联想关键词 一般关掉

新增音频和视频标签  
  
1、autoplay 自动播放  
2、controls 显示播放器  
3、loop 循环播放  
4、preload 预加载  
5、muted 静音

支持格式：ogg、wav、mp3

支持格式：ogg、mp4、webM

属性：  
1、width  
2、height  
3、Poster