第18章 未来的CSS演示文稿.PPTVIP

第18章 未来的CSS 读者读到本章之前，已经对CSS2有了较为全面地认识，随着网络技术的进一步发展，CSS也在与时俱进，目前最新的版本CSS3标准正在制订中。本章是本书的最后一章，我们将介绍一下这个CSS的未来版本。实际上，这个未来并不遥远，因为很多浏览器已经慢慢地开始实现CSS3的部分功能，比如苹果公司2008年3月新推出的支持很多CSS3标准的浏览器Safari 3.1版，Mozilla组织的Firefox目前版本也支持不少CSS3技术，更新的Firefox3和IE8也都在紧锣密鼓地开发当中，即将和我们见面。 一句话，未来是很快就会到来的，如果能提前了解下一代的CSS，并成为未来的一部分，该是多么令人感到兴奋和激动！ “忘记过去就意味着背叛”。在体会未来的高科技之前，先让我们总结一下过去，从缺点方面回顾一下本书前文所介绍的CSS2。 18.1 现有CSS的不足 根据业内很多专家的总结，现有CSS2主要有以下不足： 不一致的浏览器支持：不同的浏览器在处理CSS的时候结果会很不相同。 有些CSS技术浏览器之间实现的方法不同导致效果不同。比如IE浏览器6.0版本，对于某些CSS2.0技术的具体实现就和其他浏览器不相同，导致同样的CSS设置不能通用于主流的浏览器中。为了解决这样的问题，必须特别的修改CSS代码，以适应每个浏览器的特点，这样就会增加工作量，增加出错的机会和调试的难度。 有些CSS技术在目前支持的浏览器很少，比如我们在第四章提到的某些选择器，只有很少的浏览器支持。 18.2 CSS3介绍 在本节，请暂时抛开前文书一直讲解的CSS2，进入CSS3的多彩世界。 【CSS3的主人】 CSSWG讨论并制定CSS标准，它的全称为Cascade Style Sheet Working Group，也就是CSS工作组的意思。CSSWG从属于第一章我们提到的W3C组织，主要由业内相关的各家公司和科研院所派出代表组成，比如微软，惠普，Google，浏览器厂商Opera，Mozilla，美国在线，苹果等，还有HTML作者行会的一些成员，总之都是业内的专家。 CSS3是CSS2.0和CSS2.1的下一个版本，最早在本世纪初就已经提出了工作草案（Working Draft），用于描述预计的工作内容，之后在不断的讨论和修订，直到2008年的3月份，CSS3仍在制定当中。 18.2.1 CSS3预览 --- 渐变效果边框 在CSS3中，我们不光可以设置边框的颜色，线的类型，还可以生成颜色渐变效果的边框，如代码所示。 18.2.2 CSS3预览 --- 圆角效果 在网页中，有时候需要对表格等块形标签制作出圆角的效果，使得它们看起来不那么单调，死板。在CSS2中，我们只能采取变通的方法来实现：比如事先制作四幅小圆角的图片，放置或者设置成背景于表格等的四个边顶点；也还有其他的几种方法，但是都有一个共同的缺点：制作和维护起来比较麻烦，时间也比较长。 在CSS3中，由于它天生就已经支持圆角这样的属性，我们可以通过简单的几行样式定义就实现，非常方便。代码就是一个例子。 18.2.3 CSS3预览 --- 多重背景 长期以来，除了利用背景色之外，我们在网页上所看到的标签背景都是单独的一幅图片。这种情况在CSS3中要发生变化了，因为CSS3支持一个标签有多个背景，它们可以一起显示在网页上，请看代码。 18.2.4 CSS3预览 --- 文本溢出处理 当我们把网站的文章列表页面制作完毕并上传到服务器之后，随着新文章的不断加入，有时会发现某行文章的标题超出或者拉长单元格宽度的情形。代码显示了这样一个例子： 18.2.5 CSS3预览 --- 改变标签大小 在现有的CSS2中，如果想要通过简单的样式设置就实现网页标签的大小改变是比较困难的，总要求助于JavaScript等客户端脚本程序的帮忙。CSS3推出的改变标签大小Resize属性，让这一切变得非常轻松。请看代码。 18.2.6 浏览器与ACID测试 前文介绍了CSS3的一些新颖而实用的属性，有的是效果的增强，丰富了页面显示技术，使得网页设计师能够进一步放开手脚，探索更多更酷更眩目的效果；有的是简化了现有版本中纯用CSS很难解决的问题，使得网页制作者不用再把过多的时间花在“Hack”浏览器（指通过特殊的方法在某浏览器下实现其不支持的样式效果）方面。总之，CSS3的确是一个值得期待的崭新标准。 但是，我们也能够发现CSS3的这些新属性主流浏览器支持的并不好：这个属性IE支持，Firefox不支持；那个属性Safari支持，IE又不支持。根据第一章提供的浏览器市场占有率表，IE，Firefox/Mozilla和Safari占有了绝大部分的市场份额，但是它们之间都不统一，就会导致有很多新鲜的样式属性无