HTML超级链接标记

超链接<a href=""></a>可以实现网页之间的跳转，使多个页面构成一个完整的网站

超联系的四个样式：

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */

四个样式使用的均为伪类在使用时要求四个样式以此排列，颠倒会使有的样式显示不出来

编写几个超链接

<p><a href="http://www.baidu.com">连接到百度</a></p>
<p><a href="http://www.qq.com">连接到腾讯</a></p>

设置css

设置未访问的超链接颜色为黑色，底部无下划线

设置已访问的超链接为黄色

设置鼠标移到超链接上颜色为蓝色

设置选定的超链接为红色

<style type="text/css">
a:link { color:blank; text-decoration: none; }
a:visited {color:yellow}
a:hover { color:blue}
a:active { color:red}
</style>

超链接默认为内联元素，可以通过设置display属性为block改为块级元素，以此可以设置超链接的宽高来增大点击范围

<style type="text/css">
a { display: block; height: 30px; width: 100px; line-height: 30px; text-align: center; background: #CCC; }
a:hover {color:blue; text-decoration:none;}
</style>

网页效果：

设置超链接为块级元素后可以通过设置图片背景达到按钮的效果

<style type="text/css">
a:hover { text-decoration:none; background:url(842833.jpg) no-repeat 0px 0px;}
a { display: block; height: 34px; width: 107px; line-height: 2; text-align: center; background:url(1087951.jpg) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-top: 3px; }
</style>