這陣子休息時翻了一下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)
所以改了語法來試
<span class="UNDERLINE">欲有底線的文字</span>
明天有空再來找一下有沒有其它的解決方法

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

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

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


這樣就完成了,接著在文章裡把想要加入重點底線的字在原始檔裡按照下面方法就可以完成!
<span class="UNDERLINE"> 有底線的文字 </span>

更多野兔的文章推薦:

4 Comments

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *