下面我们做一个这样的链接:未被点击时超链接文字无下划线,显示为蓝色;当鼠标在链接上时有下划线,链接文字显示为红色;当点击链接后,链接无下划线,显示为绿色。

  实现方法很简单,在源代码的<head>和<head>之间加上如下的CSS语法控制:

<style type="text/css">

   <!--

   a:link { text-decoration: none;color: blue}

   a:active { text-decoration:blink}

   a:hover { text-decoration:underline;color: red} 

   a:visited { text-decoration: none;color: green}

   --> 

   </style>

  其中:
  a:link 指正常的未被访问过的链接;
  a:active 指正在点的链接;
  a:hover 指鼠标在链接上;
  a:visited 指已经访问过的链接;
  text-decoration是文字修饰效果的意思;
  none参数表示超链接文字不显示下划线;
  underline参数表示超链接的文字有下划线



<style> 
A:visited{TEXT-DECORATION:none;COLOR:#009999} 
A:link{text-decoration:none} 
A:hover{TEXT-DECORATION:COLOR:#FF0000;FONT-WEIGHT:bold;FONT-STYLE:italic} 
A.1:link{text-decoration:none} 
A.1:visited{TEXT-DECORATION:none;COLOR:#000000} 
A.1:hover{TEXT-DECORATION:none;COLOR:#FFffff;FONT-WEIGHT:bold;FONT-STYLE:italic} 
//上面这句TEXT-DECORATION:没有赋值 
</style>

<a class="1" href=".....">adfadfas</a>


class引用自定义类时,要直接用类名,就是.后面的部分,尽管我不知道用纯数字直接去定义会不会有bug,不过,用含有字母的字串去定义应该是个好的习惯。


定义的顺序是link,visited,active,hover,为了页面的美观,一般只用link和hover就可以了







在访问一个页面的时候,我们会发现,当鼠标移动到具有超级连接的文字上的时候,有的会产生相应的下划线。然而有些网页却没有。主页超链接的下划线是如何去掉的呢?

  我们在<HEAD>...</HEAD>之间插入下面的代码。

<style>B {font-weight: 700; }

   P {padding: 5px 0px; 

     margin: 0px;

     font-family: 宋体,黑体,宋体; 

    }

   A {text-decoration: none}

   TD { font-family: 宋体,黑体,宋体; }

  </style>

  <script language="javascript">

   var contents = true;

  </script>


  更简单的方法是:

<style>

    <!--

     a {text-decoration:none}

     a:hover {color: red;text-decoration:none}

    --!>

   </style>



  下面我们在看一看效果,试着将鼠标移动到下面的超级链接上去,是不是超级链接不会产生下划线了。

3、有些网页的链接,原先没有下划线,你把鼠标指向链接处,才会出现下划线,鼠标移掉下划线就又没有了。如何实现这种效果呢?

  可用层叠样式表(CSS)来实现的,在Dreamweaver3中编辑层叠样式表不用编写代码,具体操作方法如下:

  1)在快速启动栏中点击层叠样式表按钮(就是把鼠标放上去显示“show css styles”的那个按钮),在弹出的CSS Styles面板上双击(none);

  2)此时,可看到弹出的Edit Style Sheet 面板,在该面板上按New按钮;

  3)再在弹出的New Style 面板上点取Redefine HTML Tag(重新定义HTML标记)再在Tag中选择“a”(超级链接标记)标记后按OK按钮;

  4)这时可看到弹出的Style dehinition for a 的对话框,在此对话框中可以设置超级链接的许多属性,你可以按你的意愿设置,但我们这里主要是要去掉那讨厌的下划线,所以我们在decoration 属性中选择“none”,这样就把下划线去掉了;然后我们再选择颜色为:#339966。按OK按钮返回到Edit Style Sheet 面板;

  5)在Edit Style Sheet 面板上再按New按钮;

  6)在弹出的New Style 面板上点取Use CSS Selector ,再在该面板上的selector选择框中选择“a:hover”(定义当鼠标在超级链接上时链接的属性),按OK按钮;

  7)在弹出的Style dehinition for a:hover 的对话框中,我们在decoration 属性中选择“underline”,这样就把下划线又加上了;然后我们再选择颜色为:#FF3300。按OK按钮返回到Edit Style Sheet 面板;

  8)在Edit Style Sheet 面板上再按Don按钮,至此所有设置结束,你在Dreamweaver3的源代码检视窗中将看到在<head>与</head>之间如下所示的代码:

<style type="text/css"> 


  <!-- 


  a { color: #339966; text-decoration: none} 


  a:hover { color: #FF3300; text-decoration: underline} 


  --> 


  </style>



  有了这段代码,你在该网页上的所有文字链接在浏览器中显示时没有下划线,当你把鼠标指向链接处,才会出现下划线,鼠标移掉下划线就又没有了。若你想在 其它网页中也具有这种效果,你可以用上述方法设置或更简单点,直接把这段代码复制,粘贴到<head>与</head>之间即 可。注意:若不是在a 中定义除去下划线而是在a: link中定义除去下划线,在实际使用时不能除去下划线,我是在IE4.0环境下测试的。