鏈接在網頁上很常見，但許多網頁設計師沒有意識到他們用CSS來有效操縱和管理鏈接的能力。 您可以定義訪問，懸停和活動狀態的鏈接。 你也可以使用邊框和背景來讓你的鏈接更加美味，或者讓它們看起來像按鈕甚至圖像。
大多數網頁設計師首先在“a”標籤上定義樣式：
一個{color：red; }這將設計鏈接的所有方面 （懸停，訪問和活動）。 要分別設置每個部件的樣式，您必須使用鏈接偽類。
鏈接偽類
有四種可以定義的鏈接偽類的基本類型：
- ：鏈接 - 這是鏈接的默認樣式
- ：訪問 - 鏈接被點擊後
- ：懸停 - 當鼠標懸停在鏈接上（預先點擊）
- ：主動 - 正確點擊鏈接
要定義鏈接偽類，請在CSS選擇器中將其與標籤一起使用。 因此，要將所有鏈接的訪問顏色更改為灰色，請寫下：
a：visited {color：gray; }如果你設計一個鏈接偽類，那麼將它們全部設置為一個好主意。 這樣你就不會被多餘的結果感到驚訝。 所以如果你只是想將訪問過的顏色改成灰色，而你的鏈接的所有其他偽屬性都是黑色的，你可以這樣寫：
a：link，a：hover，a：active {color：black; } a：visited {color：gray; }更改鏈接顏色
設置鏈接樣式最流行的方式是在鼠標懸停在其上時更改顏色：
一個{color：＃00f; } a：hover {color：＃0f0; }但不要忘記，您可以通過以下方式影響鏈接的外觀：點擊屬性：
一個{color：＃00f; } a：active {color：＃f00; }或者在您使用：visited屬性訪問鏈接後該鏈接的外觀如何：
一個{color：＃00f; } a：visited {color：＃f0f; }把它放在一起：
一個{color：＃00f; } a：visited {color：＃f0f; } a：hover {color：＃0f0; } a：active {color：＃f00; }在鏈接上添加背景以添加圖標或項目符號
您可以在時尚背景文章中為鏈接添加背景，但通過稍微播放背景，您可以創建具有關聯圖標的鏈接。 選擇一個很小的圖標，大約15px x 15px，除非文字較大。 將背景放置在鏈接的一側，並將重複選項設置為不重複。 然後，填充鏈接，以便將鏈接中的文本向左或向右移動足夠遠以查看圖標。
{padding：0 2px 1px 15px; 背景：#fff url（ball.gif）left center no-repeat; 顏色：＃c00; }獲得圖標後，您可以將不同的圖像設置為懸停，活動和訪問圖標，以便更改鏈接：
{padding：0 2px 1px 15px; 背景：#fff url（ball.gif）left center no-repeat; 顏色：＃c00; } a：hover {background：#fff url（ball2.gif）left center no-repeat; } a：active {background：#fff url（ball3.gif）left center no-repeat; }讓你的鏈接看起來像按鈕
按鈕非常流行，但在CSS出現之前，您必須使用圖像創建按鈕，這會使您的頁面加載時間更長。 幸運的是，有一種邊框樣式可以幫助您輕鬆地使用CSS創建類似按鈕的效果。
一個{border：4px outset; padding：2px; 文字修飾：無; } a：active {border：4px inset; }請注意，當您將顏色置於一開始和插入樣式中時，瀏覽器不太可能像您期望的那樣呈現它們。 所以，這裡有一個彩色邊框的發燒友按鈕：
{border-style：solid; border-width：1px 4px 4px 1px; 文字修飾：無; 填充：4px; 邊框顏色：＃69f＃00f＃00f＃69f; }您也可以影響按鈕鏈接的懸停和活動樣式，只需使用這些偽類即可：
a：link {border-style：solid; border-width：1px 4px 4px 1px; 文字修飾：無; 填充：4px; 邊框顏色：＃69f＃00f＃00f＃69f; } a：hover {border-color：#ccc; }