a:visited {
color: #666;
}
a:hover {
color: #f00;
text-decoration: underline;
}
a:active {
color: #0f0;
}
二、基础链接样式的设置
1. 文本颜色
通过设置
color
属性，您可以改变链接的文本颜色。例如，将所有未访问链接的文本颜色设置为深灰色：
a:link {
color: #333;
}
2. 移除下划线
默认情况下，链接会有下划线。如果希望去掉下划线，可以使用
text-decoration
属性：
a:link {
text-decoration: none;
}
3. 改变字体大小
使用
font-size
属性可以改变链接的字体大小：
a:link {
font-size: 18px;
}
三、使用伪类组合实现更复杂的样式
1. 渐变色悬停效果
通过组合伪类选择器和
background-color
属性，可以实现渐变色悬停效果：
a:link {
background-color: #f0f0f0;
color: red;
}
a:hover {
background-color: #f00;
}
2. 激活状态下的链接
当链接被点击时，可以给它添加一个特殊的背景色：
a:active {
background-color: yellow;
}
四、创意链接样式示例
1. 动画过渡
使用CSS过渡（
transition
）属性可以为链接添加平滑的样式变化效果：
a:link {
color: #333;
transition: color 0.3s ease;
}
a:hover {
color: #f00;
}
2. 圆形链接
利用
border-radius
属性，可以为链接创建圆形效果：
a:link {
border-radius: 50%;
padding: 10px 20px;
}
五、总结
掌握CSS链接样式是网页设计中不可或缺的技能。通过本文的介绍，相信您已经对CSS链接样式有了更深入的了解。在设计和开发网站时，灵活运用这些技巧，将有助于提升用户体验和网站的专业形象。