1. 程式人生 > >A標籤的css樣式

A標籤的css樣式

  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樣式 滑鼠懸停、點選、點選後、選定

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

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

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

糊糊的前端學習筆記——a標籤點選跳轉頁面後,為被點選的a標籤新增樣式【Day1】

本人前端小白一枚,初步接觸前端知識一個月。從今天開始將在部落格上分享一下我每日工作中遇到的一些問題和相應的解決,以幫助自己更好的學習和成長。 今天在製作網頁頂部公共導航時,遇到這樣一個問題,我需要在a標籤點選跳轉頁面後,為被點選的a標籤新增樣式。 增添樣式如下:.selec

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

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

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

Vuejs使用scoped style為v-html中標籤新增CSS樣式

本文最新版本及更多技術文章請訪問我的個人技術部落格: http://blog.sbot.io 謝謝大家支援! 在Vue元件中,我們可以使用<style scoped>標籤來新增針對該元件的CSS樣式。 <template>

HTML標籤CSS樣式

文字標籤 h1-h6:標題 p:文欄位落標籤 b/strong:加粗 u:下劃線 s:劃去線 換行標籤: br-----(第一個沒有成對出現的標籤) 水平分隔符標籤: hr-----(第一個沒有成對出現的標籤) 預格式化文字標籤(保留文字的原有格式): pre標籤 上標和下標: su

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

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

python學習之網站的編寫(HTML,CSS,JS)(五)----------a標籤,用於實現網頁的跳轉和頁面具體位置的跳轉

 a標籤既可以實現頁面的跳轉也可以實現具體位置的跳轉,見如下程式碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <tit

CSSa標籤的4個偽類

有時候在瀏覽一些網站時會發現,當你把滑鼠放在連結上時,它的顏色就會變,這就是用了css控制了它的四種狀態, 大家都知道a標籤可以用來實現超連結, 第一種狀態: link (預設)正常狀態(初

img標籤在某些css樣式下變得模糊

由於自動適應位置的情形,我經常將logo絕對定位然後再通過移動來讓logo上下居中或者上下左右居中,但是這往往會造成img標籤展現的時候變得模糊,比如下面這樣的對比就可以明顯的看出其變得模糊了: (變

css修改select標籤預設樣式

之前寫select選擇框的時候就發現pc端在不同瀏覽器會有不同樣式,在移動端更是醜的厲害。於是在網上扒拉總結了幾個清除預設樣式的方法,以備日後之需。 一、 ios端去除預設樣式: backgro

jQuery選擇器ID、CLASS、標籤獲取物件值、屬性、設定css樣式

jQuery是繼prototype之後又一個優秀的Javascrīpt框架。它是輕量級的js庫(壓縮後只有21k) , 它相容CSS3,還相容各種瀏覽器 (IE 6.0+, FF 1.5+, Safar

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

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

BootStrap-CSS樣式_佈局元件_標籤

Bootstrap 標籤:標籤可用於計數、提示或頁面上其他的標記顯示,使用 class .label 來顯示標籤 label:標籤,在不同容器中顯示不同大小 label-default:預設標籤 label-primary:主要標籤 label-success:成功標籤 labe

BootStrap-CSS樣式_佈局元件_導航元素(導航或標籤(Tab頁))

導航元素所涉及樣式: nav-tabs樣式:呈現表格導航或標籤(Tab頁)樣式 nav-pills樣式:呈現膠囊式導航選單(Tab頁)樣式 nav-stacked樣式:水平導航設定為堆疊(垂直)效果 disabled樣式:呈現禁用的導航選單樣式,在li標籤中使用 active樣式

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

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

A標籤樣式定義

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

html——table標籤及其css樣式

<table border="1" width="400px" height="200px"> <caption>完整table</caption> //標題