1、整个网站只有一种超链接样式的实例，代码如下。大家可以将以下代码拷贝到dreamweaver软件进行体会学习。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS超链接样式</title>
<style type="text/css">
a{
color:#0000FF;
text-decoration:none;} /* 未被访问的链接为蓝色，没有下划线*/
a:visited{
color:#00FF00;
text-decoration:underline;} /* 鼠标单击过后，链接为绿色，有下划线*/
a:hover{
color:#FF0000;
text-decoration:underline} /* 鼠标经过时，链接为红色，有下划线*/
</style>
</head>
<body>
<a href="http://www.ittribalwo.com" target="_blank">IT部落窝</a>
</body>
</html>
2、网站内有多种不同链接样式的CSS实例，代码如下。通过这样的设置可以控制链接内的css类名为“yangshi”超链接的样式。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS超链接样式</title>
<style type="text/css">
a{
color:#0000FF;
text-decoration:none;} /* 未被访问的链接为蓝色，没有下划线*/
a.yangshi{
color:#0000FF;
text-decoration:none;} /* 未被访问的链接为蓝色，没有下划线*/
a:hover{
color:#FF0000;
text-decoration:underline} /* 鼠标经过时，链接为红色，有下划线*/
a.yangshi:hover{
color:#FF0000;
display: inline;
background-color: #00FF00;} /* 鼠标经过时，链接为红色，区块显示为内嵌，背景颜色为绿色。*/
</style>
</head>
<body>
<a href="http://www.ittribalwo.com" target="_blank">IT部落窝</a>
<p>
<a class="yangshi" href="http://www.ittribalwo.com" target="_blank">IT部落窝</a>
</body>
</html>
