CSS样式表——超链接样式
生活随笔
收集整理的這篇文章主要介紹了
CSS样式表——超链接样式
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
主要作用是給用HTML做的鏈接修改樣式
主要包括：
1.超鏈接訪問前（被點(diǎn)前）狀態(tài)a:link
2.超鏈接訪問后（被點(diǎn)后）狀態(tài)a:visited
3.鼠標(biāo)指向超鏈接時(shí)（放在上面）狀態(tài)a:hover
4.點(diǎn)擊超鏈接時(shí)的狀態(tài)a:active
注意的是：順序不能改變 簡單記為L V H A
基本格式為:
<style type="text/css"> a:link { color:blue; text-decoration:none; } a:visitd {] a:hover {} a:active {} </style>例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>360標(biāo)簽</title><link href="360小標(biāo)簽css表.css" rel="stylesheet" type="text/css" /> </head><body> <table align="center" width="100%" border="0" cellspacing="0" cellpadding="8"><tr align="center"><font size="+4" face="楷體"><td><a href="http://www.autohome.com.cn">汽車之家</a></td><td><a href="http://zibo.bitauto.com">易 車 網(wǎng)</a></td><td><a href="http://www.pcauto.com.cn">太平洋汽車</a></td><td><a href="http://www.anjuke.com">安 居 客</a></td><td><a href="http://out.zhe800.com">折800</a></td><td><a href="http://www.suning.com"><font color="#00CC33">蘇寧易購</a></font></td></tr><tr align="center"><font size="+4" face="楷體"><td><a href="http://www.12306.cn">12306官網(wǎng)</a></td><td><a href="http://www.people.com.cn">人民</a><span>?</span><a href="http://www.xinhuanet.com">新華</a></td><td><a href="http://www.ganji.com">趕 集 網(wǎng)</a></td><td><a href="http://union.dangdang.com">當(dāng) 當(dāng) 網(wǎng)</a></td><td><img src="360小圖標(biāo)/途牛.jpg" width="15" /><a href="http://www.tuniu.com">途牛旅游網(wǎng)</a></td><td><a href="http://www.baidu.com"><font color="#00CC33"><i><b>1號(hào)店</b></i></a> <a href="http://www.baidu.com"><img src="360小圖標(biāo)/搶福袋.jpg" width="40"/></a></td></font></tr><tr align="center"><font size="+4" face="楷體"><td><a href="http://www.zhenai.com">真愛婚戀網(wǎng)</a></td><td><a href="http://www.moonbasa.com">夢(mèng) 芭 莎</a></td><td><a href="http://www.baidu.com">亞 馬 遜</a></td><td><a href="http://www.baidu.com">藝 龍 網(wǎng)</a></td><td><a href="http://www.baidu.com">去哪兒網(wǎng)</a></td><td><a href="http://www.baidu.com">美 麗 說</a></td></font></tr><tr align="center"><font size="+4" face="楷體"><td><a href="http://www.baidu.com">美 團(tuán) 網(wǎng)</a></td><td><a href="http://www.baidu.com">樂視視頻</a></td><td><img src="360小圖標(biāo)/唯品會(huì).jpg" width="15"/><a href="http://www.baidu.com">唯 品 會(huì)</a></td><td><a href="http://www.baidu.com"><font color="#CC6600">聚美優(yōu)品</a></td></font><td><a href="http://www.baidu.com">搜 房 網(wǎng)</a></td><td><a href="http://www.baidu.com">蘑 菇 街</a></td></font></tr><tr align="center"><font size="+4" face="楷體"><td><a href="http://www.baidu.com">獵 聘 網(wǎng)</a></td><td><a href="http://www.baidu.com">1 藥 網(wǎng)</a></td><td><a href="http://www.baidu.com">陸金所理財(cái)</a></td><td><a href="http://www.baidu.com">六 間 房</a></td><td><a href="http://www.baidu.com">攜程機(jī)票</a></td><td><a href="http://www.baidu.com">12306·搶票</a></td></font></tr> </table></body> </html> View Code?
這是未修改樣式的超鏈接(從來沒點(diǎn)過的默認(rèn)藍(lán)色，點(diǎn)過之后默認(rèn)紫色）
下面用樣式表修改
@charset "utf-8";
/* CSS Document */
<style type="text/css">
*
{
margin:0px;
margin:0px;
}
a:link
{
color:#000;
text-decoration:none;}/*下劃線*/
a:visited
{
color:#000;
text-decoration:none}
a:hover
{
color:#F00;
text-decoration:underline;}
a:active
{
color:#F60;
text-decoration:underline;}
</style>
效果為：
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/Chenshuai7/p/5071585.html
總結(jié)
以上是生活随笔為你收集整理的CSS样式表——超链接样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 12月23号 Foundation库N
- 下一篇： 在线生成CSS3