1. 程式人生 > >A標籤樣式定義

A標籤樣式定義

 CSS為一些特殊效果準備了特定的工具,我們稱之為“偽類”。其中有幾項是我們經常用到的,下面我們就詳細介紹一下經常用於定義連結樣式的四個偽類,它們分別是:

    :link
    :visited
    :hover
    :active

  因為我們要定義連結樣式,所以其中必不可少的就是超級連結中的錨標籤--a,錨標籤和偽類連結起來書寫的方法就是定義連結樣式的基礎方法,它們的寫法如下:

    a:link,定義正常連結的樣式;
    a:visited,定義已訪問過連結的樣式;
    a:hover,定義滑鼠懸浮在連結上時的樣式;
    a:active,定義滑鼠點選連結時的樣式。


  示例:


  a:link {
    color:#FF0000;
    text-decoration:underline;
    }
    a:visited {
    color:#00FF00;
    text-decoration:none;
    }
    a:hover {
    color:#000000;
    text-decoration:none;
    }
    a:active {
    color:#FFFFFF;
    text-decoration:none;
    }


  上面示例中定義的連結顏色是紅色,訪問過後的連結是綠色,滑鼠懸浮在連結上時是黑色,點選時的顏色是白色。

    如果正常連結和已訪問過的連結樣式相同,滑鼠懸浮和點選時的樣式相同,也可以將它們合併起來定義:


  a:link,
    a:visited     {
    color:#FF0000;
    text-decoration:underline;
    }    
    a:hover,
    a:active    {
    color:#000000;
    text-decoration:none;
    }


連結定義的順序
  沒有規矩不成方圓,雖然連結定義寫好了,但它也是有規則的,如果這四項的書寫順序稍有差錯,連結的效果可能就沒有了,所以每次定義連結樣式時務必確認定義的順序,link--visited--hover-active,也就是我們常說到的LoVe HAte原則(大寫字母就是它們的首字母)。

定義區域性連結樣式
  在CSS中寫上a:link{}這樣的定義會使整個頁面的連結樣式改變,但有些區域性連結需要特殊化,這個問題也不難解決,只要在連結樣式定義的前面加上指定的id或class就可以了。

  示例:

  #sidebar a:link,
    #sidebar a:visiteid  {
    color:#FF0000;
    text-decoration:none;
    }
    #sidebar a:hover,
    #sidebar a:active  {
    color:#000000;
    text-decoration:underline;
    }


  呼叫方法:
  <div id="sidebar"><a href="aa.aspx" target="_blank">連結到aa頁面<a></div>


  class的定義方法和id相同,只要將#sidebar改為.sidebar就行了,還有一種方法是直接定義連結的樣式,那樣更直接,不過呼叫時比較麻煩,需要給每個特定的連結加上定義的程式碼。

  示例:
   a.redlink a:link,
    a.redlink a:visiteid  {
    color:#FF0000;
    text-decoration:none;
    }
    a.redlink a:hover,
    a.redlink a:active  {
    color:#000000;
    text-decoration:underline;
    background:#FFFFFF;
    }


  呼叫方法:
  <div><a href="bb.aspx" target="_blank" class="redlink" >連結bb頁面<a></div>

相關推薦

A標籤樣式定義

 CSS為一些特殊效果準備了特定的工具,我們稱之為“偽類”。其中有幾項是我們經常用到的,下面我們就詳細介紹一下經常用於定義連結樣式的四個偽類,它們分別是:     :link     :visited     :hover     :active   因為我們要定義連結樣式,所以其中必不可少的就是

改變當前點選的a標籤樣式,將其他a標籤樣式還原

<strong>假設現在需要實現這樣的功能:下面有三個a標籤,點選任意一個a標籤,顏色變為藍色,其餘的恢復無色,如下圖</strong><p><img alt="" src="https://img-blog.csdn.net/20

a標籤樣式a標籤屬性

