您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

CSS入门：link链接样式和4种状态的详解

时间：02-02来源：作者：点击数：

前言

我们在之前 HTML 基础 提到了，<a> 标签是一个超链接标签，它在不添加样式时，<a> 标签的默认外观包括以下特点：

  • 文本颜色：通常是浏览器默认的蓝色，表示链接状态下的文本颜色。
  • 下划线：链接文本会默认显示下划线，表示它是一个可点击的链接。
  • 光标样式：当鼠标悬停在链接上时，光标通常会变为手型指示点击状态。
  • 访问后的样式：当鼠标点击过过链接时，是紫色。

那如果这些默认的样式，不符合设计稿要求，能不能修改呢？当然能。本文，就说一下这个。

样式属性

<a> 标签可以使用任何 CSS 属性，比如以下几个常用的：

好，那我们看代码吧。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Link Styles</title>
    <style>
      .box {
        margin: 60px 0px;
      }
      /* 链接样式 */
      a {
        margin: 60px 20px 10px 10px;
        padding: 15px 10px;
        border-radius: 5px;
        color: #333; /* 默认链接颜色 */
      }

      /* 额外的链接样式 */
      .blue {
        color: #007bff; /* 蓝色链接颜色 */
        font-weight: bold; /* 加粗字体 */
      }

      .underline {
        text-decoration: none; /* 移除下划线 */
      }

      .italic {
        font-style: italic; /* 斜体字体 */
        border: 1px solid #000;
      }

      .pink-background {
        background-color: #ffc0cb; /* 粉色背景颜色 */
      }
    </style>
  </head>
  <body>
    <div class="box">
      <!-- Example Links -->
      <a href="#" class="blue">Blue Bold Link</a>
      <a href="#" class="underline">没有下划线的链接</a>
      <a href="#" class="italic">Italic Link</a>
      <a href="#" class="pink-background">Pink Background Link</a>
      <a href="#">Default Link</a>
    </div>
  </body>
</html>

效果如下：

图片

伪类选择器

伪类选择器是 CSS 中一种特殊的选择器，用于选择元素的特定状态或者位置。它们以冒号（:）开头，放置在元素选择器的后面，用于指定元素在特定情况下的样式。

对于 <a> 标签的伪类选择器，常见的有以下几种：

  • :link：表示链接的默认状态，即未访问过的链接，这个不写也可以。因为 a:link 是 CSS 中用于选择链接在未被访问时的状态，而默认情况下链接的样式即为未被访问状态。因此，如果你不写 a:link，浏览器也会自动应用链接的默认样式。
  • :visited：表示链接已经访问过的状态。
  • :hover：表示鼠标悬停在链接上时的状态。比较常用。比如这个淘宝的，我圈的这些网页块，放上去都会有主题橙黄色。你可以试试。这个就是 hover。
图片
  • :active：表示链接被激活时的状态，通常是鼠标点击链接但还未释放时的状态。

下面是一个示例 HTML 代码，演示了如何使用这些伪类选择器：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Link Pseudo-classes Example</title>
    <style>
      /* 默认链接样式，不写:link也可以 */
      a {
        color: #00f;
        text-decoration: none;
      }

      /* 访问过的链接样式 */
      a:visited {
        color: #da2cdd;
      }

      /* 鼠标悬停链接样式 */
      a:hover {
        color: #f00;
        text-decoration: underline;
      }

      /* 激活链接样式 */
      a:active {
        color: #0f0;
      }
    </style>
  </head>
  <body>
    <!-- 示例链接 -->
    <a href="#">我是链接</a>
  </body>
</html>

在这个示例中，链接的默认状态是蓝色且没有下划线，访问过后变为紫色，鼠标悬停时变为红色且有下划线，激活时变为绿色。这些样式通过伪类选择器实现了对链接不同状态的控制。

