数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究CSS 中的标准链接样式
我们可以根据需要为链接设置样式。建议链接的样式应使其与普通文本区分开来。不同链接状态的默认链接样式如下所示：
链接状态 |
颜色 |
|---|---|
激活 |
#EE0000 |
聚焦 |
Windows 和 Mac 系统下为 #5E9ED6 或类似的蓝色阴影轮廓，Linux 系统下为 #F07746 轮廓，同时文本颜色保持不变 |
悬停 |
#0000EE |
链接 |
#0000EE |
已访问 |
#551A8B |
注意 - 以上颜色可能会随着浏览器新版本的发布而改变。为了保证正常功能，伪选择器的顺序为：:link, :visited, :hover, :active。
标准链接
以下示例说明了标准链接样式：
示例
让我们现在看看代码：
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
}
</style>
</head>
<body>
<h2>Learn JDBC</h2>
<a href="">Click here</a>
<br/><br/>
<a href="#">And here <img src="https://tutorialspoint.com/jdbc/images/jdbc-mini-logo.jpg"></a>
</body>
</html>
非标准链接
我们在这里设置了一个链接，并使用 text-decoration 属性和 none 值删除了文本修饰：
示例
让我们现在看看代码：
<!DOCTYPE html>
<html>
<head>
<style>
#one {
color: black;
text-decoration: none;
}
#two {
font-style: italic;
box-shadow: inset 0 0 8px coral;
}
table, td {
font-size: 1.4em;
padding: 8px;
text-align: center;
border: thin solid;
}
</style>
</head>
<body>
<table>
<tr>
<td><a id="one" href="#">1</a>(non standard link)</td>
<td id="two"><a href="#">2</a></td>
</tr>
<tr>
<td><a href="">3</a></td>
<td><a href="#">4</a></td>
</tr>
</table>
</body>
</html>
使用 CSS 伪类操作链接
当我们使用 <a> 元素创建链接时，可以使用各种伪类来设置链接颜色、已访问链接颜色、悬停、活动链接等。我们使用伪类实现了相同的效果：
a:link {
color: rgb(17, 0, 255);
}
a:visited {
color: rgb(128, 0, 107);
}
a:hover {
color: rgb(255, 105, 243);
}
a:active {
color: rgb(255, 153, 0);
}
示例
让我们现在看看代码：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
a {
font-size: 18px;
font-weight: bold;
}
a:link {
color: rgb(17, 0, 255);
}
a:visited {
color: rgb(128, 0, 107);
}
a:hover {
color: rgb(255, 105, 243);
}
a:active {
color: rgb(255, 153, 0);
}
</style>
</head>
<body>
<h1>Pseudo class example</h1>
<a href="#">This is some sample link text</a>
<h2>Hover, click on the above link to see the pseudo class in action</h2>
</body>
</html>
更新于: 2023-12-27
333 次浏览
广告