第六課:鏈接

我們可以把前面所學知識用于鏈接,即改變顏色,字體和下劃線等參數。CSS能讓你根據鏈接被訪問過,未訪問,激活或鼠標是否放在鼠標上等狀態定義不同特性。這能給你的網站增加有趣和實用效果。控制這些效果使用的是CSS代碼“pseudo-classes”。

什么是pseudo-classes?

pseudo-classes能讓你在定義HTML標簽的特性時考慮不同條件或事件。查看下面這個實例。我們都知道,HTML是用<a>定義鏈接的,因此我們可以使用CSS的選擇器:

a {
color: blue;
}

鏈接有不同狀態。例如,它可以是訪問過或未訪問過;你能用pseudo-classes給訪問過和未訪問過的鏈接安排不同風格。

a:link {
color: blue;
}

a:visited {
color: red;
}

分別給未訪問和訪問過的鏈接使用a:link和a:visited。激活的鏈接使用pseudo-class a:active ;在鼠標位于鏈接上方時,可以用a:hover。下面用實例進一步解釋每一種pseudo-classes(四種)的作用。

1、Pseudo-class: link

:link用于用戶未訪問過的頁面鏈接。下面的代碼實例中,未訪問過的鏈接是淡藍色。

a:link {
color: #6699CC;
}

2、Pseudo-class: visited

:visited用于用戶訪問過的鏈接。例如,下面的代碼會讓所有訪問過的鏈接變成深紫色:

a:visited {
color: #660099;
}

3、Pseudo-class: active

:active用于被激活的鏈接。這一實例說明一個黃色背景的激活鏈接:

a:active {
background-color: #FFFF00;
}

4、Pseudo-class: hover

:hover用于鼠標放在一個鏈接上時。這能創造出有趣的效果。例如,如果想讓鏈接變成橙色,并且在鼠標劃過時變成斜體,可以使用下面的CSS代碼:

a:hover {
color: orange;
font-style: italic;
}

實例1:在鼠標劃過鏈接時的效果

給鼠標劃過鏈接時創造不同效果的做法特別流行。因此,我們還可以舉出更多與:hover有關的例子。

實例1a:字母之間的間隙

在第五課我們學習過怎樣用letter-spacing調節字母間的空隙,它還可以用于特殊效果的鏈接:

a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}

實例1b: 大寫字母和小寫字母

第五課講過字體轉換,能在大小寫之間轉換。它同樣可以用于創造鏈接效果:

a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}

這兩個實例說明,綜合不同特性能創造無限可能的效果。你可以親自嘗試一下。

實例2:清除鏈接下劃線

很多人想知道怎樣清除鏈接下劃線。應謹慎考慮,是否需要清除下劃線,因為它可能會明顯降低網站的可用性。人們習慣于網頁的藍色下劃線,并知道可以點擊它們。但如果你改變鏈接的下劃線和顏色,很有可能給用戶造成困惑,并因此影響網站的內容質量。

當然,清除下劃線很容易。上一課已經學過,用text-decoration就能確定文本是否顯示下劃線。要做到這一點,僅僅將text-decoration設置為none即可。

a {
text-decoration:none;
}

你也可以將text-decoration與其它四個pseudo-classes特性一起設置。

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

a:visited {
color: purple;
text-decoration:none;
}

a:active {
background-color: yellow;
text-decoration:none;
}

a:hover {
color:red;
text-decoration:none;
}

總結

這一課我們學習了pseudo-classes,并且使用了前面提到的特性。這能讓你進一步了解CSS提供的可能性。下一課將學習如何定義特殊元素和元素組的特性。

版權宣告:
作者:Riley.Chou
連結:https://sh100k.com/%e7%ac%ac%e5%85%ad%e8%af%be%ef%bc%9a%e9%93%be%e6%8e%a5/
來源:SH100K – 生活百科
文章版權歸作者所有,未經允許請勿轉載。

THE END
< <上一篇
下一篇>>