随着互联网经济的不断发展，互联网上的专业网站、大众服务网站以及企业门户的数量都在飞速的增长，各网站的信息量也呈爆炸性增长的趋势。面对这些庞大的信息量，我们对网页中每一个栏目的增删，都会是一个很复杂的过程。为了提高网页的维护更新效率，我们可以使用款式表，来仅仅改变一个文件，就能达到同时改变几百个网页的外观，而其特性化的表现未受任何损失。为了能充分用好款式表的强大性和灵活性，笔者就怎样无效使用款式表，来谈谈本人的一些心得体会。

1、在一个网页中同时调用CSS的多种引入方式

　　在HTML中引入CSS的方式很多，例如直接插入式，使用 链接外部款式表，使用CSS"@import"导入款式表以及在内部元素中使用"STYLE"标记来定义款式表等。有网友讯问，这些引入方式能不能同时在一个网页中被调用，它们之间会不会产生混乱？其实，我们大可不必这么担心，这就是它为什么称之为“层叠款式表”的缘由，浏览器在处理网页中的款式表是按照一定的顺序来处理的，首先检查页面中能否有直接插入式CSS，如果存在就先执行它，针对本句的其它CSS就不去管它了；接着检查网页源代码中的"STYLE"标记，有就执行了；接下来再顺次检查执行"@import"导入的内部款式表和 链接的外部款式表。因此，我们完全可以在一个网页中同时调用CSS的多种引入方式。

2、快速创建CSS外连式文件

　　对于一个初接触CSS的网页设计人员来讲，要用写字板之类的编辑器，去创建一个CSS外连式文件是相当困难的。由于Dreamweaver对CSS支持的很好，用它来协助就轻松多了。具体可以这样操作：首先在纸上写好在网站的网页中可能要用到的格名称，然后在Dreamweaver的编辑窗中调出CSS面板，一个一个地定义，并在一个空白页上适当地写一点相关内容，边定义边试用，效果不满意，立即修正；全部定义好后，再用记事本创建一个空的CSS外连式文件，把在〈head〉与〈/head〉之间的那段定义好的CSS复制到CSS文件中去，就大功告成了。

3、让背景图案静止不动

　　当网页不能在一屏全部显示时，我们往往借助于水平滚动条和竖直滚动条来浏览屏幕以外的内容，挪动滚动条时普通图象和文字是一同挪动的，那么我们有没有办法使背景图象不随文字一同“滚动”呢？利用CSS就可以实现这样的目的，我们只需把下面这段源代码直接放在网页的与标签之间就可以了，其中bg.jpg就是网页中的背景图象，大家可以把它换成本人需求的背景图象：

〈style type="text/css"〉
〈!--
BODY { background: purple url(bg.jpg);
　　　 background-repeat:repeat-y;
　　　 background-attachment:fixed 　
　　　　}
--〉
〈/style〉

4、让网页自动进行“首行缩进”

　　用DreamWeaver来设计网页的用户知道，在DreamWeaver中输入空格不是那么的方便，我们可以利用css来设计“首行缩进”功用来弥补这个缺憾。打开DreamWeaver的设计界面，在该界面中找到CSS的属性定义对话框（Style Definition for .style1)，在该对话框的“Block”标签下的“text-indent”属性定义设置项中来设置“首行缩进”功用，在这里要留意的是，所谓“首行”是指每段内容的第一行，也就是直接按回车键就构成了一个新的段落。缩进最好以“em”（字符）为单位，比如：汉字编排要求每段开始缩进两个汉字，设置好的CSS如下所示：

〈style type="text/css"〉
〈!--
.style1 { text-indent: 2em}
--〉
〈/style〉

5、巧用css来设定文字的背景

　　在DreamWeaver中，如果我们需求给文字加上不同的背景颜色时，操作上很简单，只需用鼠标单击属性面板上的文字颜色按钮，从弹出的颜色设置栏中选择需求的颜色就可以了。但如果我们要给部分文字加不同的背景色，该怎样操作呢？由于DreamWeaver3中没有这方面的功用，但我们可以巧妙利用css来实现这样的目的。具体操作过程是，首先我们可以先做一个定义背景色的CSS，例如给这个css命名为bjstyle，接着在网页中选中需求设置颜色的文字，然后在工具栏中单击一下“bjstyle”就行了。下面就是一个定义颜色背景的CSS的源代码：

〈style type="text/css"〉
〈!--
.bjstyle { background: #cc00bb}
--〉
〈/style〉

6、给指定内容加边框

　　在DreamWeaver中，我们可以利用CSS强大的定义功用来给某部分内容加边框，定义时首先打开DreamWeaver的设计界面，在该界面中找到CSS的属性定义对话框（Style Definition for .style1)，该对话框的“Border”设置项就是用来定义指定内容边框线的，其中“top”、“bottom”、“left”、“right”设置栏是分别用来定义指定内容四周边框线的粗细和颜色的，这些设置项设置好后还需求在下面的“Style”中定义线型，否则我们将看不到定义的边框线，由于css默认的线型是“none”。下面是一个定义了上边框为：蓝色细线；左边框为：绿色中粗线的CSS源代码：

〈style type="text/css"〉
〈!--
.style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00}
--〉
〈/style〉

7、用款式表来控制超级链接的颜色

　　如果你细心研讨一下超级链接，你就会发现，浏览器处理超级链接的默认方式是，对于目前还没有访问过的超级链接是用蓝色且带有下划线的文字来显示的，对于曾经访问过的超级链接则是用深紫色且带有深紫色的下划线的文字来显示的。这些默认的设置颜色看得时间，可能就产生厌倦之感，并且很有可能与本人网页的背景颜色不协调。因此我们完全可以按照本人的视觉要求，来自在更改超级链接的显示颜色，让它更能体现本人的风格。下面笔者就来引见一段修正超级链接显示颜色的源代码，代码如下：　　

　　我们可以把这段源代码添加在HTML文件的……之间，它可以对对本网页中的任何一个超级链接都起作用，其中这段代码中的：

　　A:link {text－decoration: none; color:blue}是说明了超级链接还没有被访问，它没有下划线，颜色为蓝色。

　　A:visited { color:red; text－decoration:line－through }说明了超级链接被访问后，它的颜色变成了红色，有了一根删除线。

　　A:active { color:white; text－decoration:underline }说明超级链接处于活动形状的时候，它的颜色变成了白色，有了下划线。

　　A:hover {text－decoration:none;color:＃FF0000;background－color:black}说明鼠标挪动到超级链接后，它没有下划线，文字颜色变成了黄色，背景颜色是黑色。

　　依据上面的解释，我们可以把超级链接在各种形状下的显示颜色修正成本人喜欢的那种，以便能更好地展现本人的特性。

8、给选中文字加背景图像

　　在DreamWeaver中，我们同样可以给指定文字加上背景图象，其操作过程与给指定文字加背景色操作类似，只不过是把选择背景颜色换成选择加载的背景图象就是了。其具体操作过程是，首先我们可以先做一个定义背景色的CSS，例如给这个css命名为txstyle，接着在网页中选中需求设置颜色的文字，然后在工具栏中单击一下“txstyle”就行了。下面就是一个定义背景图象的CSS的源代码（其中test.gif就是所加载的背景图象）：

〈style type="text/css"〉
〈!--
.txbgstyle { background-image: url(test.gif)}
--〉
〈/style〉