第3章 CSS样式设计
学习目标
熟练掌握CSS的样式规则,CSS在HTML5页面中的应用和各种CSS选择器的使用,CSS的层叠性和优先级。
熟练掌握各种HTML5 App开发常用的CSS属性和页面的适配。
掌握使用Chrome的“开发者工具”对CSS样式进行调试。
CSS样式设计是HTML5 App开发中最重要的技术之一,有了它才真正实现了内容与外观的分离,通过它可以控制页面的布局、样式、动画,移动设备的适配。目前CSS也是各公司HTML5工程师必备的技能之一。本章针对CSS的语法规则、各种在App开发中常用的CSS属性、CSS在Chrome中的调试等重要内容作详细的讲解。
3.1CSS简介
CSS即层叠样式表(Cascading StyleSheet)。在页面制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景,甚至动画效果实现精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的外观。CSS禅意花园(http://www.csszengarden.com/)是网站设计领域最著名的网站之一,网站提供了一张HTML页面,设计师们为它设计出成百上千个CSS样式文件,这张页面通过更换样式表呈现出各式各样、另人惊叹的效果,如图3-1所示,这两张页面的源码是一样的,只是样式表文件不同,这让人不禁感叹CSS的强大。
在页面中使用CSS技术,可以设计出更加整洁、漂亮的页面,它解决了内容与外观分离的问题。科学地编写CSS,还可以大大提高页面样式的复用性。
CSS目前的最新版本是CSS3,由于各浏览器厂商对CSS3的各属性支持程度不一样,因此,有少数CSS3属性需要用厂商的前缀加以区分,通常把这些加上私有前缀的属性叫“私有属性”,以便于在不同的浏览器下更好地体验CSS3特性。表3-1列举了各主流浏览器的私有属性。
内核浏览器私有前缀
TridentIE8/IE9/IE10/IE11ms
WebkitChrome/Safariwebkit
GeckoFireFoxmoz
PrestoOperao
当一个CSS3属性成为标准属性,并且被主流浏览器普遍兼容的时候,就可以省略私有前缀了。