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)和边框。