CSS為網頁設計者們提供了豐富而靈活的頁面元素表現形式的控制手段。但是,或許你可能注意到了,對于下劃線,CSS提供的可選操作卻不是很多。一般情況下,人們看到的下劃線基本上都是橫直線,缺少生氣和靈動。不過,路并不是死的,通過一些絕妙的改造,我們還是可以做出富有創意的下劃線來使頁面更為美觀。
這是一個自定義下劃線的例子:自定義的下劃線 。是不是很酷呢?除了能
讓你的網頁呈現出一個與眾不同的風格之外,它還能對于文檔中不同的文字類型給與不同的視覺外觀,起到提醒或者著重的作用。
下面我們就來一起學習如何自定義與眾不同的下劃線。
首先,我們得先準備一幅作為下劃線的圖片。你可以利用先成的,也可以自己動手繪制。需要提醒注意的是,你所準備的圖片應該適合水平方向上的重復,最好還能使透明的GIF格式,這樣能夠確保背景不被遮擋。
另外,如果你所準備的下劃線圖片在高度(粗細)上占用比較多的像素,那么,應當增加該行文本和下行文本之間的行距(line-height)空間,可以這么設定:
p { line-height: 1.5; }
接下來要做的事情是取消原來默認的下劃線,這樣我們才能把自定義的下劃線應用到指定文本,使用如下的CSS設定(它的含義是讓超鏈接文字沒有任何修飾):
a { text-decoration: none; }
好了,現在可以來創建自定義的下劃線了,這里,我們用準備的圖片設定為超鏈接元素的背景圖片,如下:
a { background-image: url(underline.gif); }
當然,文字的長度未必和原圖的長度相等,這就需要考慮圖片重復的問題,也就是說,應當把重復限定在水平方向的X軸上,可以如下設定:
a { background-repeat: repeat-x; }
還有個必須考慮的問題,就是字的大小改變怎么辦?要讓下劃線的圖片始終顯示在超鏈接文字的下方,而不必理會文字大小的話,我們應當使用CSS中的背景位置(background-position)屬性來定位圖片位于超鏈接元素色底部。而對于如箭頭這樣的下劃線圖片,還得考慮超鏈接的文本邊緣和圖片邊對齊。 下面的這個例子將下劃線背景圖片的位置限定在右下角:
a { background-position: 100% 100%; }
如何控制自定義的下劃線圖片和文字之間的空白呢?這個可以通過增加填充(padding)來做到。下劃線圖片相對于超鏈接文本基線(baseline)的確切位置以來與所用的字的大小。建議你一開始將底部填充(bottom-padding)的大小設定同下劃線圖片的高度相等,然后再慢慢調整到合適位置(下面這個CSS設定超鏈接的底部填充為4像素):
a { padding-bottom: 4px; }
因為下劃線的圖片被定位在超鏈接元素的底部,所以需要確保所用的超鏈接文本沒有跨行,否則,只有處在最下面的超鏈接文本會出現自定義的下劃線了。怎么解決呢,那就是阻止超鏈接文本跨行產生,可以通過CSS的white-space屬性來完成:
a { white-space: nowrap; }
好了,把上面提到的這些超鏈接標記的CSS設定合并起來,結果如下:
a {
text-decoration: none;
background: url(underline.gif) repeat-x 100% 100%;
padding-bottom: 4px;
white-space: nowrap;
}
還記得有些超鏈接文本沒有下劃線,但是當鼠標移到它的上面的時候,下劃線就浮現出來的情況么?自定義的下劃線也可以做到這個效果,那就在:hover上設定超鏈接背景,而不是在超鏈接標記a上設定,如下:
a {
text-decoration: none;
padding-bottom: 4px;
white-space: nowrap;
}
a:hover {
background: url(underline.gif) repeat-x 100% 100%;
}
怎么樣,是不是很簡單呢?在來看看一些例子和它們對應的CSS設定:
靜態下劃線
a#example3a {
text-decoration: none;
background: url('/pic/200542191630940.gif') repeat-x 100% 100%;
}
40個可愛粉色兒童房設計裝修設計2018-04-22
100款國外食品包裝設計集包裝設計2017-07-17
40幅日本海報設計作品海報設計2017-07-04
46款茶品牌和包裝設計欣賞包裝設計2017-04-14
20款現代簡約風格名片設計名片設計2016-04-18
59款日本優秀logo設計欣賞標志設計2016-03-29
10個CSS簡寫/優化技巧CSS教程2013-06-04
css的margin縮寫方式CSS教程2012-05-23
CSS網頁布局時常犯的幾種CSS教程2009-09-28
CSS浮動屬性Float詳解CSS教程2009-09-17
CSS定位屬性Position詳解CSS教程2009-09-17
CSS布局教程:絕對定位和相CSS教程2009-07-15