由 A List Apart 雜志及作者授權(quán)翻譯。（Translated with the permission of A List Apart Magazineand the author[s].）

　　說明：文章中“[補(bǔ)充]”內(nèi)容系譯者所補(bǔ)充添加（來自 CSS 2.0 中文手冊），目的是方便讀者理解相關(guān)內(nèi)容。

　　雖然網(wǎng)頁設(shè)計(jì)師通常有大量的方法控制文檔如何呈現(xiàn)，但是基本的CSS不能為頁面中鏈接下方的下劃線樣式提供很多選擇。不過只需一點(diǎn)小技巧，你就能獲得鏈接樣式顯示方式的創(chuàng)作控制。

　　自定義下劃線給一些合適的網(wǎng)站以新的創(chuàng)作機(jī)會(huì)。自定義下劃線還能夠被用于為包含在同一個(gè)頁面中的不同鏈接提供額外的視覺線索。

開始

　　你應(yīng)該從為你下劃線創(chuàng)建圖形開始。該圖將會(huì)水平的重復(fù)，而如果你希望（網(wǎng)頁）背景能夠完全顯示的話，你需要?jiǎng)?chuàng)建一個(gè)透明的.gif文件。

　　如果你的下劃線圖形有幾像素高，那么你應(yīng)該增加的文本的line-height（行距），以增加上一行底部與下一行頂部的之間的空間。

p { line-height: 1.5; }

-------------------------------------------------

[補(bǔ)充]

語法：

　　line-height : normal length

取值：

　　normal :�� 默認(rèn)值。默認(rèn)行高
　　length :�� 百分比數(shù)字 由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長度值，允許為負(fù)值。其百分比取值是基于字體的高度尺寸。請(qǐng)參閱 長度單位

說明：

　　檢索或設(shè)置對(duì)象的行高。即字體最底端與字體內(nèi)部頂端之間的距離。
　　行高是字體下延與字體內(nèi)部高度的頂端之間的距離。為負(fù)值的行高可用來實(shí)現(xiàn)陰影效果。
　　假如一個(gè)格式化的行包括不止一個(gè)對(duì)象，則最大行高會(huì)被應(yīng)用。在這種情況下，此屬性不可以為負(fù)值。
　　此屬性對(duì)于 currentStyle 對(duì)象而言是只讀的。對(duì)于其他對(duì)象而言是可讀寫的。
　　對(duì)應(yīng)的腳本特性為 lineHeight 。

[page_break]

　　在能為鏈接創(chuàng)建自定義下劃線之前，我們需要移除已經(jīng)存在的下劃線：

a { text-decoration: none; }

-------------------------------------------------

[補(bǔ)充]

語法：

　　text-decoration : none underline blink overline line-through

取值：

　　none  :�� 默認(rèn)值。無裝飾
　　blink  :�� 閃爍
　　underline  :�� 下劃線
　　line-through  :�� 貫穿線
　　overline  :�� 上劃線

說明：

　　檢索或設(shè)置對(duì)象中的文本的裝飾。
　　有 href 特性的 a ，以及 u ， ins 對(duì)象默認(rèn)值為 underline 。
　　對(duì)象 strike ， s ， del ，默認(rèn)值是 line-through 。
　　假如 none 值在屬性聲明的最后，所有的先前的其他取值都會(huì)被清除。例如，聲明 text-decoration: underline overline blink none 等于聲明 text-decoration: none 。
　　假如對(duì)象沒有文本(如 img 元素)或者是空元素(如：<EM></EM>)， 此屬性不會(huì)發(fā)生作用。
　　假如你設(shè)置 body 對(duì)象的此屬性值為 none ， a 對(duì)象將依然保持其原有的下劃線樣式。除非你針對(duì) a 對(duì)象聲明此屬性值。
　　指定塊對(duì)象的此屬性將影響其所有內(nèi)聯(lián)子對(duì)象。而此影響一旦發(fā)生，塊對(duì)象容器最終會(huì)受到影響。
　　在IE4+中可用的值為 overline 和 blink 。雖然 blink 值被提供，但它不會(huì)被作用。
　　此屬性對(duì)于 currentStyle 對(duì)象而言是只讀的。對(duì)于其他對(duì)象而言是可讀寫的。
　　對(duì)應(yīng)的腳本特性為 textDecoration 。

