[部落-CSS語法] 將文章加入重點底線

這陣子休息時翻了一下CSS的書，也到網路上參考了別人的應用
這一篇野兔就順便當作寫筆記備忘囉，來介紹怎麼在文章裡畫重點
效果範例：我是重點、我是要點

首先要先瞭解一下你所用的部落格空間有沒有完整支援用戶自訂 CSS 功能
野兔所使用的PIXNET當然有囉，所以跟著一起做吧！

第一步
就是先進CSS編輯裡(在pixnet後台管理→部落格樣式管理→樣式設計精靈→CSS 原始碼編輯)
在裡頭新增


UNDERLINE {

  text-decoration: none;

  background: url(圖片位址) repeat-x 100% 100%;

  padding-bottom: 0px;

  font-weight:bold;

}

圖檔位址，就將您做好的底線圖傳到網路空間裡就可以了
野兔自己是把圖放在pixnet的相簿裡，方便自己使用！

使用方法：
直接在文章原始檔裡加上<UNDERLINE>欲有底線的文字</UNDERLINE>

接著簡介一下CODE裡的意思

1.text-decoration是文字效果，這裡設為none
它的參數有
none
overline (上線)
underline (底線)
line-throughx (刪除線)
blink (閃爍效果)

2.padding 為增加間距距離
在html裡很常被使用到，使用後會有"增加間距"的效果
例如：padding:5px，這樣子上下左右都會有5px的間距
更進階使用則為 padding:5px 4px 3px 2px
四個參數依照的順序為 [上] [右] [下] [左] ，如此就可以完成間距的設定

3.font-weight 為字體的設定
屬性是用來設定字體的粗細。
粗細的設定值可以從 100 ~ 900 (900 是最粗的)
也可以將粗細設定為 bold (厚)、bolder (更厚)、及 normal (正常)

當上述程式碼加入後，以後在寫文章就可以隨意加入底線畫重點囉~

直接在文章原始檔裡加上<UNDERLINE>欲有底線的文字</UNDERLINE>

欲有底線的文字、欲有底線的文字

希望大家用的開心^^

--補充--
發文不久後發現IE6對<UNDERLINE>欲有底線的文字</UNDERLINE>似乎沒有作用 (野兔用Firefox)
所以改了語法來試
欲有底線的文字
明天有空再來找一下有沒有其它的解決方法

IE6不能顯示解決方法
將上面那一段CSS語法寫進記事本裡，然後另存新檔為underline.css (請確認副檔名為.css)
請找網頁空間擺放underline.css ( 野兔為hinet的用戶，有60MB的網頁空間，所以野兔就放在那囉 )

接著在pxinet後台管理→側邊欄位設定，找個欄位加入

<link rel="stylesheet" href="http://您的網址/underline.css">

這樣就完成了，接著在文章裡把想要加入重點底線的字在原始檔裡按照下面方法就可以完成！
 有底線的文字

野兔

FUN 攝影 Kerwin 的野兔部落

野兔發表在痞客邦留言(19) 人氣(9,980)

[19/01/24] ㄚ麥於文章「[露營-南投] 埔里 - 顏氏牧場 | ...」留言：
早安!這幾年露營的風氣很盛孩子大一點就可以帶著一起出遊露...
[18/07/13] 總幹事於文章「[美國-旅遊] 美國自然歷史博物館（Am...」留言：
有恐龍化石最大野兔標本 ~ 很大間的博物館 !...
[16/06/29] 輝哥於文章「[台南] 小西腳青草茶、蓮藕茶...」留言：
台南小西脚連藕茶很好喝，老板也很好。我不小打破一杯，老板馬上...
[16/06/09] anthena 於文章「[生活] 花花草草...」留言：
不好意思打個岔，最後那幾張圖看來，那個應該不是鳳凰花，而是黃...
[15/04/30] 娜* 於文章「[臺南-旅遊] 南化大地谷、關山螢火蟲 ...」發表了一則私密留言
[15/03/22] france 於文章「[嘉義] 中正大學...」留言：
您好您所拍攝的中正大學相當美麗想請問是否可以引用第一張...
[15/03/16] Yang Bessy 於文章「[台南] 黃花風鈴-東豐路...」留言：
您好，想請問您台南的木棉花跟風鈴木是在同一個地方嗎?...
[15/01/27] Jill Chang Ju Yin 於文章「[臺北-美食] 玉丼 - 臺灣之丼|日式...」留言：
Dear你好xx 我是亞當的蛇行銷我們目前因為很多...
[15/01/03] 您的暱稱 ... 於文章「[雲林] 北港老街...」留言：
請問你知道北港老街你po的麻荖的店名嗎，我超愛吃的，想問他們...
[14/11/24] 珊妮豆豆於文章「[生活] 聖誕禮物...」留言：
感覺好棒、好特別的聖誕禮物喔~ 希望大家聖誕節快樂，也...

