6.1 CSS3介绍

使用CSS3最大的优势是,在后期维护中如果需要修改一些外观样式,只需要修改相应的代码即可。

6.1.1 CSS3功能

随着Internet不断发展,对页面效果诉求越来越强烈,只依赖HTML这种结构化标记来实现样式已经不能满足网页设计者的需要,其表现有以下几个方面:


(1)维护困难。为了修改某个特殊标记格式,需要花费很多时间,尤其对整个网站而言,后期修改和维护成本较高。

(2)标记不足。HTML本身标记并不是很多,而且很多标记都是为网页内容服务,关于内容样式的标记(如文字间距、段落缩进)很难在HTML中找到。

(3)网页过于臃肿。由于没有统一对各种风格样式进行控制,HTML页面往往体积过大,占掉很多宝贵的宽度。

(4)定位困难。在整体布局页面时,HTML对于各个模块的位置调整显得捉襟见肘,过多的<table>标记将会导致页面的复杂和后期维护的困难。


在这种情况下,就需要寻找一种可以将结构化标记与丰富的页面表现相结合的技术。CSS样式技术恰恰迎合了这种需要。

CSS(Cascading Style Sheet)称为层叠样式表,也可以称为CSS样式表或样式表,其文件扩展名为.css。CSS是用于增强或控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

引用样式表的目的是将“网页结构代码”和“网页样式风格代码”分离开,从而使网页设计者可以对网页布局进行更多的控制。利用样式表可以将整个站点上所有网页都指向某个CSS文件,设计者只需要修改CSS文件中的某一行,整个网页上对应的样式会随之发生改变。

6.1.2 CSS3发展历史

万维网联盟(W3C)在1996年制定并发布了一个网页排版样式标准(层叠样式表),用来对HTML有限的表现功能进行补充。

随着CSS的广泛应用,CSS技术越来越成熟。CSS现在有三个不同层次的标准:CSS1、CSS2和CSS3。

CSS1(CSS Level 1)是CSS的第一层次标准,正式发布于1996年12月17日,后来于1999年1月11日进行了修改。该标准提供简单的样式表机制,使网页的设计者可以通过附属样式对HTML文档的表现进行描述。

CSS2(CSS Level 2)于1998年5月12日被正式作为标准发布。CSS2标准是基于CSS1设计的,其包含了CSS1所有的功能,并扩充和改进了很多更加强大的属性。CSS2支持多媒体样式表,使得设计者可以根据不同的输出设备给文档制定不同的表现形式。

在2001年5月23日,W3C完成了CSS3的工作草案。该草案制订了CSS3的发展路线图,详细列出了所有模块,并计划在未来进行逐步规范。

CSS1主要定义了网页的基本属性,如字体、颜色、空白边等。CSS2在此基础上添加了一些高级功能(如浮动和定位),以及一些高级的选择器(如子选择器、相邻选择器和通用选择器等)。CSS3开始遵循模块化开发,标准被分为若干个相互独立的模块,这将有助于理清模块化规范之间的关系,减小完整文件的体积。

6.1.3 浏览器与CSS3

CSS3制定完成之后具有了很多新功能(新样式),但这些新样式在浏览器中不能获得完全支持,主要在于各个浏览器对CSS3很多细节处理上存在差异。例如,某个标记属性在一种浏览器中支持而在另一种浏览器中不支持,或者两者浏览器都支持但其显示效果不一样。

主流浏览器为了自己产品的利益和推广,定义了很多私有属性,用于加强页面显示样式和效果,导致现在每个浏览器都存在大量的私有属性。虽然使用私有属性可以快速构建效果,但是对网页设计者是一个大麻烦。设计一个页面,就需要考虑在不同浏览器上的显示效果,一个不注意就会导致同一个页面在不同浏览器上显示效果不一致,甚至有的浏览器不同版本之间也具有不同的属性。

如果所有浏览器都支持CSS3样式,那么网页设计者只需使用一种统一标记即可在不同浏览器上实现一致的显示效果。

当CSS3被所有浏览器接受和支持以后,整个网页设计将会变得非常容易。CSS3标准使得布局更加合理,样式更加美观,整个Web页面显示将会焕然一新。虽然现在CSS3还没有完全普及、各个浏览器对CSS3的支持还处于发展阶段,但是CSS3具有很高的发展潜力,在样式修饰方面是其他技术无法替代的。此时学习CSS3技术,才能保证技术不落伍。