首頁 > web前端 > css教學 > 調整CSS類型的順序改變

調整CSS類型的順序改變

黄舟
發布: 2016-12-15 13:44:59
原創
1547 人瀏覽過

你也許已經意識到,你可以通過指定每一鍵接的不同風格以建立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,所以,當連結被點擊時,它可以取代所有其它的類型。

  CODE:

以下是引用片段:
  a:link { 
  color: #0000FF; 
  text-decoration: #0000FF; 
  text-decoration: underline; style: normal; 
  } 
  a:visited {
  color: #3399FF; 
  text-decoration: underline; 
  background-color: #FFFFFF;  〠〠): normal;
  a:hover { 
  color: #0000FF; 
  text -decoration: underline; 
  background-color: #FFFF00; 
  font-weight: bold; 
  font-style: normal; 🀜:0  〜〜〜〜〜):00 〜〜〜] 
  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類型屬性將會繼續再現。

以上就是調整CSS類型的順序改變連結狀態的內容 更多相關文章請關注PHP中文網(www.php.cn)!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板