利用CSS，連結底線也玩自訂

　　原文連結：CSS Design: Custom Underlines

　　由 A List Apart 雜誌及作者授權翻譯。（Translated with the permission of A List Apart Magazine and the author[s].）

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

　　雖然網頁設計師通常有大量的方法控制文檔如何呈現，但是基本的CSS不能為頁面中連結下方的底線樣式提供很多選擇。不過只需一點小技巧，你就能獲得連結樣式顯示方式的創作控制。

　　自訂底線給一些合適的網站以新的創作機會。自訂底線還能夠被用於為包含在同一個頁面中的不同連結提供額外的視覺線索。

開始

　　你應該從為你底線建立圖形開始。該圖將會水平的重複，而如果你希望（網頁）背景能夠完全顯示的話，你需要建立一個透明的.gif檔案。

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

p { line-height: 1.5; }

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

[補充]

文法：

　　line-height : normal | length

取值：

　　normal : 預設值。預設行高
　　length : 百分比數字 | 由浮點數字和單位標識符組成的長度值，允許為負值。其百分比取值是基於字型的高度尺寸。請參閱 長度單位

說明：

　　檢索或設定對象的行高。即字型最底端與字型內部頂端之間的距離。
　　行高是字型下延與字型內部高度的頂端之間的距離。為負值的行高可用來實現陰影製作效果。
　　假如一個格式化的行包括不止一個對象，則最大行高會被應用。在這種情況下，此屬性不可以為負值。
　　此屬性對於 currentStyle 對象而言是唯讀。對於其他對象而言是可讀寫的。
　　對應的指令碼特性為 lineHeight 。

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

　　在能為連結建立自訂底線之前，我們需要移除已經存在的底線：

a { text-decoration: none; }

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

[補充]

文法：

　　text-decoration : none || underline || blink || overline || line-through

取值：

　　none : 預設值。無裝飾
　　blink : 閃爍
　　underline : 底線
　　line-through : 貫穿線
　　overline : 上劃線

說明：

　　檢索或設定對象中的文本的裝飾。
　　有 href 特性的 a ，以及 u ， ins 對象預設值為 underline 。
　　對象 strike ， s ， del ，預設值是 line-through 。
　　假如 none 值在屬性聲明的最後，所有的先前的其他取值都會被清除。例如，聲明 text-decoration: underline overline blink none 等於聲明 text-decoration: none 。
　　假如對象沒有文本(如 img 元素)或者是空元素(如：)， 此屬性不會發生作用。
　　假如你設定 body 對象的此屬性值為 none ， a 對象將依然保持其原有的底線樣式。除非你針對 a 對象聲明此屬性值。
　　指定塊對象的此屬性將影響其所有內聯子物件。而此影響一旦發生，塊對象容器最終會受到影響。
　　在IE4+中可用的值為 overline 和 blink 。雖然 blink 值被提供，但它不會被作用。
　　此屬性對於 currentStyle 對象而言是唯讀。對於其他對象而言是可讀寫的。
　　對應的指令碼特性為 textDecoration 。

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

　　為了建立自訂的底線，我們為連結元素設定背景映像：

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

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

[補充]

文法：

　　background-image : none | url ( url )

取值：

　　none : 預設值。無背景圖
　　url ( url ) : 使用絕對或相對 url 地址指定背景映像

說明：

　　設定或檢索對象的背景映像。
　　當背景映像與背景顏色( background-color )都被設定了時，背景圖片將覆蓋於背景顏色之上。
　　此屬性對於 currentStyle 對象而言是唯讀。對於其他對象而言是可讀寫的。
　　對應的指令碼特性為 backgroundImage 。

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

　　我們希望這個映像在文本底部順著水平方向重複而不是垂直方向，否則它就將顯示在連結文本自身的後面。我們限制背景映像沿著X軸重複：

a { background-repeat: repeat-x; }

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

[補充]

文法：

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

取值：

repeat : 預設值。背景映像在縱向和橫向上平鋪
no-repeat : 背景映像不平鋪
repeat-x : 背景映像僅在橫向上平鋪
repeat-y : 背景映像僅在縱向上平鋪

說明：

