CSS - 链接

链接用于单次点击从一个网页导航到另一个网页。我们可以使用 CSS 属性以各种方式设置链接样式。

CSS 链接示例

我们可以使用<a>标签在网页中创建一个链接。使用 CSS，我们可以将其样式设置为文本链接、按钮链接和图片链接，如下所示。

CSS CSS 按钮

链接状态

网页中的链接存在各种状态，这些链接状态可以使用 CSS 中的伪类进行设置样式。以下是链接的常见状态。

链接（:link）：表示未访问的链接。可以使用:link伪类设置链接的样式。（这是锚标签的默认状态）。
已访问（:visited）：表示已访问过的链接（存在于浏览器历史记录中）。可以使用:visited伪类设置链接的样式。
悬停（:hover）：表示用户将鼠标指针悬停在链接上时的状态。可以使用:hover伪类设置链接的样式。
活动（:active）：表示用户单击链接时的状态。可以使用:active伪类设置链接的样式。

链接的默认样式

以下是应用于网页链接的默认样式。您可以使用 CSS 修改此样式。

所有链接都将带下划线。您可以通过将text-decoration属性设置为“none”来删除下划线。
所有未访问的链接将为蓝色，已访问的链接将为紫色。您可以使用color属性来修改颜色。
当您将鼠标悬停在链接上时，鼠标指针将更改为一个小手图标。您可以使用cursor属性来修改此样式。
悬停链接将带下划线，活动链接将以红色显示。

CSS 文本链接

单击时将导航到不同网页或同一页面部分的文本内容称为文本链接。以下示例显示如何创建文本链接。

示例

<html>

<head>
    <style>
        body{
            padding: 10px;
        }
        a {
            color: blue; 
            text-decoration: none; 
        }
        a:hover {
            text-decoration: underline;
            transform: scale(1.1);   
        }
    </style>
</head>

<body>
    <a href="/index.htm"> Click Me </a>
</body>

</html>

链接状态样式

如上所述，在此示例中，我们使用了伪类来设置链接的不同状态的样式。

示例

<html>

<head>
    <style>
        body {
            padding: 10px;
            font-size: 1.2rem;
            font-family: sans-serif;
        }

        a {
            display: inline-block;
            transition: transform 0.2s ease;
        }

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

        a:visited {
            color: purple; 
        }

        a:hover {
            text-decoration: underline;
            transform: scale(1.1)
        }

        a:active {
            color: black;
        }
    </style>
</head>

<body>
    <p> Select course </p>
    <ul>
        <li> <a href="/html/index.htm" target="_blank"> 
            HTML 
        </a> </li>
        <li> <a href="/css/index.htm" target="_blank"> 
            CSS 
        </a> </li>
        <li> <a href="/python/index.htm" target="_blank"> 
            Python 
        </a> </li>
    </ul>
</body>

</html>

CSS 按钮链接

在 CSS 中，我们可以将链接样式设置为看起来像一个可点击的按钮。以下示例显示了这一点。

示例

<html>

<head>
    <style>
        body {
            display: flex;
            justify-content: space-around;
            padding: 10px;
            height: 100px;
        }

        .button {
            display: inline-block;
            color: white;
            background-color: blue;
            height: 20%;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            border-radius: 5px;
            transition: all 0.3s ease;
        }

        .button:hover {
            background-color: darkblue;
            transform: scale(1.1);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>

<body>
    <a class="button" href="/css/index.htm" target="_blank" > 
        CSS
    </a>
    <a class="button" href="/html/index.htm" target="_blank" > 
        HTML 
    </a>
</body>

</html>

CSS 图片链接

我们还可以将链接附加到网页中显示的图片上。以下示例显示了这一点。

示例

<html>

<head>
    <style>
        body {
            display: flex;
            justify-content: space-around;
            padding: 10px;
            height: 100px;
        }

        a img {
            transition: all 0.3s ease;
            border-radius: 5px;
        }
    
        a:hover img {
            transform: scale(1.05);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>

<body>
    <a href="/css/index.htm" target="_blank" > 
        <img src="/css/images/css.png" 
              alt="css-image-link" height="60px" >
    </a>
</body>

</html>

打印页面