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