关于IT基础

↩ zhcn 编程语言 Web相关 JSON 非公開: CSS 链接样式（4 种）

CSS 链接样式（4 种）

链接是网站的重要组成部分，几乎每个网页都会显示很多链接，合理的链接样式设计可以为网页的外观加分。链接有四种不同的状态：已访问、活跃、悬停。 。您可以使用以下伪类选择器以不同的方式设置链接的四种状态的样式：

  • :link ：定义普通或未访问链接的样式。
  • :visited ：定义已访问链接的样式。
  • :hover ：定义鼠标经过或悬停在链接上时的样式。
  • :active ：定义单击链接时的样式。

您可以使用上面的四个伪类选择器来定义链接所需的 CSS 样式，包括颜色、字体、背景和边框，就像定义常规文本的样式一样。

注意：定义四个伪类选择器时，需要特定的顺序。一般来说， :hover应该放在:link和:visited之后， :active应该放在:hover之后。

Chrome、Firefox 和 Safari 等主流 Web 浏览器定义了一组默认的链接样式。如果链接没有专门设计样式，则浏览器将使用默认链接样式。

  • 常规链接：带下划线的蓝色文本。
  • 访问的链接：带下划线的紫色文本。
  • 单击链接时：红色下划线文本。
  • 当您行走或悬停在链接上时：链接的外观不会改变。保留先前的状态颜色。

1.：链接

您可以使用:link伪类选择器来设置常规或未访问链接的样式。示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
    </style>
</head>
<body>
    <a href=''>これはリンクです</a>
    <a href=''>別のリンクです</a>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_549”对齐=“aligncenter”宽度=“638”] 图：:link伪类选择器演示图：:link伪类选择器演示[/caption]

2.：访问过

您可以使用:visited伪类选择器设置访问过的链接的样式。示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
        a:visited {
            background: #FFFF99;
            border: 1px soild red;
            color: red;
        }
    </style>
</head>
<body>
    <a href=''>これはリンクです</a>
    <a href=''>別のリンクです</a>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_551”对齐=“aligncenter”宽度=“644”] 图：:visited 伪类选择器演示图：:visited 伪类选择器演示[/caption]

3.：悬停

:hover伪类选择器允许您定义鼠标经过或悬停在链接上时的样式。示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
        a:visited {
            background: #FFFF99;
            border: 1px solid red;
            color: red;
        }
        a:hover {
            background: #9c6ae1;
            border: 1px solid black;
            color: black;
        }
    </style>
</head>
<body>
    <a href=''>これはリンクです</a>
    <a href=''>これもリンクです</a>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_552”对齐=“aligncenter”宽度=“694”] 图：:hover伪类选择器演示图：:hover 伪类选择器演示[/caption]
4.：活跃

使用:active伪类选择器定义单击链接时的样式。示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
        a:visited {
            background: #FFFF99;
            border: 1px solid red;
            color: red;
        }
        a:hover {
            background: #9c6ae1;
            border: 1px solid black;
            color: black;
        }
        a:active {
            background: #000;
            border: 1px solid black;
            color: white;
        }
    </style>
</head>
<body>
    <a href=''>これはリンクです</a>
    <a href=''>別のリンクです</a>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_553”对齐=“aligncenter”宽度=“668”] 图：:active伪类选择器演示图：:active伪类选择器演示[/caption]
链接是网站的重要组成部分，几乎每个网页都会显示很多链接，合理的链接样式设计可以为网页的外观加分。链接有四种不同的状态：已访问、活跃、悬停。 。您可以使用以下伪类选择器以不同的方式设置链接的四种状态的样式：

  • :link ：定义普通或未访问链接的样式。
  • :visited ：定义已访问链接的样式。
  • :hover ：定义鼠标经过或悬停在链接上时的样式。
  • :active ：定义单击链接时的样式。

您可以使用上面的四个伪类选择器来定义链接所需的 CSS 样式，包括颜色、字体、背景和边框，就像定义常规文本的样式一样。

注意：定义四个伪类选择器时，需要特定的顺序。一般来说， :hover应该放在:link和:visited之后， :active应该放在:hover之后。

Chrome、Firefox 和 Safari 等主流 Web 浏览器定义了一组默认的链接样式。如果链接没有专门设计样式，则浏览器将使用默认链接样式。

  • 常规链接：带下划线的蓝色文本。
  • 访问的链接：带下划线的紫色文本。
  • 单击链接时：红色下划线文本。
  • 当您行走或悬停在链接上时：链接的外观不会改变。保留先前的状态颜色。

1.：链接

您可以使用:link伪类选择器来设置常规或未访问链接的样式。示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
    </style>
</head>
<body>
    <a href=''>これはリンクです</a>
    <a href=''>別のリンクです</a>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_549”对齐=“aligncenter”宽度=“638”] 图：:link伪类选择器演示图：:link伪类选择器演示[/caption]

2.：访问过

您可以使用:visited伪类选择器设置访问过的链接的样式。示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
        a:visited {
            background: #FFFF99;
            border: 1px soild red;
            color: red;
        }
    </style>
</head>
<body>
    <a href=''>これはリンクです</a>
    <a href=''>別のリンクです</a>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_551”对齐=“aligncenter”宽度=“644”] 图：:visited 伪类选择器演示图：:visited 伪类选择器演示[/caption]

3.：悬停

:hover伪类选择器允许您定义鼠标经过或悬停在链接上时的样式。示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
        a:visited {
            background: #FFFF99;
            border: 1px solid red;
            color: red;
        }
        a:hover {
            background: #9c6ae1;
            border: 1px solid black;
            color: black;
        }
    </style>
</head>
<body>
    <a href=''>これはリンクです</a>
    <a href=''>これもリンクです</a>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_552”对齐=“aligncenter”宽度=“694”] 图：:hover伪类选择器演示图：:hover 伪类选择器演示[/caption]
4.：活跃

使用:active伪类选择器定义单击链接时的样式。示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
        a:visited {
            background: #FFFF99;
            border: 1px solid red;
            color: red;
        }
        a:hover {
            background: #9c6ae1;
            border: 1px solid black;
            color: black;
        }
        a:active {
            background: #000;
            border: 1px solid black;
            color: white;
        }
    </style>
</head>
<body>
    <a href=''>これはリンクです</a>
    <a href=''>別のリンクです</a>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_553”对齐=“aligncenter”宽度=“668”] 图：:active伪类选择器演示图：:active伪类选择器演示[/caption]

最新文章列表

IT基礎ロゴ

这是一个通过简明易懂的方式解说了解IT行业时需要掌握的IT基础知识的网站。

关于IT基础

关于IT基础

使用条款

隐私政策

联系方式

RSS

推荐环境 / 建议环境

科技

新闻

最新技术

人工智能

游戏

Windows

手机

安全

DevOps

网络

数据库

计算机硬件

商业

数字营销

数据可视化

设计

业务运营

客户服务

人力资源管理

协作

销售与市场营销

初创公司

金融科技

平台

Android

IOS

应用程序

Windows

MACOS

网页领域

LINUX

GOOGLE

CHROME BOOK

教育科技

关于IT基础@2024 All rights reseved