CSS 链接-之路教程

文字装饰text-decoration

我们还记得我们创建链接时，默认情况下它带有下划线。
当我们想要删除它时，我们必须使用 text-decoration 属性。

使用 text-decoration 属性设置链接样式的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:link {
        text-decoration: none;
      }
      a:visited {
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
      a:active {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <a href="#"> This is some link.</a>
  </body>
</html>

让我们解释一下我们代码的含义。

在这里你可以看到我们的链接在它的第一个和第二个状态将没有下划线。
当用户将鼠标悬停在该链接上以及此时单击链接时，该链接会带有下划线。

我们可以使用编辑器或者我们的在线编辑器在浏览器中查看它，单击此处并转到编辑器页面。

这些样式可以写在 <head> 部分或者用于网页的 CSS 文件中。

背景颜色background-color

如果我们希望我们的链接带有背景，我们该怎么办？

我们只需要给一个带有背景颜色属性的样式。

例如，我们的链接将带有灰色背景，在悬停时，它将是#1c87c9.

当第一个 (a:link) 和第二个 (a:visited) 状态具有相同的背景颜色时，我们可以只写 a.

使用 background-color 属性设置链接样式的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        background-color: #555555;
      }
      a:hover {
        background-color: #1c87c9;
      }
      a:active {
        background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <a href="#">This is some link.</a>
  </body>
</html>

我们可以使用颜色选择器选择我们喜欢的颜色。

颜色color

我们用于链接颜色的颜色属性。

例如，当我们希望我们的链接为黑色并在其第三个状态（a：悬停）下为 #1c87c9 时，我们需要编写以下内容：

使用 color 属性设置链接样式的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:link {
        color: #000000;
      }
      a:visited {
        color: #000000;
      }
      a:hover {
        color: #1c87c9;
      }
      a:active {
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <a href="#">This is some link.</a>
  </body>
</html>

CSS 链接

在本章中，我们将解释如何为链接赋予样式，如何使链接更美观。

链接有这四种状态：

a :link - 一个正常的、未访问的链接
a :visited - 用户已经访问过的链接
a :hover - 当用户将鼠标悬停在它上面时的链接
a :active - 单击时的链接

我们将讨论这些属性：

文字装饰
颜色
背景颜色

日期：2020-06-02 22:14:26 来源：oir作者：oir

←CSS id 和class

CSS Margin边距→