HTML5语义化标签:
header nav(导航) article section(章节) aside(侧边栏) footer
---------------------------------------------------------------
H5新增表单控件:
email（自动验证email格式）
url（自动验证url格式）
number（只能输入数字）
range（类似音量滑动条）
Date pickers (date, month, week, time, datetime, datetime-local)（自带日期选择）
search（搜索域）
color（颜色选择）
datalist（自动验证内容是否在可选择选项中）
新增表单控件属性: placeholder(提示文字) autofocus(自动焦点) autocomplete(联想关键词)
---------------------------------------------------------------
新增音频标签 audio(支持ogg,wav,mp3)
属性:autoplay controls(显示) loop preload(预加载) muted(静音)
新增视频标签 video(支持ogg,webM,mp4)
属性:width,height,poster
---------------------------------------------------------------
样式的权重:
!important,权重10000
内联样式,权重1000
ID选择器,权重100
类,伪类和属性选择器,权重10
标签,伪元素选择器,权重1
通用(*),子(>),相邻(+),同胞(~)选择器 权重0
---------------------------------------------------------------
颜色表示:rgba:如rgba(255,255,255,255,0.5)最后一个数表示50%的透明度
圆角:border-radius ,如画个圆 border-radius 50% 50%
阴影 box-shadow: 水平偏移 垂直偏移 羽化度 阴影大小 颜色 inset(内阴影)
动画 transition: 属性(如width) 过渡时间 过渡方式(ease或曲线) 延迟,....
---------------------------------------------------------------
选择器:
li:nth-child(2){
color:green;
}
可以把所有li标签的第二个字体颜色变绿.
---------------------------------------------------------------
li:nth-child(2n){
color:green;
}
偶数行变绿
---------------------------------------------------------------
li:nth-child(2n+1){
color:green;
}
奇数行变绿
---------------------------------------------------------------
---------------------------------------------------------------
li:nth-of-type(2){
color:green;
}
和nth-child()的区别是:如果li:nth-child(2)找到的第二个子元素不是li标签,那么它不做任何处理,而li:nth-of-type(2)
是找第二个li子元素,而不是找第二个子元素.
---------------------------------------------------------------
---------------------------------------------------------------
div:empty{}:匹配一个元素类型为div的空元素
input:disabled{} : 选择失效的表单控件
input:enabled{} : 选择可用的表单控件
input:checked{} : 选择选中的checkbox
---------------------------------------------------------------
---------------------------------------------------------------
transform变换:
translate(x,y) 位移
scale(x,y) 缩放
rotate(deg) 旋转
---------------------------------------------------------------
---------------------------------------------------------------
animation动画:
简单例子:
div{animation: moving 0.1s 0.1s infinite alternate;}
@keyframes moving{
from{
width:350px;
}
to{
width: 600px;
}
}
大概就是这个样子..