网页制作与开发教程（第2版）.pptVIP

10.1.1传统HTML的缺点【例10-1】不使用CSS的页面htmlheadtitle标题在这里/title/headbodyh2fontcolor=#0033CCface=幼圆标签文字01/font/h2pCSS标签正文内容01/ph2fontcolor=#0033CCface=幼圆标签文字02/font/h2pCSS标签正文内容02/ph2fontcolor=#0033CCface=幼圆标签文字03/font/h2pCSS标签正文内容03/ph2fontcolor=#0033CCface=幼圆标签文字04/font/h2pCSS标签正文内容04/p/body/html10.1.1传统HTML的缺点其在IE中的显示效果，四个标题都变成了蓝色显示的幼圆字体。这时如果希望将这四个标题改成红色，在这种传统的HTML中就需要对每个标题的“font”标签都进行修改，倘若是整个网站，这样的工作量是没法让设计者接受的。给标题添加效果10.1.1传统HTML的缺点其实传统HTML的缺陷远不止例10-1中所反映的这一个方面，相比CSS为基础的页面设计方法，其所体现出的劣势主要有以下几点。（1）维护困难。为了修改某个特殊标签（例如上例中的“h2”标签）的格式，需要花费很多的时间，尤其对于整个网站而言，后期修改、维护的成本很高。（2）标签不足。HTML本身的标签十分少，很多标签都是为网友内容服务的，而关于美工样式的标签，如文字间距、段落缩进等标签在HTML中很难找到。（3）网页过胖。由于没有统一对各种风格样式进行控制，HTML的页面往往体积过大，占用掉了很多宝贵的带宽。（4）定位困难。在整体布局页面时，HTML对于各个模块的位置调整显得捉襟见肘，过多的“table”标签同样也导致页面的复杂和后期维护的困难。10.1.2CSS的引入对于上例，倘若引入CSS对其中的h2标签进行控制，那么情况将完全不同，如例10-2所示。【例10-2】引入CSS的页面htmlheadtitle标题在这里/titlestyle!--h2{font-family:幼圆;color:#0033CC;}--/style/headbody10.1.2CSS的引入h2标签文字01/h2pCSS标签正文内容01/ph2标签文字02/h2pCSS标签正文内容02/ph2标签文字03/h2pCSS标签正文内容03/ph2标签文字04/h2pCSS标签正文内容04/p/body/html10.1.2CSS的引入其显示效果与例10-1完全一样。可以发现，在页面中的font标签全部消失了，取而代之的是最开始的style标签，以及其中对h2标签的定义，即：style!--h2{font-family:幼圆;color:#0033CC;}--/style10.1.2CSS的引入页面中所有的h2标签的样式风格通通由这段代码控制，倘若希望标题的颜色变成红色，字体使用黑体，则仅仅需要修改这段代码为：style!--h2{font-family:黑体;color:#FF0000;}--/style10.1.2CSS的引入从例10-1和例10-2可以明显看出，CSS对于网页的整体控制较单纯的HTML语言有了突破性的进展，并且后期修改、维护都十分的方便。不仅如此，CSS还提供各种丰富的格式控制方法，使得网页设计者能够轻松地应对各种页面效果。CSS的引入10.1.3浏览器与CSS网上的浏览器各式各样，绝大多数浏览器对CSS都有很好的支持，因此设计者往往不用担心其设计的CSS文件不被用户所支持。但目前的问题在于，各个浏览器之间对CSS很多细节的处理上存在差异，设计者在一种浏览器上设计的CSS效果，在其他浏览器上的结果很可能大相径庭。就目前主流的两大浏览器IE与Firefox而言，在某些细节的处理上就不尽相同。IE本身在IE6与发布不久的IE7之间，对相同页面的浏览效果都存在一些差异。如例10-3所示的代码。10.1.3浏览器与CSS【例10-3】浏览器的差异h