CSS3实践之路(一):CSS3之我观

CSS 的英文全称Cascading Style Sheets，中文意思是级联样式表,通过设立样式表，可以统一地控制HMTL中各DOM元素的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。

CSS的W3官方网址是:www.w3.org/TR/CSS/,在这个《CSS3实践之路》中这官方资料是我主要参考资料，此外W3School的CSS3学习网址也是我这个系列的主要资料来源，也会有人问既然网站上有这么多学习资料，为什么我还出这么一个CSS的学习系列，因为一些好的学习HTML5和CSS3的网站都国外网站，虽然国内也有相关的学习网站，但上面的资源大多是一个一个的特效，并没有比较系统的学习资料，为了提高国内网页设计水平、拉近与国际网页设计水平的距离这一崇高理想，本人不才，特准备这一CSS3的学习系列以飨网友，不足之处还望广大网友海涵，多多支持。

接下来概括下这个系列要讲的内容：

1. 盒子模型（Box Model）

2. 颜色（Color）

3. 背景与边框（Backgrouds and Borders）

4. 文本特效（Text Effects）

5. 2D和3D转换（2D/3D Transformations）

6. 动画（Animations）

7. 多列布局（Multiple Column Layout）

8. 用户界面（User Interface）

9. 选择器（Selectors）

每讲一个功能属性，我都会附上比较好的示例，来加深对CSS3的理解。上面列出的内容只是本人目前想到必须要讲的内容，以后随着本系列的深入可能会讲更多的内容，本人在学习CSS3某些新效果（2D/3D Transformations  && Gradient）时，更像是定义富媒体（flash&&Sliverlight）外观，此外在讲CSS3的同时，会讲些CSS以前版本的内容。

虽然CSS3还未正式发布，但其规则制定地非常详细了，发布只是个时间问题，由于各浏览器对它的支持不尽统一，而我们要设计的网页必须要兼容浏览器，参考这个网址（http://www.w3schools.com/cssref/css3_browsersupport.asp）来查看目前各浏览器对CSS3的支持情况。

下面表格显示各种浏览器前缀

浏览器	前缀
Internet Explorer	-ms-
Firefox	-moz-
Google Chrome	-webkit-
Safari	-webkit-
Opera	-o- -xv-（-xv-用于voice相关的）

 

如果是开发简体中文网页,浏览器的兼容性更不好做，因为国内有很多”套子浏览器”(就是那些用别人浏览器的内核,而只是换了一些外表),而这些浏览器基本上都是使用IE内核,而文档渲染模式(至少默认的)为IE7，可能还有一些更古板的国内浏览器还是IE6模式，这些情况对国内的前端设计者来说真是悲剧，所以我敢说国内网站从技术运用上来说要比国外的网站慢很多年，在IT业的其它方面也是一样的，很多IT新技术、新创意都是在国外火了，才拿到国内来应用的，比如说团购网站，哎，中国人一直在模仿。。。

说了这么多，接下来展示一个CSS3按钮的示例，来更大的激发网友们对CSS3的兴趣：

这些是运用CSS3的border-radius、box-shadow和gradient（只有moz和webkit支持）制作出来的效果，当然这在支持CSS3的浏览器中观看，本人测试过在以下浏览可以看到效果：

IE9 、Firefox4以上、Google Chrome 10以上、Safari5以上 、Opera10.5以上。

下一章我将详细讲解盒子模型（Box Model）和边框。