Css 简明教程

CSS - Links

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

Links serve to connect and navigate between one webpage and another, with CSS properties offering options to style these links in a variety of ways.

Link States

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

The idea of link states involves understanding the different states in which links might exist. Various pseudo-classes can be used to style these states.

  1. Link - A link styled with the :link pseudo class that has a destination (rather than merely being a named anchor).

  2. Visited - A link with the :visited pseudo class style that indicates it has already been visited (it is present in the browser’s history).

  3. Hover - A link styled with the :hover pseudo class that is hovered over by the user’s mouse cursor.

  4. Focus - A focused link is styled with the :focus pseudo class. It can be focused dynamically using HTMLElement.focus(), or it can be shifted to by the user using the Tab key or any comparable keyboard shortcut.

  5. Active - A link with the :active pseudo class applied when it is activated, such as when it is clicked.

Default Styles of Links

默认链接的属性

Properties of default links

  1. Links are underlined.

  2. Unvisited links are blue.

  3. Visited links are purple

  4. The mouse pointer changes to a little hand icon when you hover over a link.

  5. Focused links are visually highlighted with an outline. You can navigate to links on this page using the keyboard by pressing the tab key. On Mac, use option + tab or enable Full Keyboard Access: All controls with Ctrl + F7.

  6. Active links are styled in red. You can test this by holding down the mouse button while clicking on the link.

CSS links - Basic Example

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

The following example demonstrates the simple 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>

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

For clarity, make sure links are underlined; do not underline other items.

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

If you don’t want links to be underlined, use another highlighting technique. Add link hover and focus effects as well as unique style when links are clicked.

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

The following CSS properties can be used to modify or disable the default styles:

  1. Color for the text color.

  2. Cursor for the mouse pointer style

  3. Outline for the text outline.

CSS links- Stlying Some Links

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

The following example demonstrates the various types link states.

<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

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

By providing visual clues, integrating symbols with links especially external ones, improves user experience.

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

External links are typically indicated with a little arrow pointing out of a box, which helps users quickly determine the destination of a link.

CSS links - Including Icons

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

The following example demonstrates the usage of icons on 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 将链接转换为类似按钮的对象，藉此改善用户互动和美学吸引力。

Beyond the conventions of link styling, designers may improve user interaction and aesthetic appeal by using CSS to transform links into button-like objects.

  1. Links may blend in with other website elements with ease by using characteristics like background-color, padding, and border-radius.

  2. This makes for user experiences that are both engaging and navigational.

CSS links - Links as Buttons

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

The following example demonstrates links being styled as buttons.

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