-------------------------------------------------

　　為了創(chuàng)建自定義的下劃線，我們?yōu)殒溄釉�素設(shè)置背景圖像：

a { background-image: url(underline.gif); }

-------------------------------------------------

[補(bǔ)充]

語法：

　　background-image : none url ( url )

取值：

　　none  :�� 默認(rèn)值。無背景圖
　　url ( url )  :�� 使用絕對(duì)或相對(duì) url 地址指定背景圖像

說明：

　　設(shè)置或檢索對(duì)象的背景圖像。
　　當(dāng)背景圖像與背景顏色( background-color )都被設(shè)定了時(shí)，背景圖片將覆蓋于背景顏色之上。
　　此屬性對(duì)于 currentStyle 對(duì)象而言是只讀的。對(duì)于其他對(duì)象而言是可讀寫的。
　　對(duì)應(yīng)的腳本特性為 backgroundImage 。

-------------------------------------------------

　　我們希望這個(gè)圖像在文本底部順著水平方向重復(fù)而不是垂直方向，否則它就將顯示在鏈接文本自身的后面。我們限制背景圖像沿著X軸重復(fù)：

a { background-repeat: repeat-x; }

-------------------------------------------------

[補(bǔ)充]

語法：

background-repeat : repeat no-repeat repeat-x repeat-y

取值：

repeat  :�� 默認(rèn)值。背景圖像在縱向和橫向上平鋪
no-repeat  :�� 背景圖像不平鋪
repeat-x  :�� 背景圖像僅在橫向上平鋪
repeat-y  :�� 背景圖像僅在縱向上平鋪

說明：

　　設(shè)置或檢索對(duì)象的背景圖像是否及如何鋪排。必須先指定對(duì)象的背景圖像( background-image )。
　　此屬性對(duì)于 currentStyle 對(duì)象而言是只讀的。對(duì)于其他對(duì)象而言是可讀寫的。
　　對(duì)應(yīng)的腳本特性為 backgroundRepeat 。

[page_break]

　　不管字體的大小如何，為了保證我們的圖像都出現(xiàn)在鏈接文本的下面，我們將要使用background-position（背景定位）屬性定位圖像至鏈接元素的底部。對(duì)于某些背景圖形，例如箭頭，對(duì)圖像對(duì)齊元素的哪一邊，你或許有自己的偏好。就我們這個(gè)例子而言，我們將背景置于底部的右邊：

a { background-position: 100% 100%; }

-------------------------------------------------

[補(bǔ)充]

語法：

　　background-position : length length
　　background-position : position position

取值：

　　length  :�� 百分?jǐn)?shù) 由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長度值。請(qǐng)參閱 長度單位 
　　position  :�� top center bottom left center right

說明：

　　設(shè)置或檢索對(duì)象的背景圖像位置。必須先指定 background-image 屬性。
　　該屬性定位不受對(duì)象的補(bǔ)丁屬性( padding )設(shè)置影響。
　　默認(rèn)值為： 0% 0% 。此時(shí)背景圖片將被定位于對(duì)象不包括補(bǔ)丁( padding )的內(nèi)容區(qū)域的左上角。
　　如果只指定了一個(gè)值，該值將用于橫坐標(biāo)。縱坐標(biāo)將默認(rèn)為 50% 。如果指定了兩個(gè)值，第二個(gè)值將用于縱坐標(biāo)。
　　如果設(shè)置值為 right center ，因?yàn)?right 作為橫坐標(biāo)值將會(huì)覆蓋 center 值，所以背景圖片將被居右定位。
　　對(duì)應(yīng)的腳本特性為 backgroundPosition 。

-------------------------------------------------

　　為了給鏈接文本正文的自定義下劃線圖形創(chuàng)建空間，我們將增加一些padding（填充）。依賴于所使用字體的大小，下劃線圖形的精確位置將會(huì)相對(duì)于鏈接文本的基線發(fā)生改變。建議你從bottom-padding開始，與下劃線圖形高度同高，調(diào)整以適合于你的需要：

a { padding-bottom: 4px; }

-------------------------------------------------

[補(bǔ)充]

語法：

　　padding-bottom : length

取值：

　　length  :�� 由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長度值 或者百分?jǐn)?shù)。百分?jǐn)?shù)是基于父對(duì)象的寬度。不允許負(fù)值。 

