CSS - 链接

链接用于在一个网页和另一个网页之间连接和导航，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>

打印本页