1-H5
H5新增元素: | header、footer、section、aside、nav、article、button、progress(进度条标签) |
H5的新增表单属性 | placeholder(input输入框的提示信息)、autofocus(input页面加载后自动获取焦点)、required(输入框的值不能为空,表单提交时判断)、maxlength(最大长度)、minlength(最小长度)、novalidate(不验证表单)、autocomplete(设置是否自动完成) |
H5新增的表单输入框类型 | email(提交时验证是否有@符号)、 url(提交时验证是否含有http://或者https://)、 number (只能输入数字)、 search(右侧有×号,点击清空内容)、 range(显示滚动条范围)、 color(显示拾色器)、 time(显示小时和分钟时间)、data(显示年月日)、month(显示年月) |
audio | Controls:音频控件 Loop:循环播放 Muted:静音 |
video | Controls:视频控件 Loop:循环播放 Muted:静音 Height:高度 Width:宽度 |
2-C3
属性选择器
选择所有带有x属性元素:[属性名]
选择所有带有x属性=y属性的元素:[x=”y”]
选择所有带有x属性=y-开头属性的元素:[x|=”y”]
选择所有带有x属性=y属性值开头的元素:[x^=”y”]
选择所有带有x属性=y属性值结尾的元素:[x$=”y”]
选择所有带有x属性=包含y属性值子字符的元素:[x*=”y”]
伪类选择器
:first-child | 获取指定选择器的第一个元素 |
:last-child | 获取指定选择器的最后一个元素 |
:nth-child(n) | 获取指定选择器的第n个元素(所有子元素的顺序) |
:nth-last-child | 获取指定选择器的第n个元素(从最后一个开始计数) |
:nth-of-type(n) | 获取指定选择器的第n个元素(所有指定选择器的顺序) |
:nth-last-of-type(n) | 获取指定选择器的第n个元素(从最后一个开始计数) |
伪元素选择器
::first-letter | 选中文本内容的第一个汉字或者字母 |
::first-line | 选中文本内容的第一行 |
::before | 在当前元素的内部的前边添加 |
::after | 在当前元素的内部的后边添加 |
CSS3新增
CSS3颜色 | 新增RGBA,HSLA模式 |
CSS3阴影 | box-shadow(盒子阴影),text-shadow(文本阴影) |
CSS3圆角边框 | border-radius |
CSS3盒子模型 | box-sizing |
CSS3背景 | background-size 设置背景图片的尺寸 background-origin 设置背景图片的原点 background-clip 设置背景图片的裁切区域 |
CSS3渐变 | linear-gradient(线性渐变)、 radial-gradient(径向渐变) |
CSS3过渡 | transition-property (css属性) transition-duration(过渡的周期) transition-timing-function(过渡的时间速度曲线):ease(默认的)、linear(匀速的) transition-delay(过渡的延迟) |
CSS3自定义动画 | animation-name动画的名称 animation-duration动画的周期 animation-timing-function动画的时间速度曲线 animation-delay动画的延迟 animation-iteration-count动画的次数(infinite无限) animation-paly-state:paused动画的暂停 动画的开始:@keyframes动画的名称 开始From{} 结束to{} |
CSS3-2D转换 | transform:translate(x,y)平移 rotate(x,y)旋转 skew(x,y)扭曲 scale(x,y)缩放拉伸 |
CSS3-3D转换 | transform-style:preserve-3d; |