链接用于在一个网页与另一个网页之间进行连接和导航，CSS 属性提供了以多种方式设置这些链接样式的选项。
链接状态
链接的概念状态涉及理解链接可能存在的不同状态。可以使用各种伪类来设置这些状态的样式。
link - 使用 :link 具有目的地的伪类（而不仅仅是命名锚点）。
Visited - 带有 :visited 伪类样式，表示它已经被访问过（它存在于浏览器的历史记录中）。
Hover - 使用 :hover 伪类设计的链接，用户的鼠标光标悬停在其上.
forcus - 焦点链接的样式采用 :focus 伪样式班级。它可以使用 HTMLElement.focus() 动态聚焦，也可以由用户使用 Tab 键或任何类似的键盘快捷键切换到。
Active - 带有以下内容的链接:active 伪类在激活时应用，例如单击时。
链接的默认样式
默认链接的属性
链接带有下划线。
未访问的链接为蓝色。
已访问的链接为紫色
鼠标指针变为当您将鼠标悬停在链接上时，会有一个小手形图标。
聚焦的链接会以轮廓在视觉上突出显示。您可以使用键盘按 Tab 键导航到此页面上的链接。在 Mac 上，使用 option + tab 或启用全键盘访问:使用 Ctrl + F7 的所有控件。
活动链接的样式为红色。您可以通过按住鼠标按钮并单击链接来进行测试。
CSS 链接: 基本示例
以下示例演示了简单的链接.
<html>
<head>
<style>
a {
color: blue;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<a href="https://www.yxjc123.com/index.htm">Simple Link</a>
</body>
</html> 为清楚起见，请确保链接带有下划线；不要给其他项目加下划线。
如果您不希望链接加下划线，请使用另一种突出显示技术。添加链接悬停和焦点效果以及单击链接时的独特样式。
以下 CSS 属性可用于修改或禁用默认样式:
CSS 链接: 设置一些链接
以下示例演示了各种类型的链接状态。
<html>
<head>
<style>
body {
width: 300px;
margin: 0 auto;
font-size: 1.2rem;
font-family: sans-serif;
}
p {
line-height: 1.4;
}
a {
outline-color: transparent;
}
a:link {
color: #007bff;
}
a:visited {
color: #800080;
}
a:focus {
text-decoration: none;
background: #bae498;
}
a:hover {
text-decoration: none;
background: #cdfeaa;
}
a:active {
background: #007bff;
color: #cdfeaa;
}
</style>
</head>
<body>
<p>
访问下面的链接
<a href="https://www.youku.com/" target="_blank">优酷</a>,
<a href="https://www.weibo.com/" target="_blank">微博</a>,
<a href="https://www.sohu.com/" target="_blank">搜狐</a>，以及
<a href="https://yxjc123.com/" target="_blank">易学教程</a>。
</p>
</body>
</html> 在链接上包含图标
通过提供视觉线索，将符号与链接（尤其是外部链接）集成，可以改善用户体验。
外部链接通常用指向的小箭头表示开箱即用，可以帮助用户快速确定链接的目的地。
CSS 链接: 包括图标
以下示例演示了链接上图标的用法。
<html>
<head>
<style>
body {
width: 80%;
margin: 0 auto;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f9f9f9;
color: #333;
}
h1 {
text-align: center;
margin-top: 30px;
}
p {
line-height: 1.6;
}
a {
color: #007bff;
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: #0056b3;
}
.links-list {
margin-top: 20px;
list-style-type: none;
padding-left: 0;
}
.links-list li {
margin-bottom: 10px;
}
.external-link-icon {
display: inline-block;
width: 16px;
height: 16px;
background: url("/css/images/external-link.png") no-repeat;
background-size: cover;
margin-right: 5px;
vertical-align: middle;
}
</style>
</head>
<body>
<h1>易学教程</h1>
<p>欢迎来到我的网站</p>
<p>学习这些技术教程</p>
<ul class="links-list">
<li>
<span class="external-link-icon"></span>
<a href="https://www.yxjc123.com/post/dj4dmq">html 教程</a>
</li>
<li>
<span class="external-link-icon"></span>
<a href="https://www.yxjc123.com/post/yubkb7">Python 教程</a>
</li>
<li>
<span class="external-link-icon"></span>
<a href="https://www.yxjc123.com/post/vnj3gb">PHP 教程</a>
</li>
</ul>
</body>
</html> 链接作为按钮
超越链接样式的惯例，设计者可以通过使用 CSS 将链接转换为类似按钮的对象来改善用户交互和审美吸引力。
链接可以通过使用背景颜色、填充和边框半径等特征轻松地与其他网站元素混合。
这使得以获得既有吸引力又具有导航性的用户体验。
CSS 链接: 链接作为按钮
以下示例演示了将链接样式设置为按钮。
<html>
<head>
<style>
body,
html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
gap: 10px;
justify-content: center;
margin-top: 20px;
}
.btn-link {
flex: 1;
text-decoration: none;
outline-color: transparent;
text-align: center;
line-height: 3;
color: white;
background-color: #007bff;
border: 1px solid #007bff;
border-radius: 5px;
transition: background-color 0.3s ease;
padding: 10px 20px;
margin: 0 5px;
}
.btn-link:hover {
background-color: #0056b3;
}
.btn-link:active {
background-color: #003366;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 20px 0;
}
h1 {
margin: 0;
}
p {
margin-top: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Welcome to Demo Website</h1>
</header>
<nav class="container">
<a href="#" class="btn-link">Home</a>
<a href="#" class="btn-link">Technologies</a>
<a href="#" class="btn-link">Services</a>
<a href="#" class="btn-link">Gallery</a>
<a href="#" class="btn-link">Contact Us</a>
</nav>
<p>This is a demonstration website showcasing various features.</p>
</body>
</html>