　　設定或檢索對象的背景映像是否及如何鋪排。必須先指定對象的背景映像( background-image )。
　　此屬性對於 currentStyle 對象而言是唯讀。對於其他對象而言是可讀寫的。
　　對應的指令碼特性為 backgroundRepeat 。

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

　　不管字型的大小如何，為了保證我們的映像都出現在連結文本的下面，我們將要使用background-position（背景定位）屬性定位元影像像至連結元素的底部。對於某些背景圖形，例如箭頭，對映像對齊元素的哪一邊，你或許有自己的偏好。就我們這個例子而言，我們將背景置於底部的右邊：

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

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

[補充]

文法：

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

取值：

　　length : 百分數 | 由浮點數字和單位標識符組成的長度值。請參閱 長度單位
　　position : top | center | bottom | left | center | right

說明：

　　設定或檢索對象的背景映像位置。必須先指定 background-image 屬性。
　　該屬性定位不受對象的補丁屬性( padding )設定影響。
　　預設值為： 0% 0% 。此時背景圖片將被定位於對象不包括補丁( padding )的內容地區的左上方。
　　如果只指定了一個值，該值將用於橫座標。縱座標將預設為 50% 。如果指定了兩個值，第二個值將用於縱座標。
　　如果設定值為 right center ，因為 right 作為橫座標值將會覆蓋 center 值，所以背景圖片將被居右定位。
　　對應的指令碼特性為 backgroundPosition 。

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

　　為了給連結文本本文的自訂底線圖形建立空間，我們將增加一些padding（填充）。依賴於所使用字型的大小，底線圖形的精確位置將會相對於連結文本的基準發生改變。建議你從bottom-padding開始，與底線圖形高度同高，調整以適合於你的需要：

a { padding-bottom: 4px; }

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

[補充]

文法：

　　padding-bottom : length

取值：

　　length : 由浮點數字和單位標識符組成的長度值 | 或者百分數。百分數是基於父物件的寬度。不允許負值。

說明：

　　檢索或設定對象底邊的內補丁。對於 td 和 th 對象而言預設值為 1 。其他對象的預設值為 0 。
　　在IE5.5+中此屬性支援內聯對象使用。而在此前的版本中，內聯要素要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute ，或者設定 display 屬性為 block 。
　　此屬性對於 currentStyle 對象而言是唯讀。對於其他對象而言是可讀寫的。
　　對應的指令碼特性為 paddingBottom 。

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

　　因為底線圖形是定位於連結元素的底部，所以我們需要保證連結不能橫跨多行（如果他們被允許跨越多行，那麼只有最低的一行連結文本顯示自訂底線）。我們將使用CSS的white-space屬性禁止連結文本換行。

a { white-space: nowrap; }

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

[補充]

文法：

　　white-space : normal | pre | nowrap

取值：

　　normal : 預設值。預設處理方式。文本自動處理換行。假如抵達容器邊界內容會轉到下一行
　　pre : 換行和其他空白字元都將受到保護。這個值需要IE6+或者 !DOCTYPE 聲明為standards-compliant mode 支援。如果 !DOCTYPE 聲明沒有指定為 standards-compliant mode ，此屬性可以使用，但是不會發生作用。結果等同於 normal 。參閱 pre 對象
　　nowrap : 強制在同一行內顯示所有文本，直到文本結束或者遭遇 br 對象。參閱 noWrap 屬性

說明：

　　設定或檢索對象內空白字元的處理方式。
　　空白字元，像換行，空格，TAB，在HTML文檔中預設的是被忽略的。當此屬性設定為 normal 或者 nowrap 時，你可以使用不換行空格的具名實體 來添加空格，用 br 元素來添加換行。
　　此屬性對你使用文件物件模型(DOM)操作的內容的影響與其對IE顯示內容的影響一樣。
　　此屬性作用於塊對象。
　　此屬性對於 currentStyle 對象而言是唯讀。對於其他對象而言是可讀寫的。
　　對應的指令碼特性為 whiteSpace 。

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

　　連結元素的所有CSS屬性可以合并為：

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

　　如果你想自訂底線的效果只在滑鼠滑過連結時出現，只需設定CSS背景屬性為:hover偽類，取代直接設定於連結元素上的樣式即可。

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

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

樣本