css3介绍_01

CSS3简短的介绍

css3是什么？

css3是css2的升级版本，升级自然就带来了新的属性和新的功能，但是和css2的基本相同。对css3已经完全实现了向后兼容，所以你不必改变现有的计划，浏览器将永远支持css2。

新改变

css3最重大的突破就是在css2的基础上实现了动画效果，可以在不使用js的情况下单独实现动画。并且css3也作为后期和js合作的主要存在，实现一些js动画。虽然和jQuery也可以实现，但是比起和css3的效率还是差很多，所以css3还是作为动画存在的主要部分。

css3历史

css3作为css2的升级版本，最开始是由css3的权威组织提出权威的标准，由他和各大浏览器厂商进行沟通，之后由各大浏览器厂商自己实现这些功能，但是在实现的过程中就出现了先后的顺序。
例如：

div{
 	border-radious:50%;
}

这个功能首先是由css3权威组织提出的border-radious这个功能，提出之后大的浏览器厂商像Google、Safari实现的比较快，这时像IE、Firefox、opera还没有实现，这时只有Google、Safari可以使用浏览器厂商就认为只有我可以实现这就是我的私有属性，于是就在border-radious前面添加了一个前缀**-webkit-**,因为Google、Safari这两个浏览器的内核都是webkit系列，就形成这样的属性应用形式：

div{
   	-webkit-border-radious:50%;
}

之后随着各大浏览器厂商接连的实现：

• IE实现后使用**-ms-**前缀
• opera实现后使用**-o-**前缀
• Firefox实现后使用**-moz-**前缀

之后就出现了当我们要使用这个属性时为了满足兼容性问题就必须这样写：

div{
	-webkit-border-radious:50%;
	-ms-border-radious:50%;
	-o-border-radious:50%;
	-moz-border-radious:50%;
	border-radious:50%;
}

来满足各个浏览器兼容的问题。
最后随着市面绝大部分浏览器都实现了这个功能的时候，各大浏览器厂商在升级版本后就使其浏览器即可以使用带私有前缀的这个属性，也可以使用不带前缀的这个属性。所以现在想写任何浏览器都兼容的这个属性就可以直接这样写：

div{
 	border-radious:50%;
}

css3属性就是在这样的环境下不断实现，现在虽然一些常用的属性已经实现了不加前缀使用，但是还有一些属性存在兼容性问题，甚至有的属性只有个别浏览器可以使用。

css参考手册
参考手册中橙色为css3新增属性，其中需要加前缀的会直接写出来

点开属性里面还会有基本的支持情况，例如transition:

css权威网站

autoprefixer插件

当有了这个插件就会自动给你添加前缀：
例如你写：

div{
    transition:;
}

他会自动给你添加前缀变成：

div{
	transition:;
	-webkit-transition:;
	-ms-transition:;
	-o-transition:;
	-moz-transition:;
}

就相当于我们在他的环境下写东西，他自动给我们补齐。

处理器

处理器不是css3，但是他可以辅助我们写css

预处理器 pre-processor

预处理器的典型：less/sass cssNext插件
cssNext 用来实现一些未来的标准（未完全在各大浏览器实现的功能，css的发展方向）

预处理器就是我们先按照他的语法规则去写，之后由他将我们写的代码生成成css代码去执行，可以跟方便我们书写代码。
例如 sass
按照sass我们可以写成：

div{
		span{
			color:#f40;
		}
}

生成之后就变成了：

div span{
	color:#f40;
}

后处理器 post-processor

例：autoprefixer 后处理器的一个插件
后处理器使我们按照css格式去在他的环境下写代码，之后后处理器去帮助我们补充css代码。

postCss

postCss他只是一个工具，用JS实现的css的抽象的语法树AST(Abstract Syntax Tree),postCss就只给我们留下了语法树，后面的事情就都留给了各种插件来实现，这就充分体现了编程的扩展性。