接下来呢，因为 hover 比较常用，这里演示几个 a 标签的 hover 效果，也许你项目里会用的上。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      a.txtlink-1 {
        font-size: 25px;
        color: #333333;
        border-bottom: 2px solid #333333;
      }

      a.txtlink-1:hover {
        color: #25b6e6;
        border-bottom: 2px solid #25b6e6;
      }

      a.txtlink-2 {
        font-size: 25px;
        text-decoration: none;
        color: #008000;
        border-bottom: 0px;
        margin-left: 30px;
      }

      a.txtlink-2:hover {
        text-decoration: none;
        color: #008000;
        border-bottom: 2px solid #008000;
      }

      a.button-1 {
        color: #000000;
        border: 2px solid #4caf50;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin-left: 30px;
        margin-top: 20px;
      }

      .button-1:hover {
        background-color: #4caf50;
        color: #ffffff;
      }

      a.button-2 {
        display: inline-block;
        background-color: #11b247;
        color: #ffffff;
        padding: 14px 25px;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        margin-left: 20px;
        opacity: 0.9;
        border: 0px;
      }

      a.button-2:hover {
        color: #ffffff;
        background-color: #05d44a;
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <a href="#" class="txtlink-1">文本链接1</a>
    <a href="#" class="txtlink-2">文本链接2</a>
    <a href="#" class="button-1">链接按钮1</a>
    <a href="#" class="button-2">链接按钮2</a>
  </body>
</html>

效果如下：

图片

ok，本文完。

后台回复“前端工具”可获取开发工具，持续更新中

后台回复“前端基础题”可得到前端基础100题汇总，持续更新中

后台回复“前端电子书”可获取20+本精选电子书

前言

我们在之前 HTML 基础 提到了，<a> 标签是一个超链接标签，它在不添加样式时，<a> 标签的默认外观包括以下特点：

  • 文本颜色：通常是浏览器默认的蓝色，表示链接状态下的文本颜色。
  • 下划线：链接文本会默认显示下划线，表示它是一个可点击的链接。
  • 光标样式：当鼠标悬停在链接上时，光标通常会变为手型指示点击状态。
  • 访问后的样式：当鼠标点击过过链接时，是紫色。

那如果这些默认的样式，不符合设计稿要求，能不能修改呢？当然能。本文，就说一下这个。

样式属性

<a> 标签可以使用任何 CSS 属性，比如以下几个常用的：

好，那我们看代码吧。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Link Styles</title>
    <style>
      .box {
        margin: 60px 0px;
      }
      /* 链接样式 */
      a {
        margin: 60px 20px 10px 10px;
        padding: 15px 10px;
        border-radius: 5px;
        color: #333; /* 默认链接颜色 */
      }

      /* 额外的链接样式 */
      .blue {
        color: #007bff; /* 蓝色链接颜色 */
        font-weight: bold; /* 加粗字体 */
      }

      .underline {
        text-decoration: none; /* 移除下划线 */
      }

      .italic {
        font-style: italic; /* 斜体字体 */
        border: 1px solid #000;
      }

      .pink-background {
        background-color: #ffc0cb; /* 粉色背景颜色 */
      }
    </style>
  </head>
  <body>
    <div class="box">
      <!-- Example Links -->
      <a href="#" class="blue">Blue Bold Link</a>
      <a href="#" class="underline">没有下划线的链接</a>
      <a href="#" class="italic">Italic Link</a>
      <a href="#" class="pink-background">Pink Background Link</a>
      <a href="#">Default Link</a>
    </div>
  </body>
</html>

效果如下：

图片

伪类选择器

伪类选择器是 CSS 中一种特殊的选择器，用于选择元素的特定状态或者位置。它们以冒号（:）开头，放置在元素选择器的后面，用于指定元素在特定情况下的样式。

对于 <a> 标签的伪类选择器，常见的有以下几种：

  • :link：表示链接的默认状态，即未访问过的链接，这个不写也可以。因为 a:link 是 CSS 中用于选择链接在未被访问时的状态，而默认情况下链接的样式即为未被访问状态。因此，如果你不写 a:link，浏览器也会自动应用链接的默认样式。
  • :visited：表示链接已经访问过的状态。
  • :hover：表示鼠标悬停在链接上时的状态。比较常用。比如这个淘宝的，我圈的这些网页块，放上去都会有主题橙黄色。你可以试试。这个就是 hover。
图片
  • :active：表示链接被激活时的状态，通常是鼠标点击链接但还未释放时的状态。

下面是一个示例 HTML 代码，演示了如何使用这些伪类选择器：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Link Pseudo-classes Example</title>
    <style>
      /* 默认链接样式，不写:link也可以 */
      a {
        color: #00f;
        text-decoration: none;
      }

      /* 访问过的链接样式 */
      a:visited {
        color: #da2cdd;
      }

      /* 鼠标悬停链接样式 */
      a:hover {
        color: #f00;
        text-decoration: underline;
      }

      /* 激活链接样式 */
      a:active {
        color: #0f0;
      }
    </style>
  </head>
  <body>
    <!-- 示例链接 -->
    <a href="#">我是链接</a>
  </body>
</html>

在这个示例中，链接的默认状态是蓝色且没有下划线，访问过后变为紫色，鼠标悬停时变为红色且有下划线，激活时变为绿色。这些样式通过伪类选择器实现了对链接不同状态的控制。

接下来呢，因为 hover 比较常用，这里演示几个 a 标签的 hover 效果，也许你项目里会用的上。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      a.txtlink-1 {
        font-size: 25px;
        color: #333333;
        border-bottom: 2px solid #333333;
      }

      a.txtlink-1:hover {
        color: #25b6e6;
        border-bottom: 2px solid #25b6e6;
      }

      a.txtlink-2 {
        font-size: 25px;
        text-decoration: none;
        color: #008000;
        border-bottom: 0px;
        margin-left: 30px;
      }

      a.txtlink-2:hover {
        text-decoration: none;
        color: #008000;
        border-bottom: 2px solid #008000;
      }

      a.button-1 {
        color: #000000;
        border: 2px solid #4caf50;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin-left: 30px;
        margin-top: 20px;
      }

      .button-1:hover {
        background-color: #4caf50;
        color: #ffffff;
      }

      a.button-2 {
        display: inline-block;
        background-color: #11b247;
        color: #ffffff;
        padding: 14px 25px;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        margin-left: 20px;
        opacity: 0.9;
        border: 0px;
      }

      a.button-2:hover {
        color: #ffffff;
        background-color: #05d44a;
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <a href="#" class="txtlink-1">文本链接1</a>
    <a href="#" class="txtlink-2">文本链接2</a>
    <a href="#" class="button-1">链接按钮1</a>
    <a href="#" class="button-2">链接按钮2</a>
  </body>
</html>

效果如下：

图片
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
来顶一下
返回首页
返回首页
上一篇:前端开发人员注意！这是一个基础但「神奇」的功能！ 下一篇:css3flex布局，一图透彻解析。
推荐内容
Grid-A-Licious 基于 jQuery 响应式瀑布流插件
Grid-A-Licious 基于 		使用Windows API实现两个进程间（含窗体）的通信
使用Windows API实现
如何快速了解一个行业
如何快速了解一个行业		InDesign入门教程|半小时学会作品集排版
InDesign入门教程|半
相关内容
栏目更新
栏目热门
本栏推荐
关于我们 | 联系我们 | 用户协议 | 广告服务 | 申请链接 | 网站地图 | 版权声明 | 用户留言 | 招聘信息 | 帮助中心 | 社区讨论 | 下载服务
中国文明网传播文明
城东书院® CDSY.XYZ 版权所有 Copyright ©2019-2025 CDSY Corporation, All Rights Reserved
湘ICP备19021508号-1 公安网备案湘公网安备 43102202000103号 出版物经营许可证
※学习、工作、生活信息平台※
本网大部分资源来源于会员上传，除本网组织的资源外，版权归原作者所有，如有侵犯版权，请立刻和本网联系并提供证据，本网将在三个工作日内改正。