css原地颠倒 h5_HTML+CSS : H5+CSS3

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;

}

}

大概就是这个样子..