Css 简明教程

CSS - Links

链接用于连接和在不同网页之间导航，使用 CSS 属性提供了多种方式设置这些链接的样式。

Link States

链接状态的概念涉及理解链接可能存在的不同状态。可以使用各种伪类设置这些状态的样式。

  1. Link - 使用伪类 :link 设置样式的链接，该链接具有目标（而不仅仅是命名锚）。

  2. Visited - 一个链接带有 :visited 伪类样式，该样式表明它已经被访问过（它出现在浏览器的历史记录中）。

  3. Hover - 一个链接使用 :hover 伪类进行样式化，用户的鼠标光标悬停在其上。

  4. Focus - 一个获取焦点的链接使用 :focus 伪类进行样式化。可以使用 HTMLElement.focus() 或者用户可以使用 Tab 键或任何类似的键盘快捷键将焦点移至该链接。

  5. Active - 当一个链接被激活（比如被单击时）， :active 伪类会应用于该链接。

Default Styles of Links

默认链接的属性

  1. Links are underlined.

  2. Unvisited links are blue.

  3. Visited links are purple

  4. 当鼠标悬停在一个链接上时，鼠标指针会变成一个小小的手形图标。

  5. 获取焦点的链接会通过一个轮廓进行视觉突出显示。你可以按 Tab 键使用键盘在此页面上的链接之间进行导航。在 Mac 上，使用 option + tab 或者启用“完全键盘访问权限”：通过 Ctrl + F7 访问所有控件。

  6. 激活的链接使用红色进行样式化。你可以通过在单击链接时按住鼠标按钮进行测试。

CSS links - Basic Example

以下示例演示了简单的 links 。

<html>
<head>
<style>
   a {
      color: blue;
      text-decoration: none;
   }
   a:hover {
      text-decoration: underline;
   }
</style>
</head>
<body>
<a href="https://www.tutorialspoint.com/index.htm">Simple Link</a>
</body>
</html>

为了清晰起见，请确保链接有下划线；请勿给其它项目加下划线。

如果你不想在链接中加下划线，请使用其他突出显示技术。添加链接悬停和获取焦点效果，以及在单击链接时添加独特的样式。

可以使用以下 CSS 属性来修改或禁用默认样式：

  1. Color 用于文本颜色。

  2. Cursor 用于鼠标指针样式

  3. Outline 用于文本轮廓。

CSS links- Stlying Some Links

以下示例演示了各种 link 状态。

<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>

Including icons on links

通过提供视觉提示，将符号与链接（尤其是外部链接）相集成，可以改善用户体验。

外部链接通常用一个小箭头指出一个框来显示，这有助于用户快速确定链接的目的地。

CSS links - Including Icons

以下示例演示了 links 使用图标。

<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.tutorialspoint.com/css/index.htm">CSS Tutorial</a>
</li>
<li>
   <span class="external-link-icon"></span>
   <a href="https://www.tutorialspoint.com/python/index.htm">Python Tutorial</a>
</li>
<li>
   <span class="external-link-icon"></span>
   <a href="https://www.tutorialspoint.com/php/index.htm">PHP Tutorial</a>
</li>
</ul>
</body>
</html>

Links as buttons

除了链接样式惯例外，设计师还可以使用 CSS 将链接转换为类似按钮的对象，藉此改善用户互动和美学吸引力。

  1. 链接能够轻松地与其他网站元素相融合，通过使用属性，如背景颜色、内边距和边框半径。

  2. 这让用户体验既迷人又便于导航。

CSS links - Links as Buttons

以下示例展示了 links 被样式化为按钮。

<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>