如何去掉a標籤的下劃線

首先來了解下<a>標籤的一些樣式:

<a>標籤的僞類樣式

一組專門的預定義的類稱爲僞類,主要用來處理超鏈接的狀態。超鏈接文字的狀態可以通過僞類選擇符+樣式規則來控制。僞類選擇符包括:
總: a 表示所有狀態下的連接 如 a{color:red}
① a:link:未訪問鏈接 ,如 a:link {color:blue}
② a:visited:已訪問鏈接 ,如 a:visited{color:blue}
③ a:active:激活時(鏈接獲得焦點時)鏈接的顏色 ,如 a:active{color:blue}
④ a:hover:鼠標移到鏈接上時 ,如 a:hover {color:blue}
一般a:hover和a:visited鏈接的狀態(顏色、下劃線等)應該是相同的。
前三者分別對應body元素的link、vlink、alink這三個屬性。
四個“狀態”的先後過程是:a:link ->a:hover ->a:active ->a:visited。另外,a:active不能設置有無下劃線(總是有的)。

舉例:僞類的常見狀態值

  1. <styletype = “text/css”>
  2. <!--
  3. a {font-size:16px}
  4. a:link {color: blue; text-decoration:none;} //未訪問:藍色、無下劃線
  5. a:active:{color: red; } //激活:紅色
  6. a:visited {color:purple;text-decoration:none;} //已訪問:purple、無下劃線
  7. a:hover {color: red; text-decoration:underline;} //鼠標移近:紅色、下劃線
  8. -->
  9. </style>
  1. <style type = “text/css”>   
  2. <!--   
  3. a {font-size:16px}   
  4. a:link {color: blue; text-decoration:none;} //未訪問:藍色、無下劃線   
  5. a:active:{color: red; } //激活:紅色   
  6. a:visited {color:purple;text-decoration:none;} //已訪問:purple、無下劃線   
  7. a:hover {color: red; text-decoration:underline;} //鼠標移近:紅色、下劃線   
  8. -->   
  9. </style>  

如何去掉<a>的下劃線:
對超鏈接下劃線設置 使用代碼"text-decoration"
語法:
text-decoration : none || underline || blink || overline || line-through

text-decoration參數:
none :  無裝飾
blink :  閃爍
underline :  下劃線
line-through :  貫穿線
overline :  上劃線

去掉下劃線的方法就是將其text-decoration設置爲none即可。
如:<style>a{text-decoration:none}</style>
可以在此基礎上發揮:如:<style>.myclass a{text-decoration:none}</style>
<style>div a{text-decoration:none}</style>

可以擴展至<a>標籤的僞類:
a:link{text-decoration:none; cursor:pointer; color:red;}
a:visited{text-decoration:overline; cursor:pointer}
a:active{text-decoration:overline; cursor:pointer}
a:hover{text-decoration:overline; cursor:pointer}

.myclass:hover{text-decoration:overline; cursor:pointer}


<a>標籤的一些屬性

a標籤是成對出現的,以<a>開始, </a>結束
屬性.
Common -- 一般屬性
accesskey -- 代表一個鏈接的快捷鍵訪問方式
charset -- 指定了鏈接到的頁面所使用的編碼方式,比如UTF-8
coords -- 使用圖像地圖的時候可以使用此屬性定義鏈接的區域,通常是使用x,y座標
href -- 代表一個鏈接源(就是鏈接到什麼地方)
hreflang -- 指出了鏈接到的頁面所使用的語言編碼
rel -- 代表文檔與鏈接到的內容(href所指的內容)的關係
rev -- 代表文檔與鏈接到的內容(href所指的內容)的關係
shape -- 使用圖像地圖的時候可以使用shape指定鏈接區域
tabindex -- 代表使用"tab"鍵,遍歷鏈接的順序
target -- 用來指出哪個窗口或框架應該被此鏈接打開
title -- 代表鏈接的附加提示信息
type -- 代表鏈接的MIME類型

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章