css与h5

CSS3
一、css3新特性
css3中新增的特性：选择器，背景和边框属性，文本效果，2D/3D转换

1. 选择器
   常规选择器

:last-child 选择元素最后一个
:first-child 选择元素第一个
:nth-child(1) 选择第几个，写1就是第一个
:nth-child(even) 按照偶数进行选择
:nth-child(odd) 按照奇数进行选择
:disabled 选择每个被禁用的dom元素
:checked 选择每个被选中的dom元素
:not(selector) 选择非 selector 元素的每个元素
::selection 选择被用户选取的元素部分

2.背景和边框
背景:

规定背景图片的尺寸:background-size
规定背景图片的定位区域:background-origin（content-box、padding-box、margin-box）
1
2
边框:

border-radius: 圆角
border-shadow/text-shadow: 阴影
border-image: 边框图片

3.文本效果

text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色
text-outline 规定文本的轮廓
text-overflow 规定当文本溢出包含元素时发生的事情
text-wrap 规定文本的换行规则
word-break 规定非中日韩文本的换行规则
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行
text-decoration 文本修饰符：overline、line-through、underline (上划线、中划线、下划线)

4.2D/3D转换

变形transform：

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

过渡transition：

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

动画animation

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

这些新属性大多在新版浏览器得到了支持，有些需要添加浏览器前缀（-webkit-、-moz-、-ms-、-o-）
1
二、html5新特性

1. 语义化标签：

文档头部:header
文档尾部:footer
文档中的节点:section
导航:nav
侧边栏:aside
独立内容区域:article
2. 对表单增强：

HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证
1
color 主要用于选取颜色
date 从一个日期选择器选择一个日期
datetime 选择一个日期（UTC 时间）
email 包含 e-mail 地址的输入域
month 选择一个月份
number 数值的输入域
range 一定范围内数字值的输入域
search 用于搜索域
tel 定义输入电话号码字段
time 选择一个时间
url URL 地址的输入域
3. html5 新增的表单属性

placehoder 简短的提示在用户输入值前会显示在输入域上。即我们常见的入框默认提示，在用户输入后消失
required 是一个 boolean 属性。要求填写的输入域不能为空
pattern 描述了一个正则表达式用于验证 input 元素的值
min 和 max 设置元素最小值与最大值
step 为输入域规定合法的数字间隔
height 和 width 用于 image 类型的 input 标签的图像高度和宽度
autofocus 是一个 boolean 属性。规定在页面加载时，域自动地获得焦点
multiple 是一个 boolean 属性。规定 input 元素中可选择多个值
4、html5 新事件

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