CSS - 链接

原创

admin 4个月前 (08-07) 阅读数 19 #CSS

CSS - 链接

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

CSS 链接示例

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

CSS CSS按钮

链接状态

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

链接：表示未访问的链接。此状态的链接可以使用:link伪类进行样式设置。（这是锚标签的默认状态）。
已访问：表示已访问的链接（存在于浏览器历史记录中）。此状态的链接可以使用:visited伪类进行样式设置。
悬停：表示用户将鼠标指针悬停在链接上的状态。此状态的链接可以使用:hover伪类进行样式设置。
活动：表示用户点击链接的状态。此状态的链接可以使用: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"> 点击我 </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> 选择课程 </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图像链接" height="60px" >
    </a>
</body>

</html>