一組專門的預定義的類稱為偽類,主要用來處理超連結的狀態。超連結文字的狀態可以通過偽類選擇符+樣式規則來控制。偽類選擇符包括: 總: a          表示所有狀態下的連線 如 .mycls a{color:red} ① a:link:未訪問連結 ,如 .mycls a:link {color:blue

A 標籤樣式

class Simple ...{    Simple(void)   ...{       cout <<"hello"<<endl;   }~Simple(void)...{}};int main()...{     Simple s();  

a標籤超連結點選後無虛邊框,完美自定義超連結籤樣式

最近在做專案的時候,為了改變A標籤的固有樣式,老闆要求標籤的下劃線【text-decoration】與文字之間的距離應該增加1px。由於知識簡陋,沒找到好的方法,於是我就想到了笨方法:把text-decoration設定為none,然後給標籤註冊了一個mouseover事件

css定義超級連結a標籤裡面的title的樣式

<area shape="rect" coords="328,64,376,155" class="tooltip"  title="顯示內容</br>顯示內容顯示內容顯示內容顯示內容: 65432戶" /> <script type="te

H5 audio 音訊標籤定義樣式修改以及新增播放控制事件

20181023 更新 原來的程式碼拖動進度點只寫了mouse事件,手機端的話應該是touch事件。所有出現了有朋友說的無法拖動進度條的問題。現在更新的程式碼已經加上touch事件,即無論是手機模式瀏覽,還是PC模式瀏覽都可以拖動進度點來調節音訊播放進度。完整程式碼也已經放上碼雲,需要的

[Xcode10 實際操作]四、常用控制元件-(5)UILabel文字標籤定義文字樣式

本文將演示給標籤物件新增描邊效果,在專案資料夾上,點選滑鼠右鍵選單, 選擇【Create File】->【Cocoa Touch Class】->【Next】-> 【Class】:MyLabel 【Subclass of 】:UILabel 【Language】:Swift -&g

JQuery 選擇某個td中第二個a標籤 控制特殊樣式

a標籤沒有disabled屬性,那麼當我們想禁用a標籤的點選事件的時候按照下面方法設定。下面是html程式碼: <a id="entry” class="entry">進入</a> js程式碼如下: $(“#entry”).attr("disabled",tru

關於a標籤點選去除預設樣式

我們在平時a標籤裡面巢狀一些字型圖片,這是很常見的。但是我們並不需要點選時候a標籤裡面的字型變色。這個小知識點,很簡單:css樣式: a{ text-decoration:none; color:

a標籤 CSS樣式 滑鼠懸停、點選、點選後、選定

<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> a:link { color: #0

s 點選a標籤 獲取a的自定義屬性方法_javascript技巧

今天專案上遇到一個問題,需要在點選a標籤時,將完整的內容顯示出來 原先是想用jquery的click方法 <a ownattr=“……” onClick="showDetail(this)"&g

A標籤的css樣式

  CSS為一些特殊效果準備了特定的工具,我們稱之為“偽類”。其中有幾項是我們經常用到的,下面我們就詳細介紹一下經常用於定義連結樣式的四個偽類,它們分別是:     :link    :visited    :hover    :active   因為我們要定義連結樣式,所以

css修改a標籤裡面的title的樣式

 a {position:relative;}   a:hover:before {position:absolute;top:20px;right:0;content:attr(title);col

.net新增前端樣式和JS新增標籤樣式、以及div/a 標籤的顯示和隱藏

jQuery display 隱藏後,原來位置被佔掉 visibility 隱藏後,原來位置還在 $("#id").show()表示display:block, $("#id").hide()表示display:none; $("#id").css('display','none'); $("#id"

如何去掉a標籤的下劃線及偽類樣式

首先,來了解下<a>標籤的一些樣式:<a>標籤的偽類樣式 一組專門的預定義的類稱為偽類,主要用來處理超連結的狀態。超連結文字的狀態可以通過偽類選擇符+樣式規則來控制。偽類選擇符包括:  總: a          表示所有狀態下的連線 如 a{colo

去除移動端a標籤點選樣式

a{ outline:none; -webkit-tap-highlight-color: rgba(0,0,0,0); } -webkit-tap-highlight-color是ios和android下點選元素時出現的陰影,-webkit-tap-high

a 標籤做成btn 樣式

a {      display: block;      height: 25px;      width: 150px;      text-align: center;      background: #F00;      color: #ffffff;     

HTML5 a標籤定義超連結詳解

前言<a>標籤定義超連結,用於從一張頁面連結到另一張頁面。 <a>元素最重要的屬性是 href 屬性,它指示連結的目標。指向 w3school 的超連結:<a href="http://www.w3school.com.cn">W3Scho

從零開始前端學習[5]:關於html5預設標籤樣式的介紹以及定義清除

關於html5預設標籤樣式的介紹以及定義清除 預設樣式介紹 清除預設的樣式 預設樣式介紹 先來看程式碼,看效果 <!DOCTYPE html> <html la