ＣＳＳ在网页设计中的应用.doc

ＣＳＳ在网页设计中的应用 　　摘要：无论是门户网站还是如今流行的B/S结构的企业MIS，都是靠网页来展现它的内容、与用户进行交流。网页可以简单地描述为“内容＋表现”，CSS（Cascading Style Sheet，级联样式表）是最好的网页“表现”技术，它使用一套完整而且灵活的规则，将网页的内容和表现方法彻底分离，利用它能设计出具有复杂布局的精美网页，并且代码简洁、干净、易于调整和维护，为网页设计人员和维护人员节省大量的时间和精力，提高企业的经济效益。 　　关键词：CSS；网页；级联样式表；HTML 　　中图分类号：TP311文献标识码：B文章编号：1009-3044(2008)08-10ppp-0c 　　 　　1 引言 　　 　　网页是用HTML、XHTML、XML等标记语言书写的，由一系列标签组成，这些语言是用来对内容进行组织，而CSS是负责如何对网页内容进行表现，更加美观和人性化地展现给读者。 　　1993年前后，HTML是一门内容很贫瘠的语言，它只关注如何描述诸如段落、超链接、列表、标题等内容，而如何将这些内容人性化地呈现给读者它并不关心。 　　几年以后，开始出现HTML 3.2和HTML 4.0，其很大一部分都是实现如何对网页表现进行控制，诸如font、表格的cellspacing等标签。此时网页设计者可以把自己的设计意图很好地呈现给读者，但是大量使用table和font等标签堆砌的代码变得杂乱无章，使网页难以更改和维护。 　　1996年，由W3C(World Wide Web Consortium，万维网联盟)发布了完整的CSS 1建议草案，这个草案迅速成为一个被广泛采纳的标准，W3C 于1999年对其进行了修订。该草案用以解决早期关于网页表现方面的混乱局面。它提供了比早期HTML代码更丰富的表现控制，比如，设置任何网页元素的颜色、边框、间距以及许多其他效果。 　　1998年，W3C扩展了原有的规范建立了CSS 2，除了我们熟悉的屏幕浏览器之外，还包括诸如手机、PDA等各种媒介的表现形式标准，还增强了其他许多功能。2006年，W3C对其进行修订，制订了CSS 2.1草案。目前，W3C仍在进行CSS 3草案的研究和制订之中。 　　CSS与网页语言之间无缝集成，能够更精确、更容易地控制网页布局，优化网页结构，为颜色、图像和文本等等提供更多的控制选项，从而设计出具有复杂布局的精美网页，不再依赖于层层嵌套的表格，而且网页代码更加整洁、干净，易于调整和维护。鉴于目前所有浏览器，包括Internet Explorer、Netscape Navigator、Mozilla等都没有完整地支持CSS 2标准的所有功能，本文只介绍一些通用的CSS功能。 　　 　　2 样式元素应用方法 　　 　　简单地说，样式就是一个规则，它告诉浏览器如何将(X)HTML文档中的内容呈现给读者（下面简称表现），每个(X)HTML标签都有一些特定的样式属性，它的值决定了浏览器如何显示这个标签。将样式和标签结合起来有三种方式：内联样式表、文档级样式表和外部样式表，浏览器将所有样式表中定义的样式合并在一起，然后以内联样式结束，这种级联方式就是“级联样式表”的含义。 　　2.1 内联样式 　　在标签中加入style属性，后面跟一些属性及属性的值，如＜h1 style=margin:5px; width:66px;＞test＜/h1＞。由于内联样式只影响被定义的标签，具有局部性，在每个需要样式的标签中都要进行定义，大量使用style属性会显著增加文档大小，使代码变得难以维护，所以尽量少用。 　　2.2 文档级样式表 　　将所有样式定义集中起来放在HTML文档＜head＞ ＜/head＞之间，使用＜style＞ ＜/style＞将其包含起来。如：＜head＞＜style type=text/css＞.style1 {font-family: 黑体; font-weight: bold;}＜/style＞＜/head＞。这种样式表只能在HTML文档中定义与使用，每个HTML文档内都需要单独定义一套样式规则，不利于样式的重用，维护起来也相对麻烦，不宜大量使用。 　　2.3 外部样式表 　　将所有样式定义放在一个单独的CSS文件中，与HTML文件分开存放。这样一个样式表文件可以被多个HTML文档引用，CSS文件通过网络单独下载，可以随时下载，随时使用，甚至可以使用其他样式表。要在HTML文档中使用外部样式表有两种方式，都是在head部分加入相应代码： 　　(1)链接。加入＜link href=css/css1.css rel=stylesheet type=text/css /＞代码来对CSS文件夹下css1.css样式表