17 則留言

opensecrets

謝謝野兔的教學，可是那個圖圖應該怎樣做才不會太大？？

2009-02-11 00:27

這個圖檔給你參考一下 http://p4.p.pixnet.net/albums/userpics/4/4/550444/499167d4ecc28.gif

2009-02-11 09:34

蔚海藍天/河小童

這種語法真讚呢!! 感覺很像在書上畫蠟筆標重點一樣XDDD

2009-02-11 01:22

對啊，很有趣的語法，但是在IE6似乎有問題，還是用Firefox的好

2009-02-11 09:36

小布

很讚喔！有發文就來用看看

2009-02-11 14:18

有問題再回來問問野兔

2009-02-11 15:08

高妹

這個下次高妹也要學學！先謝謝野兔^^

2009-02-12 02:13

到時有問題再回來問問野兔

2009-02-12 08:32

佶也

有重點加底線方便瀏覽

2009-02-12 21:11

剛CSS的空間不能連，換了空間放這年頭免費的空間好像都不太可靠了

2009-02-12 21:22

hir818

COOL, 阿肥剛好要找這功能,就在兔子家找到了. 謝謝 ^__^

2009-02-13 14:20

這功能在IE的顯示有BUG，所以要用別的方法解決目前我是另外連結CSS，再用 OOXX 的方式解決IE6不能顯示的問題有問題再回來問野兔吧

2009-02-13 14:36

dllee

我也想要有底線... 學起來囉 ^^

2009-02-16 13:37

這一招還蠻好用的，使用起來很滿意^^

2009-02-16 21:17

ruoyou

所以底線要自己先畫好上傳是這個意思嗎@@

2009-02-19 14:38

對丫，看妳喜歡畫什麼樣的就自己做^^

2009-02-19 14:42

呆丸北拜

不是 HTML 標籤，在 HTML 中像 XML 那樣使用自定標籤加 CSS 的形式不被 IE 支援。負責文字加底線的 HTML 標籤是 u { text-decoration:none; background:url('http://p4.p.pixnet.net/albums/userpics/4/4/550444/499167d4ecc28.gif') repeat-x bottom; }

2009-02-20 17:28

因為要實現不同的底線所以沒那樣做了！我已經改成 的方法加底線感謝idaiwan的告知！

2009-02-20 19:05

麥斯

這語法找了好久ㄟ，在兔子大哥您這兒瞧見了，就不客氣給收下了，而且立刻給用上。太感謝了!!

2009-03-04 23:06

好用就好！有問題可以回來再問問野兔^^

2009-03-04 23:10

摩卡

這語法和效果超棒的小弟立刻用在我的網誌上囉

2009-03-10 17:36

好用就好，好東西就是分享給大家知道

2009-03-10 18:02

AVON2008

我第一部已經完成了，可是這裡看不懂 1.圖檔位址，就將您做好的底線圖傳到網路空間裡就可以了？ 2.蠟筆顏色我該如何選擇?

2009-05-17 07:51

