<menu id="0eekc"></menu>
<menu id="0eekc"></menu>
  • <menu id="0eekc"></menu>
  • <menu id="0eekc"><tt id="0eekc"></tt></menu>
  • <xmp id="0eekc">
    歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!

    CSS控制超鏈接樣式-css超鏈接

    本文將講解通過css樣式或通過css來控制超鏈接樣式。這里主要講文字類型的超鏈接,超鏈接的樣式包括通過CSS來控制設置超鏈接有無下劃線、超鏈接文字顏色等樣式。

    什么是超鏈接?
    超鏈接通俗地指從一個網頁指向一個目標的連接關系,這個目標可以是另一個網頁,也可以是相同網頁上的不同位置,還可以是一個圖片,一個電子郵件地址,一個文件,甚至是一個應用程序。而在一個網頁中用來超鏈接的對象,可以是一段文本或者是一個圖片。當瀏覽者單擊已經鏈接的文字或圖片后,鏈接目標將顯示在瀏覽器上,并且根據目標的類型來打開或運行。

    超鏈接的代碼
    <a href="http://www.yfzzdoors.com/" target="_blank" title="關于div css的網站">DIV+CSS</a>
    解析如下:
    href 后跟被鏈接地址目標網站地址這里是http://www.yfzzdoors.com/
    target
    _blank -- 在新窗口中打開鏈接
    _parent -- 在父窗體中打開鏈接
    _self -- 在當前窗體打開鏈接,此為默認值
    _top -- 在當前窗體打開鏈接,并替換當前的整個窗體(框架頁)

    title 后跟鏈接目標說明,也就是超鏈接被鏈接網址情況簡要說明,或標題

    CSS可控制超鏈接樣式-css鏈接樣式如下
    a:link是超級鏈接的初始狀態
    a:hover是把鼠標放上去時懸停的狀況
    a:active 是鼠標點擊時
    a:visited是訪問過后的情況

    一、簡單超鏈接樣式案例   -   TOP

    1、通常對全站超鏈接樣式化方法
    a{color:#333;text-decoration:none; } //對全站有鏈接的文字顏色樣式為color:#333;并立即無下劃線text-decoration:none;
    a:hover {color:#CC3300;text-decoration:underline;}//對鼠標放到超鏈接上文字顏色樣式變為color:#CC3300;并文字鏈接加下劃線text-decoration:underline;

    2、通過鏈接內設置類控制超鏈接樣式css方法
    案例超鏈接代碼<a href="http://www.yfzzdoors.com/" class="yangshi">CSS</a>
    對應CSS代碼
    a.yangshi{color:#333;text-decoration:none; }
    a.yangshi:hover {color:#CC3300;text-decoration:underline;}
    通過這樣的設置可以控制鏈接內的css類名為“yangshi”超鏈接的樣式

    3、通過對應超鏈接外的父級的css類的css樣式來控制超鏈接的樣式
    案例超鏈接代碼<div class="yangshi"><a href="http://www.yfzzdoors.com/">CSS</a></a>
    對應CSS代碼
    .yangshi a{color:#333;text-decoration:none; }
    .yangshi a:hover {color:#CC3300;text-decoration:underline;}

    這里值得注意的是a.yangshi與.yangshi a的樣式css代碼區別

    你可能希望了解html a,html超鏈接,html錨文本

    這里就是常見的通過div css來對超鏈接樣式設置案例及分析。

    以下為詳細CSS A超鏈接錨文本樣式教程

    css a:link hover active visited偽類樣式教程篇

    DIVCSS5這里講解html a超鏈接標簽,a:hover、a:link、a:active、a:visited偽類樣式經驗教程,通過CSS設置這幾種a錨文本的CSS樣式。無論控制超鏈接文本文字各種鼠標事件樣式,可以控制超鏈接對象背景圖片的變化。

    擴展閱讀:
    1、html a標簽語法結構
    2、css a錨文本樣式

    二、基礎認識   -   TOP

    介紹這4個常見偽類作用與解釋
    1、a:link
    設置a對象在未被訪問前(未點擊過和鼠標未經過)的樣式表屬性。也就是html a錨文本標簽的內容初始樣式。

    2、a:hover
    設置對象在其鼠標懸停時的樣式表屬性,也就是鼠標剛剛經過a標簽并停留在A鏈接上時樣式。

    3、a:active
    設置A對象在被用戶激活(在鼠標點擊與釋放之間發生的事件)時的樣式表屬性。也就是鼠標左鍵點擊html A鏈接對象與釋放鼠標右鍵之間很短暫的樣式效果。

    4、a:visited
    設置a對象在其鏈接地址已被訪問過時的樣式表屬性。也就是html a超鏈接文本被點擊訪問過后的CSS樣式效果。

    三、應用用法案例   -   TOP

    我們設置一個超鏈接,對其設置CSS樣式,通過CSS A設置其四種樣式效果。通過一個簡單的對文本設置css a樣式情況了解學習CSS a錨文本樣式。

    1、案例css代碼

    1. <style> 
    2. .divcss5 a:link{ color:#F00}/* 鏈接默認為紅色 */ 
    3. .divcss5 a:hover{ color:#000}/* 鼠標懸停黑色 */ 
    4. .divcss5 a:active{ color:#03F}/* 鼠標點擊與釋放時藍色 */ 
    5. .divcss5 a:visited{ color:#F0F}/* 訪問過為粉紅 */ 
    6. /* divcss5對象內 a超鏈接設置樣式 */ 
    7. </style> 

    2、案例html代碼

    1. <div class="divcss5"> 
    2. DIVCSS5關于 
    3. <a href="http://www.yfzzdoors.com/shili/s57.shtml">CSS a樣式</a>案例 
    4. </div> 

    這里為了排版截圖,特地對有的地方進行換行

    3、案例軟件中截圖

    css設置a鏈接樣式截圖
    CSS A鏈接樣式案例截圖

    4、瀏覽器實際各種樣式截圖

    瀏覽器中各種css A樣式截圖
    瀏覽器中各種A樣式截圖

    小結:
    一般a:active樣式效果是瞬間效果觀察不了,所以使用時候可以不用設置。同時超鏈接默認情況下是自動加下劃線的,如果要去掉或再增加下劃線可以設置css text-decorationhttp://www.yfzzdoors.com/rumen/r129.shtml)。

    擴展閱讀:
    1、css 下劃線
    2、css text-decoration下劃線
    3、html a標簽
    4、a標簽結構

    四、常用CSS A應用   -   TOP

    為了大家靈活掌握css a錨文本樣式設置,我們整理三種使用情況的A超鏈接樣式控制設置案例,分別為:帶超鏈接文字本身css color顏色樣式與訪問后顏色樣式相同,沒有下劃線,鼠標懸停時候文字顏色color變化,并添加下劃線;未訪問時候帶超鏈接文本文字顏色是一種并且沒有下劃線,鼠標懸停經過時候是另外一種顏色有下劃線,激活或訪問(過)后文本顏色為另外一種并有下劃線(三種情況三種顏色);還有一種情況,本身一個圖片背景,鼠標經過懸停另外一種背景圖片。通過這三種情況案例教程讓大家通過對css a錨文本超鏈接樣式控制掌握其知識。

    1、帶超鏈接文字本身css color顏色樣式與訪問后顏色樣式相同,沒有下劃線,鼠標懸停時候文字顏色color變化,并添加下劃線

    1)、CSS樣式代碼:

    1. .divcss5 a{ color:#F00; text-decoration:none}/* 鏈接默認為紅色 */ 
    2. .divcss5 a:hover{ color:#000; text-decoration:underline}/* 鼠標懸停黑色 */ 
    3. /* divcss5對象內 a超鏈接設置樣式 */ 
    4. 這里可以不用a:link偽類,可以直接對象“CSS命名+空格+a{}”即可。 

    2)、案例html div代碼片段:

    1. <div class="divcss5"> 
    2. DIVCSS5關于 
    3. <a href="http://www.yfzzdoors.com/shili/s57.shtml">CSS a樣式</a>案例 
    4. </div> 

    3)、截圖

    對文字加超鏈接設置其css樣式截圖
    css a樣式說明圖

    瀏覽器測試結果需要大家動手測試觀察,這樣利用學習與掌握,DIVCSS5在這里就不給出瀏覽器測試結果截圖了。

    2、未訪問時候帶超鏈接文本文字顏色是一種并且沒有下劃線,鼠標懸停經過時候是另外一種顏色有下劃線,激活或訪問(過)后文本顏色為另外一種并有下劃線(三種情況三種顏色)

    此實例與我們教程第二大點“二、應用用法案例”相同,大家可以查看根據實例進行實踐,此案例提到了css下劃線樣式設置,大家可靈活試著CSS添加下劃線text-decoration:underline)或CSS去掉下劃線text-decoration:none)應用。

    3、本身一個圖片背景,鼠標經過懸停另外一種背景圖片
    此種情況常常用于網站導航條,本身一種CSS背景樣式,鼠標經過背景圖片又變另外圖片。

    擴展閱讀:
    1)、html img圖片
    2)、css 背景
    3)、css background
    4)、css 背景顏色
    5)、css 背景圖片

    css a鏈接背景圖片變化案例效果圖
    A超鏈接設置背景圖片變化效果圖

    這個案例我們需要準備2張圖片一張是鼠標未經過時候圖片,另外一張鼠標經過時候圖片。

    DIVCSS5提供給大家

    案例素材圖片截圖
    A鏈接案例需要準備素材圖片截圖

    一張命名為a.gif,另外一張命名hover.gif
    (這里顯示擴展名“.gif”)

    圖片打包下載:http://pan.baidu.com/share/link?shareid=313316&uk=268571848

    具體實踐步驟如下:
    1)、新建一個文件夾桌面,命名為"divcss5"

    新建文件夾DIVCSS5
    新建文件夾截圖

    2)、打開新建的“divcss5”文件夾,再里新建一個命名為“images”裝圖片文件夾

    新建裝圖片素材images文件夾
    新建裝圖片images文件夾截圖

    3)、將下載2張圖片素材放入“images”文件夾內

    拷入圖片素材到images文件夾
    圖片素材放入images文件夾里

    4)、DW新建一個html文件并且命名為index.html,保存于“divcss5”文件夾下

    新建html文件
    新建html文件夾

    5)、CSS代碼片段

    1. li,ul{ border:0; padding:0; margin:0; list-style:none} 
    2. /* CSS初始化標簽 */ 
    3. ul.divcss5-img{ margin-top:10px} 
    4. ul.divcss5-img li{text-align:center; float:left;width:121px; 
    5. height:71px; line-height:70px;font-size:14px; font-weight:bold} 
    6. /* 這里為了便于截圖所以對li列表樣式代碼進行CSS換行,實際中可以CSS不換行 */ 
    7.  
    8. ul.divcss5-img li a{ display:block; width:100%; height:100%; font-size:14px; 
    9. color:#FFF; text-decoration:none; background:url(images/a.gif) no-repeat 0 0} 
    10.  
    11. /* 默認鏈接設置顏色為白色,背景圖片,字體加粗,字體大小為14px */ 
    12. ul.divcss5-img li a:hover{background:url(images/hover.gif) no-repeat 0 0} 
    13. /* 因為寬度字體大小字體加粗繼承a樣式,所以我們只設置變化圖片即可 */ 

    6)、HTML代碼片段

    1. <ul class="divcss5-img"> 
    2. <li><a href="#">公司介紹</a></li> 
    3. <li><a href="#">服務項目</a></li> 
    4. <li><a href="#">成功案例</a></li> 
    5. </ul> 

    7)、截圖

    a鏈接背景圖片改變
    CSS A鏈接的圖片背景改變案例截圖 Html a超鏈接樣式圖片背景變化案例截圖

    瀏覽器測試結果需要大家動手測試觀察,這樣利用學習與掌握,DIVCSS5在這里就不給出瀏覽器測試結果截圖了。

    8)、在線樣式:
    http://www.yfzzdoors.com/yanshi/2013022302/

    9)、完整CSS A超鏈接錨文本案例打包下載:

    百度網盤下載 (DIVCSS5整理到百度網盤,大家直接進入點擊即可高速放心下載)

    如需轉載,請注明文章出處和來源網址:http://www.yfzzdoors.com/shili/s57.shtml

    欧美巨大XXXX做受l
    <menu id="0eekc"></menu>
    <menu id="0eekc"></menu>
  • <menu id="0eekc"></menu>
  • <menu id="0eekc"><tt id="0eekc"></tt></menu>
  • <xmp id="0eekc">