這一次還是繼續為大家介紹一些樣式表應用方面的技巧。大家知道樣式表的定義是針對容器(tag)而言的,那麼在HTML 中,Anchor(錨,即超級連結標記)是一類作用非常之大的容器。它實現了HTML最根本的功能(超文本,超連結)。而CSS也有關於Anchor的一些特殊用法。使得頁面的聯結更緊湊,更富有條理。
跟其它的tag一樣,Anchor的定義方法也可以是:
A:{css標記}
可是它特殊之處在於,它有各種相關的屬性,比如visited(瀏覽過),active(啟用),hover(滑鼠在其上),link(有連結)。可以根據不同需要而做出專門的定義以根據使用者不同的動作做出反應,從而形成比較好的效果。
比如說,您可以做以下的定義:
代碼如下 |
複製代碼 |
< html> < head> < title>Untitled Document< /title> < meta http-equiv="Content-Type" content="text/html; charset=gb2312"> < style type="text/css"> < !-- a:active { font-family: "宋體"; font-size: 9pt; color: #9999FF; text-decoration: underline}a:hover { font-family: "宋體"; font-size: 9pt; color: #99FF99; text-decoration: underline}a:link { font-family: "宋體"; font-size: 9pt; color: #FFCCCC; text-decoration: none}--> < /style> < /head> < body bgcolor="#000000"> < a href="www.www.www">返回< /a> < /body> < /html>
|
在這個例子中,定義了錨的active,hover,link三種狀態。當例子中存在著超級連結時,就會呈現出如圖一的沒有底線的淡紅,而將滑鼠置於其上時,滑鼠變成了手形,而這個連結則會呈現出如圖二的亮綠色。而一旦訪問過後,該連結則會呈現出深紅色。這種變化既美觀了頁面,又提醒了使用者。為絕大多數網站採用。
事實上,有很多時候我們在沒有使用錨的時候也需要對象根據使用者的動作作一些改變。這時候我們往往需要當使用者控制滑鼠經過該對象時,能夠給他一些提示。比如滑鼠換個形狀。像手形,十字形之類的,再結合必要的javas cript,不就可以出現很炫的效果了嗎?而且很多時候使用了錨的話容易改變當前焦點。比如當我們使用到Dhtml中的層概念時,如果是層是不可見的,利用錨將其改為可視,可一旦滑鼠移上去以後,焦點馬上到了層的上面,令大家感到非常不方便。不過,css裡面剛好有這個屬性,可以幫我們改變滑鼠屬性,解除這個煩惱。