第4章 CSS入门.docVIP

第4章 CSS入门 课前导读 前面我们学习了HTML相关知识。实际上单纯使用HTML标记进行网页设计是难堪重任的。毕竟HTML标记中的属性对于元素外观的控制是非常有限的，而且如果遵循严格的XHTML规范，大部分表现外观的标记及属性均已过时，必须寻找新的解决方案。而新的解决方案就是借助于CSS技术。本章主要介绍CSS的作用及在网页中使用其优势。 重点提示 在本章我们将重点学习： CSS的作用 CSS的优势 网页中使用CSS的几种方法 4.1 CSS的作用 4.1.1 什么是CSS？ CSS即层叠样式表（Cascading Stylesheet），它是一种样式表技术。CSS技术首先体现的就是网页中数据与表现相分离的思想。进一步领会这种思想，了解CSS技术的实质作用，我们首先要来思考HTML语言的局限性。 4.1.2 传统HTML页面的缺点 首先我们看下面一个例子，如图所示的页面我们以HTML标记实现，它的代码如例4-1所示： 图4-1 传统方式 例4-1 传统方式实现 html head titleCSS/title /head body ul font color=redili第一章/li/i/font font color=redili第二章/li/i/font font color=redili第三章/li/i/font font color=redili第四章/li/i/font font color=redili第五章/li/i/font font color=redili第六章/li/i/font /ul /body /html 我们前面也介绍过XML对于数据与表现这两个概念是清楚的，具体到这个例子来说，该例展示的页面终数据只是“第一章、第二章、……”，而这部分数据要以红色字体显示，并且项目列表的形式出现这属于“表现”的范畴。显然，结合本例，我们回想以下，HTML标记有些是用来描述数据的，也有一些是用来描述表现样式的。对比XML，这一点就更为显著。 这似乎算不上大问题，但是这种把数据与表现混杂在一起纠缠不清的做法显然不利于页面的维护以及应用程序对于页面数据的识别与处理，尤其是当一个网站页面数量非常巨大的时候，这就会明显影响处理效率。 那么CSS技术是如何解决这一问题的呢？它有具有怎样的优势呢？ 4.1.3 CSS搭配HTML网页的优点 我们先使用CSS来定义上述页面，使其达到同样的外观效果，那么代码将如例4-2所示： 例4-2 使用CSS实现 html head titleCSS/title style type=text/cssli{color:red;font-style:italic;}/style /head body ul li第一章/li li第二章/li li第三章/li li第四章/li li第五章/li li第六章/li /ul /body /html 我们比较两种实现方法下的文件大小，例4-1为376字节而例4-2为249字节，因此我们说多数情况下使用CSS技术，CSS代码能够较好地重用，页面的代码量减少了。 当然使用上个例子来说明CSS的优势有些片面，CSS还具有另一个优势，那就是只要对相应的代码做一些简单的修改，就可以改变页面中的一系列元素的外观，非常便于维护，而且代码重用也得以实现。实际上，这种把表现与数据相分离的做法也迎合了XHTML规范的要求。有资料表明对于访问量巨大的门户网站，由于其页面数量庞大并且页面风格一致，使用CSS技术来定义页面的外观能将总的代码量降低70%，这无疑为网站服务器的减负起到了巨大的积极作用。 随着学习的进一步深入，我们还会感受到CSS技术的另外一个优势，那就是CSS是专门控制显示样式的，它的功能十分强大，因此设计网页时使用CSS技术，可以更有效地对页面元素的布局、背景、外观和其它效果实现更加精确的控制，以实现仅仅依靠HTML标记无法实现的外观效果。 4.1.4 CSS的标准问题 同样，CSS技术也存在标准问题，IE浏览器与Firefox浏览器遵循的CSS技术标准也存在差异，这在以后的介绍中我们会进一步地比较二者的区别。在此需要说明的是W3C组织同样对于CSS标准的制定做出了巨大贡献，如果以W3C组织制定的CSS规范为参照，Firefox浏览器对于该规范的支持要远远好于IE浏览器，因此建议读者在对W3C组织的CSS标准进行学习时，使用Firefox浏览器来观察其效果。不过，要注意微软的IE浏览器仍是浏览器市场中主导者，因此也要掌握IE浏览器对于常用CSS属性的支持状况。 值得大家期待的是微软将要在IE8.0版本中兼容CSS2.1规范，或许微软也意识到遵循规范才能在一定程度上扭转浏览器市场占有份额下降的现状。 4.2 在网页中使用CSS 前面例2中我们使用了CSS来定义