CSS3
CSS3介绍
如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。
- 浏览器支持程度差，需要添加私有前缀
- 移动端支持优于PC端
- 不断改进中
- 应用相对广泛
1、 选择器
属性选择器
| 选择器 | 示例 | 含义 |
|---|---|---|
| E[attr] | 存在attr属性即可 | |
| E[attr=val] | 属性值完全等于val | |
| E[attr*=val] | 属性值里包含val字符并且在“任意”位置 | |
| E[attr^=val] | 属性值里包含val字符并且在“开始”位置 | |
| E[attr$=val] | 属性值里包含val字符并且在“结束”位置 | |
| E[attr~=val] | 属性值用空格分开列表 列表包含val选中 |
伪类选择器
除了以前学过的:link、:active、:visited、:hover，CSS3又新增了其它的伪类选择器。
结构(位置)伪类：以某元素（E）相对于其父元素或兄弟元素的位置来获取无素；
| 选择器 | 示例 | 含义 |
|---|---|---|
| E:first-child | 选中的所有元素集合中的第一个元素 | |
| E:last-child | 选中的所有元素集合中的最后一个元素 | |
| E:nth-child(n) | 其父元素的第n个子元素 | |
| E:nth-last-child(n) | 其父元素的第n个子元素（倒着数） | |
| E:first-of-type | 其父元素的第一个当前子元素 | |
| E:last-of-type | 其父元素的最后一个当前子元素 | |
| E:nth-of-type(n) | 其父元素的第n个当前子元素 | |
| E:nth-last-of-type(n) | 其父元素的倒数第n个当前子元素 |
2、过渡
过渡是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。
帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片
补间动画：自动完成从起始状态到终止状态的的过渡。
特点：当前元素只要有“属性”发生变化时，可以平滑的进行过渡，并不仅仅局限于hover状态。
以上四属性重在理解
语法：transition: property duration timing-function delay;
| 值 | 描述 | 值 |
|---|---|---|
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 | none|all|property |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 | time |
| transition-timing-function | 规定速度效果的速度曲线。 | linear|ease...... |
| transition-delay | 规定在过渡效果开始之前需要等待的时间，以秒或毫秒计 | time |
<style>
div{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover{
width:300px;
}
</style>
**3、transform转换 **
转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合学习的过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
transform: none|transform-functions;
1、移动 translate(x, y) 可以改变元素的位置，x、y可为负值；
a) 移动位置相当于自身原来位置
b) y轴正方向朝下
c) 除了可以像素值，也可以是百分比，相对于自身的宽度或高度
2、缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数
3、旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针；
a) 当元素旋转以后，坐标轴也跟着发生的转变
b) 调整顺序可以解决，把旋转放到最后
transform-origin: x-axis y-axis
| 值 | 描述 |
|---|---|
| x-axis | 定义视图被置于 X 轴的何处。可能的值：left | center | right | length | % |
| y-axis | 定义视图被置于 Y 轴的何处。可能的值：top | center| bottom | length | % |
4、动画
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
1、必要元素：
a、通过@keyframes指定动画序列；
b、通过百分比将动画序列分割成多个节点；
c、在各节点中分别定义各属性
d、通过animation将动画应用于相应元素；
2、关键属性
a、animation-name设置动画序列名称
b、animation-duration动画持续时间
c、animation-timing-function动画执行速度，linear、ease等
d、animation-delay动画延时时间
e、animation-iteration-count动画执行次数，infinite等
f、animation-play-state动画播放状态，running、paused等
g、animation-direction动画逆播，alternate等
h、animation-fill-mode动画执行完毕后状态，forwards、backwards等
语法：animation: name duration timing-function delay iteration-count direction;
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
- 规定动画的名称
- 规定动画的时长
div{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}
注释：您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。
什么是 CSS3 中的动画？
动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
div{
width:100px;height: 100px;
background: red;
position: absolute;
animation: myfirst 2s;
animation-fill-mode: forwards;
}
@keyframes myfirst{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
通过http://caniuse.com/ 可查询CSS3各特性的支持程度，一般兼容性处理的常见方法是为属性添加私有前缀，如不能解决，应避免使用，无需刻意去处理CSS3的兼容性问题。
在前端开发中，遇到最麻烦的事情就是浏览器的兼容性问题。对于这个问题的解决，通常有如下两种思路：（了解）
优雅降级
优雅降级指的是一开始就构建站点的完整功能，然后针对浏览器测试和修复。
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来开发网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
渐进增强
渐进增强一开始只构建站点的最少特性，然后不断针对各浏览器追加功能。
我们应该先让网站能够正常工作于尽可能旧的浏览器上，然后不断为它在新型浏览器上实现更多的增强和改进。随着时间的推移，当越来越多的人开始升级浏览器而浏览器本身的支持度也不断提升时，就会有越来越多的人体验到这些增强和改进，它持续有效的使网站越来越好，却如需你刻意做什么。只需要一次实现，它就让网站的体验与时俱进。
两个之间的区别
对于优雅降级，功能衰减是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。功能衰减意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
“它们是看待同种事物的两种观点”。“优雅降级”和“渐进增强”都关注于同一网站在不同设备里不同浏览器下的表现程度。关键的区别则在于它们各自关注于何处，以及这种关注如何影响工作的流程。
5、响应式网站
实例：https://willowtreeapps.com/
什么是响应式开发：可以响应不同的布局：
a) 在移动互联日益成熟的时候，桌面浏览器上开发的网页已经不能满足移动端的设备的展示和阅读
b) 之前，通常的做法是对移动端单独开发一套特定的版本
c) 但是，如果移动终端设备起来越多的时候赋发成本太大，是因为需要做所有屏幕的适配
d) 响应式开发的目的就是:一个网站能够兼容多种终端
e) 在新建的网站上一般都会使用响应式开发
f) 移动web开发和响应式开发是必须具备的技能
g) 演示响应者页面
响应式开发的原理：媒体查询：
a) 查询媒介，查询到当前屏幕(媒介媒体)的宽度，针对不同的屏幕宽度设置不同的样式来适应不同屏幕。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。简单说，你可以设置 不同屏幕下面的不同的样式，达到适配不同的屏幕的目的。
b) 实现方式：通过查询screen的宽度来指定某个宽度区间的网页布局。
超小屏幕 （移动设备）768px以下
小屏设备 768px-992px 768 <= w <992
中等屏幕 992px-1200px 992 =< w <1200
宽屏设备 1200px以上 >=1200
<style>
.container{
width:1200px;
margin: 0 auto;
height:1200px;
background-color: red;
}
/*媒体查询：注意and后面空格的添加*/
/*iphone: w < 768px*/
@media screen and (max-width: 768px){
.container{
width:100%;
background-color: green;
}
}
/*pad: w >= 768 && w< 992*/
@media screen and (max-width: 992px) and (min-width: 768px) {
.container{
width:750px;
background-color: blue;
}
}
/*中等屏幕 w >= 992 && w<1200*/
@media screen and (max-width: 1200px) and (min-width: 992px) {
.container{
width:970px;
background-color: pink;
}
}
</style>
