css3和h5新增特性

css3

css3中新增的一些特性大概可以分为：选择器，背景和边框属性，文本效果，2D/3D转换

1. 新增一些选择器、伪类选择器和伪元素选择器

选择器：

:first-child /* 选择元素第一个孩子 /

:last-child /* 选择元素最后一个孩子 /

伪类：用于向某些选择器添加特殊的效果（没有创建新元素）

a:link {color: #FF0000} /* 未访问的链接 /a:visited {color: #00FF00} / 已访问的链接 /a:hover {color: #FF00FF} / 鼠标移动到链接上 /a:active {color: #0000FF} / 选定的链接 */

伪元素：用于向某些选择器添加特殊的效果（创建了 html 中不存在的元素）

::before {} /* 选择器在被选元素的前面插入内容和定义* css，使用 content 属性来指定要插入的内容。 */

::after {} /* 选择器在被选元素的后面插入内容和定义* css，使用 content 属性来指定要插入的内容。 */

2.背景和边框

背景:规定背景图片的尺寸:background-size规定背景图片的定位区域:background-origin（content-box、padding-box、margin-box）边框:border-radius: 圆角border-shadow/text-shadow: 阴影border-image: 边框图片

3.文本效果

text-shadow 向文本添加阴影text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法text-emphasis 向元素的文本应用重点标记以及重点标记的前景色text-outline 规定文本的轮廓

text-overflow ：ellipsis规定当文本溢出包含元素时发生的事情

text-wrap 规定文本的换行规则word-break 规定非中日韩文本的换行规则word-wrap 允许对长的不可分割的单词进行分割并换行到下一行text-decoration 文本修饰符：overline、line-through、underline (上划线、中划线、下划线)渐变，CSS3新增了渐变效果，包括 linear-gradient(线性渐变)和 radial-gradient(径向渐变)

4.2D/3D转换

变形transform：

有rotate旋转、scale缩放、translate位移、skew倾斜

过渡transition：

transition是一个复合属性，可以同时定义transition-property、transition-duration、transition-timing-function、transition-delay子属性值

动画animation

动画的使用，首先通过@（-webkit-)keyframes 定义动画名称及动画的行为，再通过animation属性设置动画特征相关值进行调用

h5

1. 语义化标签：文档头部:header、文档尾部:footer、文档中的节点:section、导航:nav、侧边栏:aside、独立内容区域:article

2. 增强型表单：HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证

3. 新增表单属性：

placeholder：输入框的默认提示required：是一个 boolean 属性。要求填写的输入域不能为空pattern：描述了一个正则表达式用于验证input元素的值min和max设置元素最小值和最大值音频视频：（audio、video、canvas ）画布、地理定位、拖拽

4.本地存储：localStorage 没有时间限制的数据存储；共享属性，我们可以把登录的token数据和一些公用的数据可以存储到localstorage里面，getItem（存储数据）、setItem（取出数据）、clear（清除本地存储的数据）sessionStorage， session 的数据存储，当用户关闭浏览器窗口后，数据会被删除我们在没有localStorage和sessionStorage的时候，我们一般是用的cookie来存储数据

5.新事件:onresize 当调整窗口大小时触发ondrag 当拖动元素时触发onscroll 当滚动元素滚动元素的滚动条时触发onmousewheel 当转动鼠标滚轮时触发onerror 当错误发生时触发onplay 当媒介数据将要开始播放时触发onpause 当媒介数据暂停时触发