样式表经典使用技法六招

Author: 雪花飘飘 Date: 2001年 10期

为了能帮助各位网友更高效地使用CSS，设计出更漂亮的网页，下面笔者就把自己在使用CSS中的一些小经验整理出来，希望这些内容能起到抛砖引玉的作用。
　　#1    巧用CSS来设定文字的背景
　　    如何给部分文字加不同的背景色？由于Dreamweaver中没有这方面的功能，但我们可以巧妙利用CSS来实现这样的目的。具体操作过程是，首先我们可以先做一个定义背景色的CSS，例如给这个CSS命名为bjstyle，接着在网页中选中需要设置颜色的文字，然后在工具栏中单击一下“bjstyle”就行了。下面就是一个定义颜色背景的CSS的源代码：
　　    <style type=“text/css”>
　　    
　　    </style>
　　#1    用样式表来控制超链接的颜色
　　    浏览器处理超链接的默认方式太显单调，并且很有可能与自己网页的背景颜色不协调。因此我们完全可以按照自己的视觉要求，来自由更改超级链接的显示颜色，让它更能体现自己的风格。下面笔者就来介绍一段修改超级链接显示颜色的源代码，代码如下：
　　    <style type=“text/css”>
　　    
　　    </style>
　　    我们可以把这段源代码添加在HTML文件的<head>与</head>之间。它可以对对本网页中的任何一个超级链接都起作用，其中这段代码中的：
　　    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}说明鼠标移动到超级链接后，它没有下划线，文字颜色变成了黄色，背景颜色是黑色。
　　    根据上面的解释，我们可以把超级链接在各种状态下的显示颜色修改成自己喜欢的那种，以便能更好地展示自己的个性。
　　#1    让网页自动进行“首行缩进”
　　    用Dreamweaver来设计网页的用户知道，在Dreamweaver中输入空格不是那么方便，我们可以利用CSS来设计“首行缩进”功能来弥补这个缺陷。打开Dreamweaver的设计界面，在该界面中找到CSS的属性定义对话框（Style Definition for .style1），在该对话框的“Block”标签下的“text-indent”属性定义设置项中来设置“首行缩进”功能，在这里要注意的是，所谓“首行”是指每段内容的第一行，也就是直接按回车键就形成了一个新的段落。缩进最好以“em”（字符）为单位，比如：汉字编排要求每段开始缩进两个汉字，设置好的CSS如下所示：
　　    <style type=“text/css”>
　　    
　　    </style>
　　#1    给选中文字加背景图像
　　    在DreamWeaver中，我们同样可以给指定文字加上背景图像，其操作过程与给指定文字加背景色操作类似，只不过是把选择背景颜色换成选择加载的背景图像就是了。其具体操作过程是，首先我们可以做一个定义背景色的CSS，例如给这个css命名为txstyle，接着在网页中选中需要设置颜色的文字，然后在工具栏中单击一下“txstyle”就行了。下面就是一个定义背景图像的CSS的源代码（其中test.gif就是所加载的背景图像）：
　　    <style type=“text/css”>
　　    
　　    </style>
　　#1    让背景图案静止不动
　　    当网页不能在一屏全部显示时，我们往往借助于水平滚动条和竖直滚动条来浏览屏幕以外的内容，移动滚动条时一般图像和文字是一起移动的，那么我们有没有办法使背景图像不随文字一起“滚动”呢？利用CSS就可以实现这样的目的，我们只要把下面这段源代码直接放在网页的<head>与</head>标签之间就可以了，其中bg.jpg就是网页中的背景图像，大家可以把它换成自己需要的背景图像：
　　    <style type=“text/css”>
　　    
　　    </style>
　　#1    给指定内容加边框
　　    在DreamWeaver中，我们可以利用CSS强大的定义功能来给某部分内容加边框，定义时首先打开DreamWeaver的设计界面，在该界面中找到CSS的属性定义对话框（Style Definition for Style1），该对话框的“Border”设置项就是用来定义指定内容边框线的，其中“top”、“bottom”、“left”、“right”设置栏是分别用来定义指定内容四周边框线的粗细和颜色的，这些设置项设置好后还需要在下面的“Style”中定义线型，否则我们将看不到定义的边框线，因为CSS默认的线型是“none”。下面是一个定义了上边框为：蓝色细线；左边框为：绿色中粗线的CSS源代码：
　　    <style type=“text/css”>
　　    
　　    </style>??