說明：

　　檢索或設(shè)置對(duì)象底邊的內(nèi)補(bǔ)丁。對(duì)于 td 和 th 對(duì)象而言默認(rèn)值為 1 。其他對(duì)象的默認(rèn)值為 0 。
　　在IE5.5+中此屬性支持內(nèi)聯(lián)對(duì)象使用。而在此前的版本中，內(nèi)聯(lián)要素要使用該屬性，必須先設(shè)定對(duì)象的 height 或 width 屬性，或者設(shè)定 position 屬性為 absolute ，或者設(shè)定 display 屬性為 block 。
　　此屬性對(duì)于 currentStyle 對(duì)象而言是只讀的。對(duì)于其他對(duì)象而言是可讀寫的。
　　對(duì)應(yīng)的腳本特性為 paddingBottom 。

[page_break]

　　因?yàn)橄聞澗�圖形是定位于鏈接元素的底部，所以我們需要保證鏈接不能橫跨多行（如果他們被允許跨越多行，那么只有最低的一行鏈接文本顯示自定義下劃線）。我們將使用CSS的white-space屬性禁止鏈接文本換行。

a { white-space: nowrap; }

-------------------------------------------------

[補(bǔ)充]

語法：

　　white-space : normal pre nowrap

取值：

　　normal  :�� 默認(rèn)值。默認(rèn)處理方式。文本自動(dòng)處理換行。假如抵達(dá)容器邊界內(nèi)容會(huì)轉(zhuǎn)到下一行
　　pre  :�� 換行和其他空白字符都將受到保護(hù)。這個(gè)值需要IE6+或者 !DOCTYPE 聲明為standards-compliant mode 支持。如果 !DOCTYPE 聲明沒有指定為 standards-compliant mode ，此屬性可以使用，但是不會(huì)發(fā)生作用。結(jié)果等同于 normal 。參閱 pre 對(duì)象
　　nowrap  :�� 強(qiáng)制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者遭遇 br 對(duì)象。參閱 noWrap 屬性

說明：

　　設(shè)置或檢索對(duì)象內(nèi)空格字符的處理方式。
　　空格字符，像換行，空格，TAB，在HTML文檔中默認(rèn)的是被忽略的。當(dāng)此屬性設(shè)置為 normal 或者 nowrap 時(shí)，你可以使用不換行空格的命名實(shí)體 &nbsp; 來添加空格，用 br 元素來添加換行。
　　此屬性對(duì)你使用文檔對(duì)象模型(DOM)操作的內(nèi)容的影響與其對(duì)IE顯示內(nèi)容的影響一樣。
　　此屬性作用于塊對(duì)象。
　　此屬性對(duì)于 currentStyle 對(duì)象而言是只讀的。對(duì)于其他對(duì)象而言是可讀寫的。
　　對(duì)應(yīng)的腳本特性為 whiteSpace 。

-------------------------------------------------

　　鏈接元素的所有CSS屬性可以合并為：

a {
    text-decoration: none;
    background: url(underline.gif) repeat-x 100% 100%;
    padding-bottom: 4px;
    white-space: nowrap;
}

　　如果你想自定義下劃線的效果只在鼠標(biāo)滑過鏈接時(shí)出現(xiàn)，只需設(shè)置CSS背景屬性為:hover偽類，取代直接設(shè)置于鏈接元素上的樣式即可。

a {
    text-decoration: none;
    padding-bottom: 4px;
    white-space: nowrap;
}

a:hover {
    background: url(underline.gif) repeat-x 100% 100%;
}

示例

這個(gè) 靜態(tài)的下劃線和這個(gè)翻轉(zhuǎn)效果可用于流行時(shí)尚設(shè)計(jì)。

寶貝，這個(gè)靜態(tài)下劃線和這個(gè)翻轉(zhuǎn)效果很帥吧。

這個(gè)靜態(tài)下劃線和這個(gè)動(dòng)畫翻轉(zhuǎn)效果 可用于顯示外部鏈接

（動(dòng)畫翻轉(zhuǎn)效果并非能在所有瀏覽器都顯示，例如Safari 1.0，只能顯示動(dòng)畫的第一幀）。

 

大多數(shù)人在上網(wǎng)的時(shí)候，都會(huì)瀏覽網(wǎng)頁提供給我們的信息。