链接用于在一个网页和另一个网页之间连接和导航，CSS 属性提供了以各种方式设置这些链接样式的选项。
链接状态
链接状态的概念涉及理解链接可能存在的不同状态。可以使用各种伪类来设置这些状态的样式。
- Link ：link 伪类为样式的链接，具有目标（而不仅仅是命名锚点）。
- Visited ：带有 visited 伪类样式的链接，指示它已被访问过（它存在于浏览器的历史记录中）。
- Hover ：一个链接，样式为 ：hover 伪类，由用户的鼠标光标悬停在上面。
- Focus ： 焦点链接使用 ：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.qikepu.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>
Follow us on social media:
<a href="https://www.youtube.com/" target="_blank">YouTube</a>,
<a href="https://www.facebook.com/" target="_blank">Facebook</a>,
<a href="https://www.instagram.com/" target="_blank">Instagram</a>, and
<a href="https://twitter.com/" target="_blank">Twitter</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("images/external-link.png") no-repeat;
background-size: cover;
margin-right: 5px;
vertical-align: middle;
}
</style>
</head>
<body>
<h1>Explore New Tutorial</h1>
<p>Discover a world of learning, Tutorials Point, offering diverse courses from programming to personal development.</p>
<p>Expand your knowledge, sharpen your skills, and embark on your learning journey today!</p>
<ul class="links-list">
<li>
<span class="external-link-icon"></span>
<a href="https://www.qikepu.com/css/index.htm">CSS Tutorial</a>
</li>
<li>
<span class="external-link-icon"></span>
<a href="https://www.qikepu.com/python/index.htm">Python Tutorial</a>
</li>
<li>
<span class="external-link-icon"></span>
<a href="https://www.qikepu.com/php/index.htm">PHP Tutorial</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>
