替部落格中的文字加上可愛底線

在噗友新竹瘋浪客的噗中看到這篇介紹:為部落格文章加上色彩繽紛的重點底線
蠻有趣的,雖然不是第一次看到類似的教學,不過不曉得為什麼今天就突然心血來潮也想加一下 ^^
其實主要是用CSS語法來控制,讓文字在某個樣式時,套個底圖
於是就產生了「重點畫線」的效果 :)

那篇分享的教學文章中是利用span來套樣式
好處是,你要多少種畫線底圖就自己多定義幾組樣式
不過這樣一來,想要畫個重點還得到html原始碼檢視的模式底下去作
當然如果直接去改html area的原始碼,也是可以自己定義按鈕直接套用
只是可以的話我會盡量不去改那咚咚,日後如果遇到html area要更新版本,比較不會麻煩

所以我用的方式是直接在CSS定義裡頭改寫 U tag 的呈現方式
因為U tag是html的標準底線標記,肯定各家的html area code應該都有包含囉

            U { text-decoration: none; background: url(圖片網址) repeat-x 100% 100%; padding-bottom: 0px; }
          
只要在文章裡面把想要畫重點的文字標記起來,按一下



就可以在瀏覽的時候呈現畫重點的效果啦 ^O^



雖然這個方法就總是用同一個底線圖檔,不過對我這種懶人來說,簡單好用就好~

留言