1. 程式人生 > >調整CSS型別的順序改變連結翻滾效果

調整CSS型別的順序改變連結翻滾效果

  你也許已經意識到,你可以通過指定每一鍵接的不同風格以建立CSS翻滾效果,這些連結包括普通的連結link (normal), 訪問,翻轉,以及啟用。並且,你可能也知道CSS型別的順序可以產生效果上的差別,CSS程式碼後順序的風格將會取代針對於相同元素的前順序的風格。建立翻滾效果的型別順序顯得相當重要。

  現在讓我們看看如何安排連結狀態的型別在不產生衝突的情況下支援正常的翻滾效果,並且如何重新安排這些型別順序以獲得不同的翻滾效果。

  連結狀態

  典型的CSS翻滾效果依賴於超連結中四個狀態之一的獨立型別。可以建立附帶CSS預先類的(超連結)型別以指定連結狀態:

  a:link——常規,非訪問超連結

  a:visited——訪問超連結

  a:hover——訪問者操作滑鼠通過時的連結

  a:active——點選連結

  為了能夠使典型的CSS翻滾效果正常工作,CSS程式碼中的CSS型別順序顯得非常重要,無論它是一個外部型別表格或者是嵌入在HIML頁標題欄中的型別規則。

  a:link型別出現的時間為最早,因為它可應用於所有的連結。a:visited型別排第二,它將取代任何連結的a:link格式。(如果a:link型別緊跟著的是a:visited,a:link可能會取代a:visited型別。)其次是a:hover型別,此型別只應用於訪問滑鼠下的連結。最後是a:active,所以,當連結被點選時,它可以取代所有其它的型別。

  a:link {
  color: #0000FF;
  text-decoration: underline;
  font-weight: normal;
  font-style: normal;
  }
  a:visited {
  color: #3399FF;
  text-decoration: underline;
  background-color: #FFFFFF;
  font-weight: normal;
  font-style: italic;
  }
  a:hover {
  color: #0000FF;
  text-decoration: underline;
  background-color: #FFFF00;
  font-weight: bold;
  font-style: normal;
  }
  a:active {
  color: #FF0000;
  text-decoration: none;
  background-color: #CCCCCC;
  font-weight: bold;
  font-style: normal;
  }


  在CSS程式碼中的型別順序確定了每一種型別如何取代其它的型別,即更多的型別可以應用到特定的元素。正常情況下,a:hover型別處於a:link和a:visited型別之後,所以hover狀態的型別可以應用於常規和訪問的連結。但是,它也並非必須遵循這一方式,你可以改變型別順序實現不同的效果。

  假設你想在非訪問連結中使用翻滾效果,但不想影響到其它訪問連結,你或許想到通過程式碼來處理這種外形上改變,然而你所要做的是重新組織CSS程式碼。

  從訪問連結中移除翻滾效果,可以通過很簡單地移除a:visited型別。

  注意,a:visited型別中包含指定所有與a:hover相同屬性的規則,否則,當訪問者的滑鼠通過一個訪問連結時,沒有被a:visited型別取代的任何a:hover型別屬性將會繼續再現。