|
為鏈接加上樣式
記得我在本章開(kāi)始的時(shí)候提到過(guò)"留意全局鏈接樣式",有個(gè)方法能避免在無(wú)意間為具名錨點(diǎn)標(biāo)簽加上樣式,而將我們的目標(biāo)范圍縮小到具備href屬性的超鏈接上.
在文件的HTML內(nèi)定義鏈接色彩的時(shí)代已經(jīng)過(guò)去了,現(xiàn)在我們能改用:link,:visited,:active,:hover這些偽類為超鏈接指定各種獨(dú)特的樣式,把這些設(shè)計(jì)細(xì)節(jié)跟標(biāo)簽分開(kāi).
讓我們看看幾個(gè)能夠用在一般鏈接上的CSS樣式:
a:link {
color: green;
text-decoration: none;
font-weight: bold;
}
十分簡(jiǎn)單,上面這段聲明會(huì)使所有使用href的錨點(diǎn)標(biāo)簽變成綠色,粗體,同時(shí)不加下劃線.
除了text-decoration:none外,我們也能指定underline(預(yù)設(shè)值),overline(那些愛(ài)搞怪的家伙有福了),甚至可以同時(shí)使用兩者,像這樣:
a:link {
color: green;
text-decoration: underline overline;
font-weight: bold;
}
圖7-3就是一般瀏覽器顯示underline overline組合的方式,有點(diǎn)不符合規(guī)矩,但是可行.
圖7-3 加上下劃線上劃線文字裝飾的鏈接示例
背景
為連接指定獨(dú)特樣式的可能性似乎永無(wú)止境,大多數(shù)我們?cè)谄渌麡?biāo)簽上使用過(guò)的CSS規(guī)則都可以用在錨點(diǎn)上,舉例來(lái)說(shuō),我們也能為鏈接指定背景顏色,甚至是背景圖片,或許能用個(gè)小圖片,對(duì)齊鏈接文字的左邊或右邊,像圖7-4這樣:
圖7-4 為鏈接加上對(duì)齊右側(cè)的圖片當(dāng)作背景
能夠達(dá)成7-4效果的CSS大致是這樣:
a:link {
padding-right: 15px;
background: url(link_icon.gif) no-repeat center right;
}
我們將圖片對(duì)齊中線(垂直)以及鏈接文字的右方,并且在右側(cè)加上額外的內(nèi)補(bǔ)丁,讓圖片在顯示的時(shí)候不會(huì)與任何文字重疊.
點(diǎn)狀邊框
厭倦了經(jīng)年累月的單調(diào),實(shí)心底線鏈接了嗎?我們可以在邊框?qū)傩灾付╠otted或dashed,我們就能建立...才對(duì)了,點(diǎn)狀或虛線的邊框.
首先,我們需要使用text-decoration屬性關(guān)掉預(yù)設(shè)的下劃線,接著再加上1像素寬,綠色的點(diǎn)狀border-bottom.
a:link {
color: green;
text-decoration: green;
border-bottom: 1px dotted green;
}
有個(gè)重點(diǎn)必須留意,如果你想使點(diǎn)狀邊線的顏色與鏈接文字相同的話,就必須在border-bottom屬性里聲明顏色,結(jié)果如圖7-5所示.
圖7-5 使用點(diǎn)狀邊線的鏈接
你也能使用上面的做法混用色彩,為鏈接文字指定一種顏色(使用color屬性),并且為邊線指定另一種顏色(使用border-bottom屬性),此外,也可以在border-bottom屬性內(nèi)使用solid,dashed設(shè)定值
留意:windows上的internet explorer再使用1像素寬的時(shí)候沒(méi)辦法正確顯示dotted屬性,配合dotted邊線使用1像素寬時(shí),顯示的效果看起來(lái)就像dashed,沒(méi)啥好擔(dān)心的,只是個(gè)小問(wèn)題.
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 標(biāo)記語(yǔ)言——錨點(diǎn) [3] 下一頁(yè) 標(biāo)記語(yǔ)言——錨點(diǎn) [5]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 4 頁(yè) 標(biāo)記語(yǔ)言——錨點(diǎn) [4]
