連結文字的上劃線、底線、刪除線（貫穿線）、閃爍等可以通過CSS的text-decoration屬性來實現。其屬性值與效果相對應的關係如下：
text-decoration:
none : 無裝飾
blink : 閃爍
underline : 底線
line-through : 刪除線（貫穿線）
overline : 上劃線
學習了此屬性的一些用法，我們不難看出，連結文字上劃線、底線同時出現可以通過：text-decoration: underline overline，即可以實現了。或許你有疑問，這兩個屬性值可以同時了現嗎？答案是肯定的，是可以實現的，我們看下面的運行效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>www.webjx.com</title><style type="text/css"><!-- a.textb { text-decoration:none; color:#c00;} a.textb:hover { text-decoration : underline overline; color:#00f;}--></style></head><body><a href="http://www.webjx.com/" class="textb">www.webjx.com</a></p></body></html>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
看到效果了吧，雖然我們實現了連結文字上劃線、底線同時出現。但還有很多細節我們並不滿意。一、線型單一，只是實線；二、顏色不可更改（預設的線條顏色為連結文字的顏色）；三、距離文字的邊距不可控制，感覺離文字太近了。
我們想到了更好的辦法，可以去除text-decoration屬性，給連結加上、下邊框線，同樣可以讓上劃線、底線同時出現。我們看下面的運行效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>www.webjx.com</title><style type="text/css"><!-- a.texta { display:block; text-decoration:none; color:#c00; border-bottom:1px dashed #fff; border-top:1px dashed #fff;} a.texta:hover { border-bottom:1px dashed #c00; border-top:1px dashed #c00; color:#666;}--></style></head><body><a href="http://www.webjx.com/" class="texta">www.webjx.com</a><a href="http://www.webjx.com/" class="texta">www.webjx.com</a><a href="http://www.webjx.com/" class="texta">www.webjx.com</a></p></body></html>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
在預設情況下，區塊層級元素的預設寬度是父級元素的寬度，並且佔據一整行的頁面空間。所以我們看上面的效果，就出現了一整行都給連結所佔據，我們可以作一些調整，設定連結元素為左浮動，並設定左邊距為30px。我們來看看效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>www.webjx.com</title><style type="text/css"><!-- a.texta { display:block; float:left; margin-left:30px; text-decoration:none; color:#c00; border-bottom:1px dashed #fff; border-top:1px dashed #fff;} a.texta:hover { border-bottom:1px dashed #c00; border-top:1px dashed #c00; color:#666;}--></style></head><body><a href="http://www.webjx.com/" class="texta">www.webjx.com</a><a href="http://www.webjx.com/" class="texta">www.webjx.com</a><a href="http://www.webjx.com/" class="texta">www.webjx.com</a></p></body></html>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
你可以改變上面的運行代碼作一些調試，多動手、多思考是學習CSS的好辦法。：）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
