css3新特性

选择器(结构伪类选择器，属性选择器)
背景和边框
文本效果
媒体查询
2D/3D转换 —— transform(变形) transition(过渡) animation(动画)

1.选择器

# 属性选择器
E[att]				选择具有att属性的E元素 input[type]
E[att="val"]		选择具有attt属性并且属性值为val的E元素 input[type="text"]
E[att^="val"]		选择具有attr属性、且值以val开头的E元素 input[type^="p"]
E[att$="val"]		选择具有attr属性、且值以val结尾的E元素 input[type$="t"]
E[att*="val"] 		选择具有attr属性、且值中含有val的E元素 input[type*="e"]

# 结构伪类选择器
:last-child  	选择元素最后一个孩子 
:first-child	选择元素第一个孩子 
:nth-child(1) 	按照第几个孩子给它设置样式 
:nth-child(even/2n)  		按照偶数 
:nth-child(odd/2n-1/2n+1) 	按照奇数 
:nth-child(-n+5)			前5个包含第5个
:first-of-type				指定类型的第一个
:last-of-type				指定类型的最后一个
:nth-of-type(n)				指定类型第n个

2.背景和边框

# 背景
background-size:规定背景图片的尺寸
background-origin
# 边框
border-image
border-radius圆角

3.文本效果

text-shadow向文本添加阴影
text-justify规定当 text-align 设置为 “justify” 时所使用的对齐方法

例子：

<style>
    span {
        width: 60px;
        display: inline-block;
        font-size: 20px;
        white-space: nowrap;
        text-align: justify;
        text-align-last: justify;
    }
</style>
----------------------------------------------------------
<body>
    <div>
        <span>姓名</span>
        <input type="text">
    </div>
    <div>
        <span>手机号</span>
        <input type="text">
    </div>
    <div>
        <span>密码</span>
        <input type="text">
    </div>
</body>

在这里插入图片描述
4.媒体查询
媒体查询语法：

@media mediatype and/not/only (media feature) {
    CSS-Code;[css代码,选择器 {}]
}   

mediatype       媒体类型:all[用于所有设备] print[打印机和打印预览] screen[电脑屏幕]
media feature   媒体特性必须有小括号包含(min-width,max-width,width)
and/not/only    关键字 
@media screen and (max-width: 600px) {
    body {
        background-color: pink;
    }
}

5.2D/3D转换
变形transform：
复合属性： transform: translate() rotate() scale();
变形有rotate旋转、scale缩放、translate位移、skew倾斜
过渡transition:

过渡：从一个状态在一段时间内平稳的到下一个状态,在这个过程当中必须要有事件去触发
复合属性：transition: 过渡属性 过渡要花费时间 运动方式 延时时间;
		 transition-property:; 要过渡属性
    	 transition-duration:; 过渡花费时间s
    	 transition-delay:;    延时时间s
    	 transition-timing-function: ease默认/linear/ease-in/ease-out/ease-in-out;
#多个过渡属性
    	transition:width .5s linear 1s,background-color 1s linear;	用逗号连接
    	transition:all .2s;

动画animation

动画：使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
动画的基本使用 ：1.定义一个动画：
            	方法一：@keyframs 动画名称 {
                		0% {}
                		100% {}
            		}
				方法二：@keyframs 动画名称 {
                		from {}
                		to {}
            		}
       			2.使用动画
复合属性：
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态
#动画名称和持续时间必写，属性合写中不能有鼠标滑过动画停止
animation: name duration timing-function delay iteration-count direction fill-mode;

注意：

html5新特性

语义化标签：header、footer、section、nav、aside、article
新增表单控件
新增表单属性：placehoder、required、min 和 max
音频视频：audio、video
本地存储：
localStorage 没有时间限制的数据存储；
sessionStorage， session 的数据存储，当用户关闭浏览器窗口后，数据会被删除
新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
WebSocket：建立持久通信协议

表单控件

    <input type="date"><br>
    <input type="color"><br>
    <input type="number"><br>
    <input type="email"><br>
    <input type="time"><br>
    <input type="search"><br>
    <input type="url"><br>

在这里插入图片描述
表单属性

placeholder="提示文字"			提示文字
#改变提示文字样式
<style>
	input::placeholder {color: red;}
</style>

required="required"				在提交时如果元素内容为空白，则不允许提交，同时显示提示文字。
autofocus="autofocus"			自动获得焦点,一个页面只能有一个
autocomplete="on/off"			浏览器基于之前键入过的值，on默认打开。off关闭
								#需要放在表单内同时加上name属性

multiple="multiple"				可以多选文件提交
<input type="file" multiple="multiple">

音频视频标签

视频
<video></video>
autoplay="autoplay"		自动播放[谷歌禁用]	解决方法：添加muted属性
controls="controls"		向用户显示控件
loop="loop"				循环播放
width=""
height=""
poster="图片位置"		加载等待的图面图片
muted="muted"			静音播放

音频
<audio></audio>
autoplay="autoplay"		自动播放
controls="controls"		向用户显示控件
loop="loop"				循环播放

新事件
在这里插入图片描述

css3和html5新增的特性

css3新特性

html5新特性