讀《精通CSS》第三版 ——對鏈接應用樣式

1、基於層疊對鏈接選擇器進行排序(IE7和更低版本不支持在除鏈接之外的其他元素上使用僞類選擇器)

LVHFA:Lord Vader Hates Furry Animals

2、讓下劃線更有趣

代碼代替下劃線

a:link,a:visited{border-bottom:1px dotted #000;}

3、已訪問的鏈接的樣式

a:visited{

padding-right:20px;

background:url(/img/check.gif) no-repeat right middle;

4、爲鏈接目標設置樣式

.comment:target{

background-color:yellow;

|

5、突出不同類型的連接(IE6和更低版本不支持屬性選擇器)

 使用[att^=val]屬性選擇器尋找以文本http:開頭的所有鏈接。

a[href^="http:"]{

background:url(/img/externalLink.gif) no-repeat right top;

padding-right:10px;

}

 使用[att$=val]屬性選擇器尋找以特定值(比如:.pdf或.doc)結尾的所有鏈接。

a[href$=".pdf"]{

background:url(img/pdfLink.gif) no-repeat right top;

padding-right:10px;

}

6、創建類似按鈕的鏈接

a{

display:block;

width:6.6em;

line-height:1.4;

text-align:center;

text-decoration:none;

border:1px solid #66a300;

background-color:#8cca12;

color:#fff;

}

簡單的翻轉:

a:hover,a:focus{

background-color:#f7a300;

border-color:#ff7400;

}

圖像翻轉:

a:link,a:visited{

background:url(button.jpg) left top no-repeat;

}

a:hove,a:focus{

background:url(button2.jpg);

}

Pixy樣式的翻轉

a:link,a:visited{

background:url(button.jpg) left top no-repeat;

}

a:hove,a:focus{

background:url(button.jpg) right bottom no-repeat;

}

7、純CSS工具提示

a.tooltip{

position:relative;

}

a.tooltip span{

display:none;

}

a.tooltip:hover span{

display:block;

position:absolute;

top:1em;

left:2em;

}


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