0 Comments

CSS样式表高效使用八大秘诀(2)

发布于:2013-08-05  |   作者:广州网站建设  |   已聚集:人围观
6、给指定内容加边框

 

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


  1. styletype="text/css"〉  
  2. 〈!--  
  3. .style1{border:solid;  
  4. border-width:thin0px0pxmedium;  
  5. border-color:#0000FFblackblack#00FF00}  
  6. --〉  
  7. 〈/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就是所加载的背景图象):


  1. styletype="text/css"〉  
  2. 〈!--  
  3. .txbgstyle{background-image:url(test.gif)}  
  4. --〉  
  5. 〈/style〉  
  6.  
飞机