如何在文中出现两者或两者以上不同的超链接？

网页链接样式设置

最新推荐文章于 2025-03-26 00:22:14 发布

最新推荐文章于 2025-03-26 00:22:14 发布 · 199 阅读

文章标签：

#CSS

页面制作专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种通过CSS来设置不同状态下的链接样式的具体方法。包括未访问、已访问及鼠标悬停时链接的颜色和大小等属性。同时，展示了如何在HTML中应用这些样式。

在源代码中的<HEAD>…</HEAD>之间输入如下代码：
<style type="text/css">
A:link {
FONT-SIZE: 12px; COLOR: #ff0000; TEXT-DECORATION: none
}
A:visited {
FONT-SIZE: 12px; COLOR: #Ff0000; TEXT-DECORATION: none
}
A:hover {
FONT-SIZE: 12px; COLOR: #0000ff; TEXT-DECORATION: none
}

A.left:link {
FONT-SIZE: 12px; COLOR: #0000ff; TEXT-DECORATION: none
}
A.left:visited {
FONT-SIZE: 12px; COLOR: #0000ff; TEXT-DECORATION: none
}
A.left:hover {
FONT-SIZE: 12px; COLOR: #ff0000; TEXT-DECORATION: none
}
A.right:link {
FONT-SIZE: 12px; COLOR: #cccccc; TEXT-DECORATION: none
}
A.right:visited {
FONT-SIZE: 12px; COLOR: #cccccc; TEXT-DECORATION: none
}
A.right:hover {
FONT-SIZE: 12px; COLOR: #ff0000; TEXT-DECORATION: none
}
</style>

在源代码中的<BODY>…</BODY>之间输入如下代码：
<p><a href="www.leafbbs.com">链接样式一</a></p>
<p><a href="www.leafbbs.com" class="left">链接样式二</a></p>
<p><a href="www.leafbbs.com" class="right">链接样式三</a></p>