先把底線圖上傳到可外連的網路空間(pixnet相簿也可以) 然後把上傳好的圖檔網址貼到下面的"圖片位址" UNDERLINE { text-decoration: none; background: url(圖片位址) repeat-x 100% 100%; padding-bottom: 0px; font-weight:bold; } 如果有其它的顏色請修改 UNDERLINE 名稱例如： UNDERLINE2 { text-decoration: none; background: url(圖片位址2) repeat-x 100% 100%; padding-bottom: 0px; font-weight:bold; } 最後把寫好的CSS語法存成 underline.css 然後放到網路空間裡(例如hinet個人網頁空間) 然後將下列的語法貼到您BLOG的公告裡或是側邊欄位裡，即可！ <link rel="stylesheet" href="http://您的網址/underline.css"> 試試看，有問題再過來發問

2009-05-17 20:40

我是這麼設定，請問對嗎?有沒有哪裏錯誤呢? UNDERLINE { text-decoration: underline; background: url(http://minibear1978.googlepages.com/hh5.gif) repeat-x 100% 100%; padding-bottom: 5px 4px 3px 2px; font-weight:bold; } 如果有其它的顏色請修改 UNDERLINE 名稱例如： UNDERLINE2 { text-decoration: underline; background: url(http://minibear1978.googlepages.com/hh6.gif) repeat-x 100% 100%; padding-bottom: 5px 4px 3px 2px; font-weight:bold; } 1.存檔為underline.css ，那請問存檔類型及編碼，要選擇什麼? 如果是上傳到google可以嗎? 2.您的網址← 是只上傳CSS後的網址嗎? 3.請問是用什麼軟體繪畫底線，抱歉我前面沒有問清楚抱歉問題很多，在麻煩版主詳解，謝謝!!

2009-05-18 20:39

1. text-decoration: underline; 要改成 text-decoration: none; 2. 直接開筆記本存成CSS檔，用預設即可 3. google要試耶，我不是用google的空間之前我用起來好像怪怪的，沒多試就放到別的空間去了！ 4. CSS網址類似如下 http://minibear1978.googlepages.com/underline.css 5. 可以使用photoshop、photoimpact或免費的photocap

2009-05-18 20:49

皮蛋

野兔大大，不好意思打擾您。可以幫我看一下我的語法有錯嗎？底線沒辦法顯示啊 Orz red{text-decoration: none;background:httP://yunchi.miroko.tw/red.gif repeat-x 100% 100%;padding-bottom: 5px;font-weight:bold;} blue{text-decoration: none;background:httP://yunchi.miroko.tw/blue.gif repeat-x 100% 100%;padding-bottom: 5px;font-weight:bold;} pu{text-decoration: none;background:httP://yunchi.miroko.tw/pu.gif repeat-x 100% 100%;padding-bottom: 5px;font-weight:bold;} ye1{text-decoration: none;background:httP://yunchi.miroko.tw/ye1.gif repeat-x 100% 100%;padding-bottom: 5px;font-weight:bold;} 然後放在放在「部落格」→「基本/進階設定」→「部落格描述」內的語法在此謝謝你囉。

2009-08-11 17:17

上面語法看起來是OK的你先弄一個有套用底線的TEST，我再幫你看看哪出問題了！

2009-08-12 16:14

謝謝野兔大大，我已經在blog放了一篇test文章。「紅線、黃線、紫線、藍線」這些字下面應該要出現底線，但是還是沒出現 Orz 附上我的圖檔，是gif，大小是118×6 (像素) 再次謝謝野兔大大。

2009-08-12 18:10

過去處理了唷！

2009-08-12 23:45

哇！！成功了 ^O^ 謝謝野兔大大 ^++++++++^ 大感謝 *^^*

2009-08-13 00:04

不客氣^^

2009-08-13 13:17

起起

想請問一下像是無名相簿每個相簿的名稱下面想加底線語法是? 因為我找過大家都是給刪底線的語法耶

2010-06-25 22:38

FUN 攝影 Kerwin 的野兔部落

拍照記錄生活,就是FUN攝影　．　簡單生活,輕鬆自在
http://hares.tw 訂閱野兔