DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS產生的特殊效果
CSS產生的特殊效果
編輯:CSS詳解     

    經常有朋友問:如何使有超級連接的文字不出現下劃線,如何使鼠標移動到超連上產生變色的效果?其實這些通過傳統的方法是辦不到的。而使用CSS的控制卻可以非常輕松地作到,而且,頁面的代碼也不會臃腫。

    ★★先看看超連沒有下劃線的例子:

    例子1: 這個連接可以去頁面底部,但是沒有下劃線。

    是如何作到這一點的呢?在和之間加上如下的CSS語法控制:

  <!--
  a:link { text-decoration: none}
  a:active { text-decoration: none }
  a:visited { text-decoration: none }
  -->
  </style>

    如果要產生變色效果,就要用到另一個屬性了,這就是 hover,看下面的代碼。

  a:hover { text-decoration: none ; color: yellow } 表示鼠標移動到連接文字上時,文字修飾風格為“無”(即沒有下劃線),同時顯示黃色。

  a:hover { text-decoration: underline; color: green } 表示鼠標移動到連接文字上時,文字修飾風格為“underline”(即下劃線),同時顯示綠色。

    ★★擴展一下:如果我們同時用下面2種屬性,會產生什麼效果呢?

  a:link { text-decoration: none ; color: yelloe ; font-size: 9pt }

  a:hover { text-decoration: underline; color: green ; font-size: 12pt }

    連接文字沒有下劃線,黃色顯示,9pt大小。鼠標移動到連接上時出現下劃線,顏色為綠色,字符大小12pt。是不是變色了?而且字體由於大小變化,就有動感了,似乎一下子擴大了。

    總之,所有前面講過的方法,要綜合運用才可以呀。

    ★★注意:並不是所有的浏覽器都支持所有的選項屬性。自己在多個浏覽器上測試一下。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved