CSS 链接:Link

文章目录

  • CSS 链接
  • 链接样式
  • 常见的链接样式
  • 文本修饰
  • 背景颜色
  • 案例
    • 1,添加不同样式的超链接
    • 2,高级 - 创建链接框


CSS 链接

CSS可以用来设置链接的样式,包括未访问的链接(a:link)、已访问的链接(a:visited)、鼠标悬停在链接上时(a:hover)和链接被点击时(a:active)这四种状态。

以下是一个例子:

/* 未被访问的链接 */
a:link {
  color: red;
}

/* 已被访问的链接 */
a:visited {
  color: green;
}

/* 将鼠标悬停在链接上 */
a:hover {
  color: hotpink;
}

/* 被选择的链接 */
a:active {
  color: blue;
}

这段代码设置了链接的四种状态的样式,可以根据需求改变颜色值。链接颜色从正常未被访问的红色变为已被访问的绿色,当鼠标悬停在链接上时变为hotpink,最后在链接被点击时变为蓝色。

需要注意的是,这四种状态的样式设置顺序是有规定的,a:active必须在a:hover之后,而a:hover又必须在a:link和a:visited之后。这样才能保证当鼠标点击链接时,显示的样式是最后定义的样式。

链接样式

在CSS中,可以通过伪类选择器来设置链接的样式,包括未访问的链接(a:link)、已访问的链接(a:visited)、鼠标悬停在链接上时(a:hover)和链接被点击时(a:active)这四种状态。

以下是一个例子:

/* 未被访问的链接 */
a:link {
  color: #0080ff; /* 蓝色 */
}

/* 已被访问的链接 */
a:visited {
  color: #804000; /* 棕色 */
}

/* 将鼠标悬停在链接上 */
a:hover {
  color: #ff0000; /* 红色 */
}

/* 被选择的链接 */
a:active {
  color: #00ff00; /* 绿色 */
}

在这个例子中,四种状态的样式都被设置了,具体效果可以参考颜色代码对应的颜色。链接默认的颜色是蓝色,已被访问的链接是棕色,鼠标悬停时变为红色,被点击时变为绿色。

常见的链接样式

以下是一些常见的链接样式:

  1. 未被访问的链接:通常使用蓝色或黑色文本表示,当用户将鼠标悬停在链接上时,链接的颜色可能会变深或变亮,以提示用户该链接还未被访问过。
  2. 已被访问的链接:通常使用红色或橙色文本表示,以提示用户该链接已经被访问过。
  3. 鼠标悬停在链接上时:通常使用紫色的文本表示,以提示用户鼠标当前正悬停在链接上。
  4. 链接被点击时:通常会改变链接的颜色,以表明该链接已被用户点击或选择。

除了颜色上的变化,还可以通过CSS中的伪类选择器来定义链接在不同状态下的样式,包括字体、背景、边框等方面。

文本修饰

链接的文本修饰可以通过以下CSS伪类来实现:

  1. a:link - 未访问的链接。可以设置文本颜色、下划线等。
  2. a:visited - 访问过的链接。可以设置文本颜色、下划线等。
  3. a:hover - 鼠标悬停在链接上。可以设置文本颜色、下划线、字体大小、背景颜色等。
  4. a:active - 点击链接时。可以设置文本颜色、下划线等。

例如,以下代码将未访问的链接文本颜色设置为红色,删除下划线;访问过的链接文本颜色设置为绿色,添加下划线;鼠标悬停在链接上时文本颜色设置为黄色,添加下划线;点击链接时文本颜色设置为蓝色,删除下划线。

a:link {
  color: red;
  text-decoration: none;
}

a:visited {
  color: green;
  text-decoration: underline;
}

a:hover {
  color: yellow;
  text-decoration: underline;
}

a:active {
  color: blue;
  text-decoration: none;
}

注意:以上代码中颜色值可以是英文、十六进制或RGB,text-decoration包括none(无装饰)、underline(下划线)、overline(上划线)和line-through(删除线)。

背景颜色

链接的背景颜色可以使用CSS的伪类选择器来实现,具体的代码如下:

a:link, a:visited, a:hover, a:active {
  background-color: #ffffff; /* 白色背景 */
}

a:active {
  background-color: #f00; /* 红色背景 */
}

在这个例子中,链接在未访问、已访问、鼠标悬停和点击时的背景颜色都是白色,只有在点击链接时背景颜色才变为红色。需要注意的是,在设置背景颜色时要确保样式的格式和缩进不受影响,可以使用pre标签来包含代码。

案例

1,添加不同样式的超链接

例如,以下代码将未访问的链接文本颜色设置为红色,访问过的链接文本颜色设置为绿色,鼠标悬停在链接上时文本颜色设置为黄色,点击链接时文本颜色设置为蓝色:

a:link {
  color: red;
}

a:visited {
  color: green;
}

a:hover {
  color: yellow;
}

a:active {
  color: blue;
}

此外,可以使用CSS中的其他属性来设置链接的字体、背景、边框等,例如:

a:link {
  font-weight: bold; /* 加粗字体 */
  background-color: #f0f0f0; /* 灰色背景 */
}

a:visited {
  font-style: italic; /* 斜体字体 */
  border-bottom: 2px solid #000; /* 底部边框 */
}

a:hover {
  text-decoration: underline; /* 下划线 */
  cursor: pointer; /* 鼠标指针 */
}

a:active {
  font-size: 14px; /* 字体大小 */
  background-color: #fff; /* 白色背景 */
}

需要注意的是,以上代码中颜色值可以是英文、十六进制或RGB,text-decoration包括none(无装饰)、underline(下划线)、overline(上划线)和line-through(删除线)。

2,高级 - 创建链接框

若您想要创建一个链接框,您可以使用HTML和CSS来实现。下面是一个简单的示例代码,它创建了一个链接框,当用户点击链接时,会跳转到指定的网页。

DOCTYPE html>
<html>
<head>
  <style>
    .link-box {
      display: inline-block;
      border: 1px solid #ccc;
      padding: 10px;
      background-color: #f5f5f5;
      text-decoration: none;
      color: #333;
    }

    .link-box:hover {
      background-color: #e5e5e5;
    }
  style>
head>
<body>
  <a href="https://www.csdn.net" class="link-box">
    点击这里访问示例网站
  a>
body>
html>
点击这里访问示例网站

效果如下:
CSS 链接:Link_第1张图片

在上面的代码中,使用元素创建了一个链接,并设置了href属性为要跳转的网页URL。然后,使用CSS样式来设置链接框的外观。.link-box类定义了链接框的样式,包括边框、背景颜色和文字样式。.link-box:hover类定义了鼠标悬停在链接框上时的样式,这里只是改变了背景颜色。

可以根据需要调整CSS样式,例如更改边框颜色、字体大小等。请确保将实际的网页URL替换为您想要跳转的网址。

你可能感兴趣的:(CSS,css,前端,link,链接)