周浩

            BlogJava :: 首頁 :: 新隨筆 :: 聯系 ::  :: 管理 ::
            28 隨筆 :: 0 文章 :: 16 評論 :: 0 Trackbacks

           
           CSS第2期
           
           
          三、偽類——動態鏈接

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

          1. 語法

          偽類的語法是在原有的語法里加上一個偽類(pseudo-class):
          selector:pseudo-class {property: value}
          (選擇符:偽類 {屬性: 值})
          偽類和類不同,是CSS已經定義好的,不能象類選擇符一樣隨意用別的名字,根據上面的語法可以解釋為對象(選擇符)在某個特殊狀態下(偽類)的樣式。

          類選擇符及其他選擇符也同樣可以和偽類混用:
          selector.class:pseudo-class {property: value}
          (選擇符.類:偽類 {屬性: 值})

          2. 錨的偽類

          我們最常用的是4種a(錨)元素的偽類,它表示動態鏈接在4種不同的狀態:link、visited、active、hover(未訪問的鏈接、已訪問的鏈接、激活鏈接和鼠標停留在鏈接上)。我們把它們分別定義不同的效果:
          a:link {color: #FF0000; text-decoration: none} /* 未訪問的鏈接 */
          a:visited {color: #00FF00; text-decoration: none} /* 已訪問的鏈接 */
          a:hover {color: #FF00FF; text-decoration: underline} /* 鼠標在鏈接上 */
          a:active {color: #0000FF; text-decoration: underline} /* 激活鏈接 */
          (上面這個例子中,這個鏈接未訪問時的顏色是紅色并無下劃線,訪問后是綠色并無下劃線,激活鏈接時為藍色并有下劃線,鼠標在鏈接上時為紫色并有下劃線)
          注意:有時這個鏈接訪問前鼠標指向鏈接時有效果,而鏈接訪問后鼠標再次指向鏈接時卻無效果了。這是因為你把a:hover放在了a:visited的前面,這樣的話由于后面的優先級高,當訪問鏈接后就忽略了a:hover的效果。所以根據疊層順序,我們在定義這些鏈接樣式時,一定要按照a:link, a:visited, a:hover, a:actived的順序書寫。

          3. 偽類和類選擇符

          將偽類和類組合起來用,就可以在同一個頁面中做幾組不同的鏈接效果了,例如,我們定義一組鏈接為紅色,訪問后為藍色;另一組為綠色,訪問后為黃色:
          a.red:link {color: #FF0000}
          a.red:visited {color: #0000FF}
          a.blue:link {color: #00FF00}
          a.blue:visited {color: #FF00FF}
          現在應用在不同的鏈接上:
          <a class="red" href="...">這是第一組鏈接</a>
          <a class="blue" href="...">這是第二組鏈接</a>

          4. 其他偽類

          此外CSS2還定義了首字和首行(first-letter和first-line)的偽類,可以對元素的首字或首行設定不同的樣式。
          下面看這個例子,我們在段落標記里定義文本首字尺寸為默認大小的3倍:
          <style type=”text/css”>
          p:first-letter {font-size: 300%}
          </style>
          ……
          <p>
          這是一個段落,這個段落的首字被放大了。
          </p>

          我們再定義一個首行樣式的例子:
          <style type=”text/css”>
          div:first-line {color: red}
          </style>
          ……
          <div>
          <p>
          這是段落的第一行
          這是段落的第二行
          這是段落的第三行
          </p>
          </div>
          (上例中段落的第一行為紅色,第二、三行為默認顏色)

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

          posted on 2007-05-12 22:59 Derek 閱讀(221) 評論(0)  編輯  收藏

          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          Google
          主站蜘蛛池模板: 新余市| 阳城县| 宁津县| 罗江县| 新沂市| 高台县| 方山县| 和平区| 英吉沙县| 龙游县| 吉安县| 徐州市| 林西县| 武强县| 台南县| 蕉岭县| 大洼县| 额敏县| 漳平市| 房山区| 嵩明县| 松溪县| 永德县| 襄垣县| 大田县| 普格县| 台南市| 孟连| 伊金霍洛旗| 高碑店市| 光山县| 瑞丽市| 吴忠市| 河津市| 北宁市| 南和县| 娱乐| 庄浪县| 阳谷县| 天气| 民丰县|