数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚学
法律学样式链接使用 CSS 处理
CSS 允许我们根据需要为链接添加样式。我们可以设置文本格式，包括添加颜色、背景、增加大小等。此外，还可以添加动画以创建令人愉悦的可视效果。
为了获得适当的功能，伪选择器的顺序为：:link、:visited、:hover、:active。
示例
以下示例说明如何使用 CSS 为链接添加样式 −
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 25px;
}
#mod {
padding: 10px;
color: darkturquoise;
border: thin solid;
background-color: lemonchiffon;
}
#mod:hover {
color: white;
box-shadow: 0 0 0 1px black;
background-color: slateblue;
}
</style>
</head>
<body>
<p>
<a href="mailto:[email protected]">Demo link</a>
</p>
<p>
<a id="mod" href="mailto:[email protected]">Modified demo link</a>
</p>
</body>
</html>输出
这样就可以得到以下输出 −
当鼠标悬停在第二个链接上时，我们会得到以下输出 −
示例
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 25px;
display: flex;
float: left;
border: thin solid;
background-color: snow;
padding: 20px;
}
body * {
border-radius: 5%;
}
#mod {
padding: 10px;
color: royalblue;
text-decoration: none;
}
#mod:hover {
box-shadow: 0 0 10px 2px black;
text-decoration: overline;
font-size: 1.2em;
}
</style>
</head>
<body>
<div>
<button><a href="#">Demo</a></button>
<a id="mod" href="#">Demo</a>
</div>
</body>
</html>输出
这样就可以得到以下输出 −
当鼠标悬停在第二个链接上时，我们会得到以下输出
更新时间：08-Jan-2020
141 次浏览
广告