超级链接小技巧
互连网上的超级链接犹如过江之鲫,数不胜数,只可惜大多数都是一个样子,千篇一律没有新意。那么,想不想让你的网页与众不同呢,想不想让浏览者访问过你的网站后有一种耳目一新的感觉呢?
在缺省的情况下,鼠标是一个向左上方翘起的箭头,下载页面时是一个沙漏的形状而当鼠标移动到超级链接上时则是一个手的形状,在许多Windows的应用程序中鼠标的样子可以说是千变万化,新鲜而有趣,我们的网页中一样也做到了这一点。先看一个例子:
现在许多网站上都有“帮助”这样一个链接,目的是让浏览者更好的浏览网站,当我们让浏览者把鼠标移动到帮助链接的时候,鼠标指针就会变成表示帮助的左上方箭头加上一个问号的形状,下面是代码:
<a style=″cursor:help″ href=help.htm>帮助</a>
结构如下:<target style= ″attribute1:value1;attribute2:value2;…″>
在这里属性是cursor(光标),属性值是help。借助不同的属性值光标还会有很多的形状:当属性值为text的时候,鼠标会变成一个“I”形;当属性值为move的时候是一个带四方箭头的十字形;属性值为hand时是一个手形;属性值为crosshair表示十字形;属性值为e-resize表示向右箭头;属性值为ne-resize则表示向右上方箭头;属性值为nw-resize表示向左上方箭头;属性值为n-resize表示向上方箭头;属性值为se-resize表示向右下方箭头;属性值为Wait表示沙漏。
Web页默认的链接方式(未访问过的链接是蓝色文字带蓝色的下划线,访问过的超级链接变为深紫色的文字带深紫色的下划线)千篇一律,并且很有可能与你的背景色不搭配。下面介绍一下超级链接标签<a>在CSS方面的一些比较常见的应用,代码如下:
在HTML文件的<head>……</head>之间加入
<style type=“text/css”>
<!--
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:yellow;background-color:black}
-->
</style>
这里……说明是内嵌式的网页样式表单,它一般在<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}说明鼠标移动到超级链接后,它没有下划线,文字颜色变成了黄色,背景颜色是黑色。
采取以上的办法你就可以随心所欲控制你的链接了,而你的主页是不是也有了自己的风格呢?