CSS3选择器有哪些?
属性选择器、伪类选择器、伪元素选择器。
CSS3新特性有哪些?
- 颜色:新增RGBA,HSLA模式
- 文本效果
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。
text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法。
text-outline 规定文本的轮廓。
text-overflow 规定当文本溢出包含元素时发生的事情。
text-shadow 向文本添加阴影。
text-wrap 规定文本的换行规则。
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。
- 边框:
圆角:border-radius
边框阴影: box-shadow
将图片规定为包围 div 元素的边框:border-image
- 盒子模型:box-sizing
- 背景:
background-size 设置背景图片的尺寸
background-origin 设置背景图片的原点
background-clip 设置背景图片的裁切区域,以”,”分隔可以设置多背景,用于自适应布局
- 渐变:linear-gradient、radial-gradient
- 过渡:transition,可实现动画
- 在CSS3中唯一引入的伪元素是 :selection.
- 媒体查询,多栏布局
- border-image
- 2D转换
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换,沿着 X 轴移动元素。
translateY(n) 定义 2D 转换,沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换,改变元素的宽度。
scaleY(n) 定义 2D 缩放转换,改变元素的高度。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换,沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴。
- 3D转换
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化,仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化,仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化,仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换,通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换,通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换,通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。
- 自定义动画
CSS3新增伪类有那些?
- p:first-of-type 指定父元素的第一个p元素
- p:last-of-type 指定父元素的最后一个p元素
- p:only-of-type 指定属于父元素的特定类型的唯一子元素的每个 p 元素
- p:only-child 规定属于其父元素的唯一子元素的每个 p 元素
- p:nth-child(2) 规定属于其父元素的第二个子元素的每个 p
- :enabled :disabled 控制表单控件的禁用状态
- :checked 控制单选框或复选框被选中状态
HTML5新特性
- 拖拽释放(Drag and drop) API
- 语义化更好的内容标签
- 结构标签: header、nav、footer、aside、article、section
- 新增标签: datalist(定义选项列表)、details(定义文档细节,通常与summary使用)、menu(定义列表/菜单)、address、progress(进度条,有两个值:value、max)、mark(标记)、time(时间)
- 新增表单元素type: email、url、tel、number(min、max、step)、range(进度条)、color(颜色面板)、search、calendar、date、time、email
- 属性: form、autocomplete、autofocus、method、action、multiple、pattern、placeholder、required、contenteditable、hidden、tableindex
- 音频、视频API(audio,video)
- 画布(Canvas) API
- 地理(Geolocation) API
- 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失
- sessionStorage 的数据在浏览器关闭后自动删除
- 新的技术webworker, websocket, Geolocation支持HTML5新标签:
处理html5新标签与浏览器兼容性问题:
(1)、使用document创建标签
(2)、a)使用html5shim:在<head>中调用以下代码:
1.<!--[if lt IE 9]>
2.<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
3.<![endif]-->
b)使用kill IE6: 在</body>之前调用以下代码:
1.<!--[if lte IE 6]>
2.<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>
3.<![endif]-->