CSS速成手冊2

2021-04-06 22:30:28 字數 1403 閱讀 6982

三、偽類——動態鏈結

偽類可以看做是一種特殊的類選擇符,是能被支援css的瀏覽器自動所識別的特殊選擇符。它的最大的用處就是可以對鏈結在不同狀態下定義不同的樣式效果。

1. 語法

偽類的語法是在原有的語法裡加上乙個偽類(pseudo-class):

selector:pseudo-class

(選擇符:偽類 )

偽類和類不同,是css已經定義好的,不能象類選擇符一樣隨意用別的名字,根據上面的語法可以解釋為物件(選擇符)在某個特殊狀態下(偽類)的樣式。

類選擇符及其他選擇符也同樣可以和偽類混用:

selector.class:pseudo-class

(選擇符.類:偽類 )

2. 錨的偽類

我們最常用的是4種a(錨)元素的偽類,它表示動態鏈結在4種不同的狀態:link、visited、active、hover(未訪問的鏈結、已訪問的鏈結、啟用鏈結和滑鼠停留在鏈結上)。我們把它們分別定義不同的效果:

a:link /* 未訪問的鏈結 */

a:visited /* 已訪問的鏈結 */

a:hover /* 滑鼠在鏈結上 */

a:active /* 啟用鏈結 */

(上面這個例子中,這個鏈結未訪問時的顏色是紅色並無下劃線,訪問後是綠色並無下劃線,啟用鏈結時為藍色並有下劃線,滑鼠在鏈結上時為紫色並有下劃線)

注意:有時這個鏈結訪問前滑鼠指向鏈結時有效果,而鏈結訪問後滑鼠再次指向鏈結時卻無效果了。這是因為你把a:hover放在了a:visited的前面,這樣的話由於後面的優先順序高,當訪問鏈結後就忽略了a:hover的效果。所以根據疊層順序,我們在定義這些鏈結樣式時,一定要按照a:link, a:visited, a:hover, a:actived的順序書寫。

3. 偽類和類選擇符

將偽類和類組合起來用,就可以在同乙個頁面中做幾組不同的鏈結效果了,例如,我們定義一組鏈結為紅色,訪問後為藍色;另一組為綠色,訪問後為黃色:

a.red:link

a.red:visited

a.blue:link

a.blue:visited

現在應用在不同的鏈結上:

這是第一組鏈結

這是第二組鏈結

4. 其他偽類

此外css2還定義了首字和首行(first-letter和first-line)的偽類,可以對元素的首字或首行設定不同的樣式。

下面看這個例子,我們在段落標記裡定義文字首字尺寸為預設大小的3倍:

……這是乙個段落,這個段落的首字被放大了。

我們再定義乙個首行樣式的例子:

……這是段落的第一行

這是段落的第二行

這是段落的第三行

(上例中段落的第一行為紅色,第

二、三行為預設顏色)

注意:首字和首行的偽類需要ie5.5以上的版本支援。

CSS速成手冊3

四 如何在網頁中插入css 前兩章我們了解了css的語法,但要想在瀏覽器中顯示出效果,就要讓瀏覽器識別並呼叫。當瀏覽器讀採樣式表時,要依照文字格式來讀,這裡介紹四種在頁面中插入樣式表的方法 鏈入外部樣式表 內部樣式表 匯入外表樣式表和內嵌樣式。1.鏈入外部樣式表 鏈入外部樣式表是把樣式表儲存為乙個樣...

CSS速成教程 2

派生選擇器 通過依據元素在其位置的上下文關係來定義樣式,可以使標記更加簡潔。派生選擇器允許你根據文件的上下文關係來確定某個標籤的樣式。通過合理地使用派生選擇器,我們可以使 html 變得更加整潔。比方說,你希望列表中的 strong 元素變為紅色,而不是通常的黑色,可以這樣定義乙個派生選擇器 li ...

專案管理速成手冊

2010 5 10 蔣彪於南京 專案,如果不好好的管理的話,就會變得混亂下去。曾經的計畫到處是破綻,成果物亂七八糟,專案成員心情都無比沮喪,到了不可收拾的地步。乙個陷入混亂的專案,最需要的就是出重手,快速擺平所有的問題。正所謂 亂使用重典 當然,這不是那麼件簡單的事情。本篇文章,就是想說明,在專案的...