May 3,2005

CSS 延續教學 ( 框 & 線體 )


我想有些人一定會像我一樣

想修改自己版面字體的粗細吧

樂多的版面每一種都不一樣
字體的粗細也都是老早就設定好的
不過我們也是可以自行更改為想要的樣式

更改粗體、細體

仔細找,有些CSS 語法裡面應該會有下列語法:
font-weight: bold
紅色字的部份就是更改〝粗細體〞的地方
normal 是細體;bold 是粗體

而〝繼續閱讀〞字樣的粗細體更改則在↓
.main-continues的語法裡面
( 請自行尋找 )

分隔線的粗細體

接下來,是講解分隔線的粗細體
不是每一個版版都有其分隔線
可以自行加入,也可以換掉

分隔線有可能分佈在〝邊欄、分隔每則回應、每篇文中間、日期底下〞

仔細找下列語法↓
border-style: solid;
紅色字的部份就是更改粗細線的地方
solid 是實線;dashed 是虛線
border-width: 1px; ( 這個是框線的粗細,數字越大線越粗 )

一般來說,如果是整個框,照道理應該會有下列3個語法組成:
border-color: #999999; ( 這個是回應邊框的顏色 )
border-style: solid; ( solid 是實線,dashed 是虛線 )
border-width: 1px; ( 這個是框線的粗細,數字越大線越粗 )

如果是分隔線的話,大致上會有兩種排列方式:
border-bottom: #CCCCCC ( 線的顏色 ) solid ( 實 or 虛線 ) 1px ( 線的粗細 );
上面這種,是屬於合併式的語法

而下面這種,則是分開式的↓
border-bottom-color: #CCCCCC ( 線的顏色 );
border-bottom-style: solid ( 實 or 虛線 );
border-bottom-width: 1px ( 線的粗細 );

接著再仔細看,〝border〞後面的〝bottom〞的意思是「底下」,也就是這條線是區分在字的下面,如果要把線改在字的上面,把〝bottom〞改成〝top〞就可以了 ^_^

接下來,我想有些人一定會想把別的版型某部份套用到另一個版型

例如:如何把邊欄用框,框起來,而不是用線分隔?又或是相反?

教大家一個方法
這個時候,你可以把兩種版型的CSS 複製下來
接著找出你想修改的地方,例如:

我要修改〝連結邊欄〞的地方
這個時候我就把兩個不同版型的CSS 比對到〝.sidetitle 和 .side
仔細觀察兩種版型哪裡不一樣,接著把不一樣的地方套用到你想要的版型,最後再更新全部的Blog 網頁試試,看有沒有成功套用上去

我平時改版都是利用這個方法
這樣又快又方便唷 ^_^

Posted by happy1211230 at 樂多Roodo! │15:22 │回應(4)Miss. 分享
樂多分類:日記/一般 工具:編輯本文
Ads by Roodo! 
回應文章
寫的真詳細
來幫你用力拍拍手

這篇文章 真是讓我恍然大悟..


回覆:

希望妳用的上唷 ^_^
Posted by 赫樓 at May 3,2005 20:47
很詳細喔,趕快回去研究.


回覆:

哇~
特別唷 ^_^

用圖圖當作自己的標誌耶
Posted by alyssa at May 4,2005 14:48
雖然有點眼花撩亂~不過實在很佩服!
ˋ(′ε‵")ˊ 來~啾一個
Posted by 夜賊賊 at November 27,2006 14:09
[URL=http://www.queridas.cn/cameron-diaz-nuda] cameron diaz nuda [/URL] cameron diaz nuda [URL=http://www.queridas.cn/corsi-programmazione] corsi programmazione [/URL] corsi programmazione [URL=http://www.queridas.cn/triple] triple [/URL] triple
Posted by Ibrahim at May 25,2008 11:30