標簽的CSS偽類,點擊后變色

可以利用CSS的偽類實現：

a:link，定義正常鏈接的樣式； 
a:visited，定義已訪問過鏈接的樣式； 
a:hover，定義鼠標懸浮在鏈接上時的樣式； 
a:active，定義鼠標點擊鏈接時的樣式。 

例子：

<style type="text/css">
a:link { 
color:#3C3C3C; 
text-decoration:underline; 
} 
a:visited { 
color:#0000FF; 
text-decoration:none; 
} 
a:hover { 
color:#FF00FF; 
text-decoration:none; 
} 
a:active { 
color:#D200D2; 
text-decoration:none; 
} 
</style>
<a href="#" target="black">點我點我</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不能設置有無下划線（總是有的）。

舉例：偽類的常見狀態值

<style type = “text/css”> 
<!-- 
a {font-size:16px} 
a:link {color: blue; text-decoration:none;} //未訪問：藍色、無下划線 
a:active:{color: red; } //激活：紅色 
a:visited {color:purple;text-decoration:none;} //已訪問：紫色、無下划線 
a:hover {color: red; text-decoration:underline;} //鼠標移近：紅色、下划線 

如何去掉<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>標簽的偽類：-->
<style type="text/css">

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}

</style>

 

 

<a>標簽的一些屬性

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