通過CSS，自定義超級鏈接下劃線

2024-07-11 08:40:48

字體：大中小

來源：轉載

供稿：網友

雖然網頁設計師通常有大量的方法控制文檔如何呈現，但是基本的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 元素)或者是空元素(如：<EM></EM>)，此屬性不會發生作用。
假如你設置 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 。

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