HTML5新特性
Html5新增语义化标签
布局常用div来做,我们常用的div是没有语义的。为此新添入了语义化的标签。
(1)这种语义化标签针对搜索引擎,可以使用多次。
(2)在IE9中,需要把这些元素转换为块级元素。
(3)移动端更加喜欢这种标签。
音频标签
尽量选择MP3格式
语法:
<audio src="文件地址" controls="controls">
</audio>
视频标签
尽量选择MP4文件
语法:
<video src="文件地址" controls="controls"></video>
常见属性:
input类型
表单类型
修改placeholder中的颜色:
input::placeholder{
color:pink;
}
Css3新特性
属性选择器
//必须是input并且具有value的属性值
input[value]{
color:pink;
}
优点:(1)不借助与类或者id选择器
(2)选择某些“属性=值”的元素,或者以某些属性值开头的元素或者以某些属性值结尾的元素
(3)类选择器,伪类选择器,属性选择器的权重都是10
结构伪类选择器
根据文档结构选择,根据父级选择子元素。
//选择ul中的第一个li
ul li:first-child{
color:pink;
}
//选择ul中所有偶数li
ul li:nth-child{even){
color:pink;
}
//选择ul中从第5个li到最后
ul li:nth-child(n+5){
color:pink;
}
//选择ul前五个
ul li:nth-child(-n+5){
color:pink;
}
note:
(1)表达式里面必须是n,不能是其他字母
(2)必须写成-n+5,不能写成5-n
(3)区别:
1)nth-child 对父元素里面所有孩子排序选择(序号是固定的) 先找到第n个孩子,然后看看是否和E匹配
2)nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E ,然后再根据E找第n个孩子
伪元素选择器
利用CSS创建新标签元素而不需要html标签,从而优化html结构。
(1)before和after创建一个元素,但是属于行内元素
(2)新创建的这个元素在文档中找不到,所以称为伪元素
(3)语法:element::before()
(4)before和after必须有content属性
(5)before在父元素的里面的前面创建元素,after在父元素的内容后面创建元素
(6)伪元素选择器和标签选择器的权重都是1
使用场景:
(1)伪元素字体图标(2)仿土豆效果
(3)伪元素清除浮动
盒子模型
CSS3可以通过box-sizing指定盒子类型,有俩个值:content-box,border-box.因此可以分为俩种情况:
(1)content-box:盒子大小是width+padding+border(默认)
(2)border-box:盒子大小是width
note:如果盒子模型改成了border-box,那么padding和border就不会再撑大盒子(前提是padding和border不会超过width宽度)
图片模糊
CSS3的滤镜filter可以把模糊或者颜色偏移等图形效果应用于元素。
filter:函数();
//模糊处理,数值越大越模糊
filter:blur(5px);
calc计算函数
在声明css属性的时候执行一些计算,可以使用±*/
CSS过渡
过渡是指不使用js或者flash动画的前提下,当元素从一种样式变化为另外一种样式的时候为元素添加效果。
(1)过渡动画:从一个状态过渡到另外一个状态
(2)效果:让页面好看且有动感,并且不会影响页面布局
(3)我们现在经常和:hover一起搭配使用
transition:要过渡的属性 花费时间 运动曲线 何时开始
(4)简介属性特性:
属性:想要变化的css属性,宽度高度 背景颜色 内外边距都可以。如果想要所有的属性变化过渡,写一个all即可。
花费时间:单位是s(必须写单位)
运动曲线:默认是ease(可省略)
何时开始:单位是秒(必写单位),可以设置延迟出发时间,默认是0s
(5)实际使用
谁做过渡给谁加
div {
width:200px;
hight:100px;
transition:width .5s ease 1s;
}
div:hover {
width:400px;
}
如果有多个属性,利用,进行分割
transition:width .5s,height .5s;