论文部分内容阅读
摘要：无论是门户网站还是如今流行的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样式表的引用。
(2)引入。＜style＞@import url(css/css1.css);＜/style＞。
通过链接或引入css1.css外部样式表，我们就可以在HTML文档中任意使用css1.css中定义的样式。这种样式表维护起来是最方便的，也显著减少了HTML文档大小，使得网页的下载速度更快。推荐使用这种方式。
3 CSS中的选择符应用方法
样式语法：选择符 {属性：值；属性：值1值2；...}
3.1 标签选择符。如p {color::#F2F2E6;}。这种方式可应用于大部分HTML标签，如p, h1, a等，甚至html本身。还可以是XML中自定义的标签，如myself。样式属性影响文档中所有该标签。
3.2 组合选择符。如：body, h1, p {color: gray;}。把不同的标签放在一起，中间使用逗号分隔，表示后面的样式定义适用于所有列出的选择符。当多个标签需要定义相同属性时，这种方法很方便。
3.3 通用选择符。如* {color: red;}。其中的星号匹配了所有标签。
3.4 类选择符。在标签中加入class属性，在样式定义中，类选择符是在选择符前加入句点。类选择符可以应用于所有标签，可以重复使用，即同一个类选择符可以被多个标签多次使用。分为三种：
(1)一个类影响所有标签。如＜p class="warning"＞Test＜/p＞，此时用.warning {font-weight: bold;}将段落文字Test加粗显示。
(2)一个类影响特定标签。如span.warning {font-weight: bold;}，此时，只有在出现形如＜span class=”warning”＞＜/span＞的地方才应用该定义样式。
(3)多个类影响一个标签。如＜p class="urgent warning"＞Important Notice！＜/p＞，应用.warning.urgent {background: #00ff00;}，段落将受两个类选择符urgent和warning共同影响，书写时urgent和warning的顺序无关紧要。
3.5 ID选择符
在标签中加入id属性，在样式定义中，ID选择符是在选择符前加入#。ID选择符可以应用于所有标签，因为它标识的是HTML文档中惟一的一个元素，所以同一个ID选择符在同一文档中只能被使用一次，不能重复应用于其他标签。这就是它和类选择符的区别。如＜p id="warning"＞Test＜/p＞，#warning {font-weight: bold;}
3.6 属性选择符
(1)简单属性选择符。选择的依据是标签包含给定的属性，而不关心该属性的值。如＜h1 class="hoopla"＞text1＜/h1＞ ＜h1 class="severe"＞text2＜/h1＞，应用h1[class] {color:silver;}将同时影响text1和text2两处文本。简单属性选择符也可以选择多个属性。如a[href][title] {font-weight:bold;}，将同时包含href和title属性的链接文字加粗显示。
(2)基于确定值的属性选择符。选择的依据是标签属性等于某个值。如a[href="http://www.w3c.org"] {font-weight: bold;}，将链接地址文字加粗显示。
(3)基于部分选择值的属性选择符。选择的依据是标签属性中包含某个值。如img[title~="Figure"] {border: 1px solid;}，将选中title属性中包含Figure字样的img标签，对于区分文档中图表和图片很有用。
(4)特殊属性选择符。如img[src|="figure"] {border: 1px solid;}，将选中所有src属性以figure开头的img标签，如figure.gif、figure1.gif。
(5)后代选择符。如＜h1＞I am ＜strong＞a ＜em＞super＜/em＞man!＜/strong＞＜/h1＞，应用h1 em {color: gray;}，在HTML文档结构中em标签在是h1标签的后代，结果将super文本的颜色显示为灰色。
(6)父子选择符。如
＜h1＞This is ＜strong＞very＜/strong＞ important＜/h1＞
＜h1＞This is ＜em＞really ＜strong＞very＜/strong＞＜/em＞ important＜/h1＞
应用h1 ＞ strong {color: red;}将选中第一个h1标签，因为strong标签与h1标签是父子关系。
(7)相邻兄弟选择符。如h1 p {margin: 0;}，将选中紧接h1标签的p标签。
(8)伪类选择符。如a:link {color: navy;}。当前浏览器都支持的常用伪类选择符有：a:link, a:visited, a:hover, a:active, a:focus等。
4 样式优先级规则
当有多个样式应用于同一标签，就可能出现冲突，最终结果是靠样式优先级决定，优先级高的胜出。规则如下：
4.1 根据来源排序。内联样式优先于文档级样式、文档级样式优先于外部样式。
4.2 根据类排序。标签的类的属性优先于为标签总体定义的属性。如p {color: red;}，.iamblue {color: blue;}，对于＜p class=”iamblue”＞test＜/p＞，将应用上述第二个样式。
4.3 根据特殊性排序。一个具有更特殊的属性优先于一般的属性。如p#bright {color: silver;}，p {color: black;}，第一个优先于第二个。
4.4 根据顺序排序。最后定义的属性优先。如H1 {color: red;}，H1 {color: blue;}，第二个优先。
5 需要掌握的CSS重要概念
5.1 元素。元素是CSS显示的基础，HTML中的所有标签，都是元素。每个元素都被一个方框包围。有两种类型：
(1)可替换元素。其意思是元素本身并不包含实质内容，其内容在浏览器中显示时被外部内容替换。比如＜img src="myimage.gif" /＞，此img标签（元素）只是表明对外部图像文件myimage.gif的引用，在实际显示时，将被一幅图像替换。还有input标签，也是可替换元素，在实际显示时被替换为单选框、检查框、文本框等。
(2)不可替换元素。HTML标签大多数是不可替换元素。此类标签本身包含实质内容，由浏览器直接读取并显示。比如p、li、span、table等等。
5.2 元素显示样式
在CSS 2.1中，根据显示方式不同把元素分为两种：
(1)块级元素。在元素所表示的方框的前、后都与其他元素分开。就像加入回车符一样。块级元素包含p、h、div、li等。
(2)内联级元素。在元素所表示的方框前、后与其他元素没有分开。如a、strong和em标签。
可以在标签内加入display属性改变其显示方式。如：p {display: inline;}会把p标签当作内联级元素显示。
5.3 元素框
图2 CSS元素框详细模型
在图1中，最中间为块级元素内容，向外依次为填充（padding）、边框（border）、边距（margin）。在图2中，详细列出了CSS元素框模型的每个属性，中间部分的height和width对应于标签的height和width属性。
5.4 关于简写
(1)样式属性含有top、right、bottom、left。如.test { margin-top:5px; margin-right:5px; margin-bottom:5px; margin-left:5px;}，可以简写为.test {margin:5px;}。若上、下边距为5px，而左、右边距为8px; 可以简写为.test {margin:5px 8px;}，浏览器将5px、8px重复使用于Top、Right、Bottom和Left，将首字母顺序连起来就是TRBL（读作trouble易于记忆）。
(2)颜色缩写。完整颜色表示应该为6个16进制数，但也可以使用三个16进制数字表示。如：#F0F表示FF00FF
6 浮动与定位应用方法
浮动与定位是利用CSS进行网页布局的基础，功能非常强大，也非常方便，我们只需要利用div、float、position就可以完全替代传统的表格布局方式并提供更多的控制选项。表格布局有其先天的缺陷，就是浏览器必须全部读出表格内容后才能显示，当有多个复杂的表格进行嵌套时，打开网页的速度将显著受到影响。再有就是调整一个表格单元时，经常会影响到其他表格单元，当一个网页含有大量表格时，网页就变得难以调整和维护。而利用CSS进行布局，就没有这些烦恼，你可以精确控制每个网页元素的位置和大小，你只需更改几个样式属性值就会使网页焕然一新。
6.1 浮动（float）
可以把浮动元素看作处于一个单独的层，不属于正常的文档流。Float属性值有：left、 right、none、inherit。可以应用于任何标签。如＜img src="b4.gif" style="float: left;"＞会把b4.gif图像浮动到左边，其后面的文本将从图像的右边和下边显示。当一个网页包含多个浮动元素时，可能会造成重叠，这时我们可以使用clear属性，如h1 {clear: both;}，会阻止任何浮动元素覆盖h1元素。
6.2 定位（position）
定位的含义很简单，就是表明元素框的显示位置在哪里，有四种定位方式。
(1)static，静态定位。元素框按正常方式显示。对于块级元素，其元素框属于正常文档流，对于内联级元素，其元素框显示在包含它的块中。
(2)relative，相对定位。元素框被偏移一定的距离，元素保持其原有形状和所占用的空间。
(3)absolute，绝对定位。元素框不属于正常文档流，其定位的基准是包含它的块。元素框在正常文档流中的占用空间被关闭，好像该元素不存在一样，无论该元素本身是块级还是内联级，都会产生块级元素框。
(4)fixed，固定定位。除了包含它的元素只能为视口（浏览器的窗口）外，其他表现和absolute一样。利用此属性可以产生类似frame的效果。
7 结束语
本文结合实例对CSS进行了简明扼要的介绍，展现了CSS在网页设计中灵活、强大的功能，可以看到，在网页中使用CSS能达到三个目的：一是优化网页结构，显著减小网页文件的大小，使得网页浏览速度更快。二是网页的布局和样式的调整都可以在CSS文件中进行，不需要改动每个HTML文件，这对于维护一个大型网站很重要，能为网站维护人员节省大量时间和精力。三是轻松设计具有复杂布局的网页，使网页更美观。
参考文献：
[1]W3C.Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification[EB/OL] .http://www.w3.org/TR/CSS21/.
[2]Eric Meyer.Cascading Style Sheets[M].2nd Edition.USA:O’Reilly,2004.10-452.
[3]技桥译.HTML与XHTML权威指南[M].第5版.北京:清华大学出版社,2003.33-199.
关键词：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样式表的引用。
(2)引入。＜style＞@import url(css/css1.css);＜/style＞。
通过链接或引入css1.css外部样式表，我们就可以在HTML文档中任意使用css1.css中定义的样式。这种样式表维护起来是最方便的，也显著减少了HTML文档大小，使得网页的下载速度更快。推荐使用这种方式。
3 CSS中的选择符应用方法
样式语法：选择符 {属性：值；属性：值1值2；...}
3.1 标签选择符。如p {color::#F2F2E6;}。这种方式可应用于大部分HTML标签，如p, h1, a等，甚至html本身。还可以是XML中自定义的标签，如myself。样式属性影响文档中所有该标签。
3.2 组合选择符。如：body, h1, p {color: gray;}。把不同的标签放在一起，中间使用逗号分隔，表示后面的样式定义适用于所有列出的选择符。当多个标签需要定义相同属性时，这种方法很方便。
3.3 通用选择符。如* {color: red;}。其中的星号匹配了所有标签。
3.4 类选择符。在标签中加入class属性，在样式定义中，类选择符是在选择符前加入句点。类选择符可以应用于所有标签，可以重复使用，即同一个类选择符可以被多个标签多次使用。分为三种：
(1)一个类影响所有标签。如＜p class="warning"＞Test＜/p＞，此时用.warning {font-weight: bold;}将段落文字Test加粗显示。
(2)一个类影响特定标签。如span.warning {font-weight: bold;}，此时，只有在出现形如＜span class=”warning”＞＜/span＞的地方才应用该定义样式。
(3)多个类影响一个标签。如＜p class="urgent warning"＞Important Notice！＜/p＞，应用.warning.urgent {background: #00ff00;}，段落将受两个类选择符urgent和warning共同影响，书写时urgent和warning的顺序无关紧要。
3.5 ID选择符
在标签中加入id属性，在样式定义中，ID选择符是在选择符前加入#。ID选择符可以应用于所有标签，因为它标识的是HTML文档中惟一的一个元素，所以同一个ID选择符在同一文档中只能被使用一次，不能重复应用于其他标签。这就是它和类选择符的区别。如＜p id="warning"＞Test＜/p＞，#warning {font-weight: bold;}
3.6 属性选择符
(1)简单属性选择符。选择的依据是标签包含给定的属性，而不关心该属性的值。如＜h1 class="hoopla"＞text1＜/h1＞ ＜h1 class="severe"＞text2＜/h1＞，应用h1[class] {color:silver;}将同时影响text1和text2两处文本。简单属性选择符也可以选择多个属性。如a[href][title] {font-weight:bold;}，将同时包含href和title属性的链接文字加粗显示。
(2)基于确定值的属性选择符。选择的依据是标签属性等于某个值。如a[href="http://www.w3c.org"] {font-weight: bold;}，将链接地址文字加粗显示。
(3)基于部分选择值的属性选择符。选择的依据是标签属性中包含某个值。如img[title~="Figure"] {border: 1px solid;}，将选中title属性中包含Figure字样的img标签，对于区分文档中图表和图片很有用。
(4)特殊属性选择符。如img[src|="figure"] {border: 1px solid;}，将选中所有src属性以figure开头的img标签，如figure.gif、figure1.gif。
(5)后代选择符。如＜h1＞I am ＜strong＞a ＜em＞super＜/em＞man!＜/strong＞＜/h1＞，应用h1 em {color: gray;}，在HTML文档结构中em标签在是h1标签的后代，结果将super文本的颜色显示为灰色。
(6)父子选择符。如
＜h1＞This is ＜strong＞very＜/strong＞ important＜/h1＞
＜h1＞This is ＜em＞really ＜strong＞very＜/strong＞＜/em＞ important＜/h1＞
应用h1 ＞ strong {color: red;}将选中第一个h1标签，因为strong标签与h1标签是父子关系。
(7)相邻兄弟选择符。如h1 p {margin: 0;}，将选中紧接h1标签的p标签。
(8)伪类选择符。如a:link {color: navy;}。当前浏览器都支持的常用伪类选择符有：a:link, a:visited, a:hover, a:active, a:focus等。
4 样式优先级规则
当有多个样式应用于同一标签，就可能出现冲突，最终结果是靠样式优先级决定，优先级高的胜出。规则如下：
4.1 根据来源排序。内联样式优先于文档级样式、文档级样式优先于外部样式。
4.2 根据类排序。标签的类的属性优先于为标签总体定义的属性。如p {color: red;}，.iamblue {color: blue;}，对于＜p class=”iamblue”＞test＜/p＞，将应用上述第二个样式。
4.3 根据特殊性排序。一个具有更特殊的属性优先于一般的属性。如p#bright {color: silver;}，p {color: black;}，第一个优先于第二个。
4.4 根据顺序排序。最后定义的属性优先。如H1 {color: red;}，H1 {color: blue;}，第二个优先。
5 需要掌握的CSS重要概念
5.1 元素。元素是CSS显示的基础，HTML中的所有标签，都是元素。每个元素都被一个方框包围。有两种类型：
(1)可替换元素。其意思是元素本身并不包含实质内容，其内容在浏览器中显示时被外部内容替换。比如＜img src="myimage.gif" /＞，此img标签（元素）只是表明对外部图像文件myimage.gif的引用，在实际显示时，将被一幅图像替换。还有input标签，也是可替换元素，在实际显示时被替换为单选框、检查框、文本框等。
(2)不可替换元素。HTML标签大多数是不可替换元素。此类标签本身包含实质内容，由浏览器直接读取并显示。比如p、li、span、table等等。
5.2 元素显示样式
在CSS 2.1中，根据显示方式不同把元素分为两种：
(1)块级元素。在元素所表示的方框的前、后都与其他元素分开。就像加入回车符一样。块级元素包含p、h、div、li等。
(2)内联级元素。在元素所表示的方框前、后与其他元素没有分开。如a、strong和em标签。
可以在标签内加入display属性改变其显示方式。如：p {display: inline;}会把p标签当作内联级元素显示。
5.3 元素框
图2 CSS元素框详细模型
在图1中，最中间为块级元素内容，向外依次为填充（padding）、边框（border）、边距（margin）。在图2中，详细列出了CSS元素框模型的每个属性，中间部分的height和width对应于标签的height和width属性。
5.4 关于简写
(1)样式属性含有top、right、bottom、left。如.test { margin-top:5px; margin-right:5px; margin-bottom:5px; margin-left:5px;}，可以简写为.test {margin:5px;}。若上、下边距为5px，而左、右边距为8px; 可以简写为.test {margin:5px 8px;}，浏览器将5px、8px重复使用于Top、Right、Bottom和Left，将首字母顺序连起来就是TRBL（读作trouble易于记忆）。
(2)颜色缩写。完整颜色表示应该为6个16进制数，但也可以使用三个16进制数字表示。如：#F0F表示FF00FF
6 浮动与定位应用方法
浮动与定位是利用CSS进行网页布局的基础，功能非常强大，也非常方便，我们只需要利用div、float、position就可以完全替代传统的表格布局方式并提供更多的控制选项。表格布局有其先天的缺陷，就是浏览器必须全部读出表格内容后才能显示，当有多个复杂的表格进行嵌套时，打开网页的速度将显著受到影响。再有就是调整一个表格单元时，经常会影响到其他表格单元，当一个网页含有大量表格时，网页就变得难以调整和维护。而利用CSS进行布局，就没有这些烦恼，你可以精确控制每个网页元素的位置和大小，你只需更改几个样式属性值就会使网页焕然一新。
6.1 浮动（float）
可以把浮动元素看作处于一个单独的层，不属于正常的文档流。Float属性值有：left、 right、none、inherit。可以应用于任何标签。如＜img src="b4.gif" style="float: left;"＞会把b4.gif图像浮动到左边，其后面的文本将从图像的右边和下边显示。当一个网页包含多个浮动元素时，可能会造成重叠，这时我们可以使用clear属性，如h1 {clear: both;}，会阻止任何浮动元素覆盖h1元素。
6.2 定位（position）
定位的含义很简单，就是表明元素框的显示位置在哪里，有四种定位方式。
(1)static，静态定位。元素框按正常方式显示。对于块级元素，其元素框属于正常文档流，对于内联级元素，其元素框显示在包含它的块中。
(2)relative，相对定位。元素框被偏移一定的距离，元素保持其原有形状和所占用的空间。
(3)absolute，绝对定位。元素框不属于正常文档流，其定位的基准是包含它的块。元素框在正常文档流中的占用空间被关闭，好像该元素不存在一样，无论该元素本身是块级还是内联级，都会产生块级元素框。
(4)fixed，固定定位。除了包含它的元素只能为视口（浏览器的窗口）外，其他表现和absolute一样。利用此属性可以产生类似frame的效果。
7 结束语
本文结合实例对CSS进行了简明扼要的介绍，展现了CSS在网页设计中灵活、强大的功能，可以看到，在网页中使用CSS能达到三个目的：一是优化网页结构，显著减小网页文件的大小，使得网页浏览速度更快。二是网页的布局和样式的调整都可以在CSS文件中进行，不需要改动每个HTML文件，这对于维护一个大型网站很重要，能为网站维护人员节省大量时间和精力。三是轻松设计具有复杂布局的网页，使网页更美观。
参考文献：
[1]W3C.Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification[EB/OL] .http://www.w3.org/TR/CSS21/.
[2]Eric Meyer.Cascading Style Sheets[M].2nd Edition.USA:O’Reilly,2004.10-452.
[3]技桥译.HTML与XHTML权威指南[M].第5版.北京:清华大学出版社,2003.33-199.