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>

列印頁面