Html5和CSS3
广义的H5指的是HTML5本身+CSS3+JavaScript
HTML5的新特性
新增的语义化标签
header:头部标签
nav:导航标签
article:内容标签
section:定义文档某个区域
aside:侧边栏标签
footer:尾部标签
效果类似于div,这些标签主要是针对于搜索引擎的,这些新标签页面中可以使用多次,在IE9中,需要把这些元素转化为块级元素,其次我们的移动端更喜欢使用这些标签。
新增的多媒体标签
video:视频(支持mp4、ogg和webm,尽量使用mp4格式)
/* 考虑兼容性问题,一般会这么写 */
常用视频标签的使用:
自动播放autoplay="autoplay" muted="muted"(静音播放)
循环播放loop="loop"
加载等待画面post="图片地址"
播放控件controls="controls"
audio:音频(支持mp3、wav和ogg,尽量使用mp3)
/* 考虑兼容性问题,一般会这么写 */
新增input类型
input标签中添加type="类型",设置input类型。
新增表单属性
required="required"(表示内容不能为空)
placeholder="提示文本的内容"(表单的提示信息)
/* 修改颜色 */
input::placeholder{
color:pink;
}
multiple="multiple"(可以多选文件提交)
autofocus="autofocus"(自动聚焦)
autocomplete="off/on"(记录历史,默认是on)
CSS3的新特性
CSS3新增选择器
属性选择器
属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。权重为0,0,1,0,注意中括号中的才是属性选择器,下面例子重视标签选择器+属性选择器。
/* 标签[包含的属性] */
input[value] {
color: pink;
}
/* 还可以选取包含特定属性以及特定值的标签 */
input[value="请输入"] {
color: pink;
}
/* 还可以使用通配符,^表示以后面的特定值开头的标签 */
input[value^="请"] {
color: pink;
}
/* 还可以使用通配符,$表示以后面的特定值结尾的标签 */
input[value$="入"] {
color: pink;
}
/* 还可以使用通配符,*表示存在后面的特定值的标签 */
input[value*="入"] {
color: pink;
}
结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素。权重为0,0,1,0。
/* ul中的第一个孩子*/
ul :first-child{
background-color: pink;
}
/* ul中的第一个孩子,这个孩子必须是li*/
ul li:first-child{
background-color: pink;
}
/* ul中的最后一个孩子,这个孩子必须是li */
ul li:last-child{
background-color: pink;
}
/* ul中的第二个孩子,这个孩子必须是li,nth-child中可以是数字、公式和关键字,其中关键子可以为even(偶数)和odd(奇数) */
ul li:nth-child(2){
background-color: pink;
}
/* 其中如果为公式,可以填写包含n的公式,这里n会从0开始赋值,第0个和超过元素个数的会被忽略,2n就是偶数,2n+1就是奇数 */
ul li:nth-child(n){
background-color: pink;
}
fitst-of-type和first-child区别:前者是先找出所有指定的标签,再从中找到指定序号的标签。后者是先找到指定序号的标签,再判断标签的类型是否相同。
伪元素选择器(重点)
可以利用CSS来创建标签元素,而不需要HTML标签,从而简化HTML结构。
::before在元素内部的前面插入内容
::after在元素后面的前面插入内容
伪元素为行内元素
文档树中无法找到
语法:element::before{}
before和after必须有content属性(不能不写,content中输入显示内容)
before在父元素内容的前面创建元素,after在父元素内容的后面插入元素
权重为0,0,0,1
盒子模型
CSS3可以通过box-sizing来指定盒模型,有两个值:即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了变化。
box-sizing:content-box盒子的大小为width+padding+border(默认的形式)
box-sizing:border-box盒子最终的大小为width
CSS3滤镜filter
filter:blur(5px)(blur是一个模糊函数,数值越大,越模糊)
CSS3中calc函数
calc()括号中能够添加一些计算
/* 子盒子比父盒子小30px */
.son {
width: calc(100%-30px);
height: 100px;
background-color: pink;
}
CSS3过渡
transition:要过渡的属性 花费时间 运动曲线 何时开始;
属性:想要变化的css属性,宽度高度 背景颜色 内外边距都可以。如果想要所有的属性都变化过度,写一个all就可以。
花费时间:单位是秒(必须写单位)比如0.5s
运动曲线:默认是ease(逐渐慢下来)(可以省略)
何时开始:单位是秒(必须写单位)可以设置延迟出发时间 默认是0s(可以省略)
div {
width: 200px;
height: 100px;
background-color: pink;
/* 谁做过渡给谁加,过渡效果一般和hover一起使用,如果要写多个属性用逗号分割,如果全部变化,则使用all */
transition: width 0.5s ease 0s;
}
div:hover{
width: 400px;
}
CSS3中的2D转换
transform转换
移动:translate
旋转:rotate
缩放:scale
/* 移动 */
div {
width: 200px;
height: 200px;
background-color: pink;
/* 水平和垂直都移动100px,也可以分开来写 */
/* transform: translateX(100px);
transform: translateY(100px); */
transform: translate(100px,100px);
/* 使用百分号,则是根据盒子自身的高度和宽度来对比的 */
/*transform: translate(50%,50%);*/
}
translate不会影响其他样式的位置,对行内标签没有效果
/* 旋转 */
div {
width: 100;
height: 100px;
background-color: pink;
/* 正数为顺时针转,负数为逆时针转 */
transform: rotate(45deg);
}
设置旋转的中心点
div {
width: 100;
height: 100px;
background-color: pink;
/* 默认是50% 50% ,这里设置为按左下角旋转 值可以是像素、百分比和方位名词*/
transform-origin: left bottom;
/* 正数为顺时针转,负数为逆时针转 */
transform: rotate(45deg);
}
缩放
div {
width: 100px;
height: 100px;
background-color: pink;
/* 1.里面直接写不带单位的数字,是倍数的意思,缩放相同倍数的时候只需要写一个值*/
transform: scale(2,2);
/* 设置盒子缩放中心点 */
transform-origin:left bottom;
}
使用scale缩放的优势:不会影响其他盒子,而且可以设置缩放的中心点。
2D转换复合写法:
同时使用多个转换,其格式为:transform:translate() rotate() scale()等。
其顺序会影响转换的效果(先旋转会改变坐标轴的方向)。
当我们同事友位移和其他属性的时候,记得要将位移放到最前面。
CSS3动画
动画(animation)相比过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。
/* 定义动画 */
@keyframes move {
/* 0%(from)表示动画的开始 */
0% {
transform: translateX(0px);
}
/* 100%(to)表示动画的结束 */
100% {
transform: translateX(1000px);
}
}
/* 元素使用动画 */
div {
width: 200px;
height: 200px;
background-color: aqua;
margin: 100px auto;
/* 调用动画(动画的名称) */
animation-name: move;
/* 持续时间 */
animation-duration: 5s;
}
@keyframes move {
/* 多步动画,百分比是用来划分时间的 */
0% {
transform: translate(0px,0px);
}
25% {
transform: translate(1000px,0px);
}
50% {
transform: translate(1000px,500px);
}
75% {
transform: translate(0px,500px);
}
100% {
transform: translate(0px,0px);
}
}
其他的属性
animation-timing-function:动画的曲线(其中steps()是让动画分几步完成,可以用来做gif图)
animation-delay:何时执行
animation-iteration-count:动画播放次数(infinite为无限循环,默认是1)
animation-direction:是否在下一周期逆向播放
animation-fill-mode:规定动画结束状态(forwards保持结束状态,backwards回到起始状态)
animation-play-state:设置动画播放状态
动画复合写法:
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态;
3D转换
x轴:向右是正的
y轴:向下是正的
z轴:面向人的方向是正的
3D移动translate3d
div {
width: 200px;
height: 200px;
background-color: pink;
/* x,y,z是不能够省略的,不需要就写0 */
transform: translate3d(180px,180px,100px);
}
透视perspective
如果想要在网页中产生3D效果图,则需要使用透视效果,透视也称为视距(人的眼睛距离屏幕的距离)视距越大成像越小,视距越小成像越大。
透视写在需要观察的元素的父元素上面。
想要体现出3D效果,首先需要固定透视距离(视距),然后物体在z轴移动的时候大小就会变化。
3D旋转rotate3d
transform:rotateX(45deg):沿着x轴正方向旋转45度
transform:rotateY(45deg):沿着y轴正方向旋转45度
transform:rotateZ(45deg):沿着z轴正方向旋转45度
Transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度
3D呈现transfrom-style
子盒子3D旋转,父亲盒子3D旋转,会使得子盒子变成2D的旋转(不开启3D空间)。
在父元素中添加,影响子盒子。
transform-style:flat子元素不开启3d立体空间
Transform-style:preserve-3d子元素开启立体空间