以下是一组CSS链接样式代码，用html演示和解释：
<!DOCTYPE html>
<html>
<head>
<style>
/* 初始链接样式 */
a:link {
color: #0077cc;
text-decoration: none;
border-bottom: 1px dotted #0077cc;
}
/* 已访问链接样式 */
a:visited {
color: #660099;
text-decoration: none;
border-bottom: 1px dotted #660099;
}
/* 鼠标悬浮链接样式 */
a:hover {
color: #ff6600;
text-decoration: none;
border-bottom: 1px dotted #ff6600;
}
/* 激活链接样式 */
a:active {
color: #cc0000 ;
text-decoration: none;
border-bottom: 1px dotted #cc0000;
}
</style>
</head>
<body>
<h1>CSS链接样式演示</h1>
<p>请点击以下链接：</p>
<ul>
<li><a href="#">未访问链接</a></li>
<li><a href="#">未访问链接</a></li>
<li><a href="#">未访问链接</a></li>
<li><a href="#">未访问链接</a></li>
</ul>
</body>
</html>代码解释：
在`head`标签内，我们定义了四种链接状态的样式：
1. `a:link`：用于设置未访问链接的样式。
2. `a:visited`：用于设置已访问链接的样式。
3. `a:hover`：用于设置鼠标悬停时链接的样式。
4. `a:visited`：用于设置当前活动链接的样式。
在`body`标签内，我们创建了一个链接列表，用于演示上述链接样式。每个链接均使用相同的`<a>`标记，在`href`属性中指定链接的URL。其中`<li>`标记用于创建具有项目符号的列表。
以上就是这组CSS链接样式代码的演示和说明。这些样式的目的是为了美化链接并提供更好的用户体验。