css 語法匯總(2009-11-08修復死圖完成)

時常有格友提問我的Blog版面css設定事宜,有見及此,我將目前使用中的css公開,大家在裏面找你想要嘅,加快美化及為你的家變身.

以下css設定大多由我一開始加入Blog時到處收集回來,並不是我的制作,本着分享是一種快樂,又因 Yahoo Blog本身的設定又太弱太悶,令到各位要自己去揾css,見到別人弄得到,自然也想來過變裝,希望各位應用愉快~

本網誌語法將不斷更新.

Blog 主頁背景

大幅圖背景解釋 fixed 固定不會上下移動,center正中,top置頂開始

body.blog_my{background:#FFFFFF url(http://i524.photobucket.com/albums/cc321/HelloMissYam/23ea4156f9d4.gif) fixed center top;}

小幅圖背景:

body.blog_my{background:#FFFFFF url(http://i524.photobucket.com/albums/cc321/HelloMissYam/20070827_74a2a51b431a9797e1ef3vUAz2.gif);}

解釋: 圖片會自動增加填滿整個版面

/*左右各欄位標題沒有背景圖弄到透明*/

.col-150 .rc_bd .rc_bc .hd .titlebar .hd,
.col-150 .rc_bd .rc_bc .hd .titlebar
{background:transparent;}

/*左右各欄位標題有背景圖*/

.col-150 .rc_bd  .rc_bc .hd .titlebar .hd{text-align:center;font-weight:bold;background:#ffffff url(http://i240.photobucket.com/albums/ff40/tina88888888/nsy1206/n342.gif);}

/*左右各欄位背景統一是透明底*/
.col-150 .rc_bd  .rc_bc .bd{background:transparent;}

/*左右各欄位統一相同背景圖*/
.col-150 .rc_bd  .rc_bc .bd{background:#FFFFFF url(http://i524.photobucket.com/albums/cc321/HelloMissYam/4ba479408616.gif);}

/*左右欄位換背景*/
日曆

#calendar .bd {background:#FFFFFF url(http://i524.photobucket.com/albums/cc321/HelloMissYam/5927baadecb1.jpg);}

  <=  改變日曆連結色

/*改變日曆連結色*/
#calendar .bd a:link {color:red;font-style:italic;}

(自行更改色碼、font-style:italic為斜體)

/*改變日曆背景色*/
#calendar .bd {background:#ffffff;}

/*左右欄位各有不同的背景圖*/

網誌分類
#folder .bd {background:#FFFFFF url(http://i524.photobucket.com/albums/cc321/HelloMissYam/5927baadecb1.jpg);}

最新網誌
#article_new .bd {background:#FFFFFF url(http://i524.photobucket.com/albums/cc321/HelloMissYam/5927baadecb1.jpg);}

最新回應
#comment_new .bd {background:#FFFFFF url(http://i524.photobucket.com/albums/cc321/HelloMissYam/5927baadecb1.jpg);}

統計資料
#statistic .bd {background:#FFFFFF url(http://i524.photobucket.com/albums/cc321/HelloMissYam/5927baadecb1.jpg);}

文章標題背景
.mod-alist-full .main-hd{background:#FFFFFF url(http://i524.photobucket.com/albums/cc321/HelloMissYam/55a4ee7114ce.gif) fixed 50% 30%;}

中間及最大欄位標題透明
.col-600 .rc_bd .rc_bc .hd .titlebar,
.row-760 .rc_bd .rc_bc .hd .titlebar,
.row-920 .rc_bd .rc_bc .hd .titlebar
{background:transparent;}

中間及最大欄位標題有背景圖
.col-600 .rc_bd .rc_bc .hd .titlebar,
.row-760 .rc_bd .rc_bc .hd .titlebar,
.row-920 .rc_bd .rc_bc .hd .titlebar
{background:url(http://i524.photobucket.com/albums/cc321/HelloMissYam/fc7e3773ca6d.gif);}

中間及最大欄位版面透明,可透視網誌背景

.col-600 .rc_bd .rc_bc .bd, .col-600 .rc_bd .rc_bc .ft,
.row-920 .rc_bd .rc_bc .bd, .row-920 .rc_bd .rc_bc .ft,
.row-760 .rc_bd .rc_bc .bd, .row-760 .rc_bd .rc_bc .ft
{background:transparent;}

請留意要弄中間網誌背景透明,紅框内之透明度亦要調較.

如想中間網誌分類版面有背景圖是以下語法,今次我用了紅心飄下來,效果真是好浪漫的感覺.

.col-600 .rc_bd  .rc_bc .bd{background:url(http://i524.photobucket.com/albums/cc321/HelloMissYam/fed0bccaad47.gif);}

移除其他 BLOG 友發表的相關內容及喜愛此 BLOG 的人同時都愛看的欄位

.mod-relatives div, .mod-relatives .rc div {height:0px;}

/*改換連結字體顏色*/
a:hover{color:#FF0932;}
.mod-alist-full .main-bd{font-size:16px;}

/*指向連結有顏色及字體會變大*/

a:hover{color:#FF0932;font-size:XXpx;}

而 本身 Yahoo Blog  XX 預設係 15  

/*改換指向連結有圖片作為底圖顯示*/

a:hover{background-image:url(http://img217.imageshack.us/img217/4493/5730830525837251381gn4.gif);}
.mod-alist-full .main-bd{font-size:16px;}

回應欄背景

.mod-alist-full .alist-comment .comment-ctnr{background:#FFFFFF url(http://i524.photobucket.com/albums/cc321/HelloMissYam/7ded054ebd38-1.jpg);}

/*我的檔案更換背景及圖示按扭*/

#profile_highlight .bd{background:#FFFFFF url(http://i524.photobucket.com/albums/cc321/HelloMissYam/4ba479408616.gif);}

解釋: 一般格友用這語法,但Cannon的有另外一句語法

#canon_profile_highlight .bd{background:#FFFFFF url(http://i524.photobucket.com/albums/cc321/HelloMissYam/4ba479408616.gif);}

解釋:  如果加入了 Cannon blog 換背景圖要用上面這句語法

div.backhomtbtn a.backtomyblog {background:url(更換回主頁圖片地址) no-repeat center;height:43px;}

div.addfrdbtn a.addtofriends {background:url(更換加入BLOG友圖片地址) no-repeat center center;height:75px;} 

div.subscribebtn a.add_subscription {background:url(更換訂閱圖片地址) no-repeat center;height:72px;}

解釋1: height = 高度,如果圖片高是72px(像素),便要填上,否則掛上後會影响外觀.

解釋2: 加入BLOG友,訂閱 圖掛上後,如你仍在登入狀態下是無法檢測,必須上登出狀態下以遊客或其他登入者身份進入才能看到 我的檔案是否成功換圖

以下語法是可以令Blog最頂的工作列第一行消失,但灰色第2段保留

#blog_masshead{width:920px;font-size:12px;float:centre;font-weight:bold;color:#000000;padding:0;margin:0 auto;background:transparent;) repeat-x 0 5px;margin-bottom:10px;}

解釋1: height = {height:40px;}高度,如果圖片高是40px(像素),便要填上,否則掛上後會影响外觀.選圖勿過高

解釋2: 更換回自己blog圖片 圖掛上後,如你仍在登入狀態下是會見到數個圖片並排,不用驚訝,只要在登出狀態下以遊客,外人身份登入看到的只會是一個圖.

/*更換招呼語框圖*/

放入了背景圖但沒有框邊

#blast .rc_bc .bd{background-image:url(圖片地址);}

這是透視留言欄位版面, 不要背景圖,可透視blog大背景

#blast .rc_bc .bd{background:transparent;}

如要有框又要透明請加入border語法. (文章最底有border 款式解釋)

#blast .rc_bc .bd{
border-top-style:dotted;
border-left-style:dotted;
border-right-style:dotted;
border-bottom-style:dotted;
border-color:#04F5F5 #04F5F5 #04F5F5 #04F5F5;
border-width:3px 3px 3px 3px;
background:transparent url(圖link);}

#blast .rc_bc .bd{
border-top-style:dotted;
border-left-style:dotted;
border-right-style:dotted;
border-bottom-style:dotted;
border-color:#04F5F5 #04F5F5 #04F5F5 #04F5F5;
border-width:3px 3px 3px 3px;
background:transparent ;}  

/* 我的網誌內容搜尋更換背景圖 */      

/* 整個網誌外圍邊框 */

為了各位看得到效果, 我今次用了白色波點做外框

祗有主頁有外框:

BODY.blog_my {border-left:10px dotted #FFFFFF;border-right:10px dotted #FFFFFF;border-top:10px dotted #FFFFFF;border-bottom-width:10px;border-bottom-style:dotted;border-bottom-color:#FFFFFF;}

全部每頁外框可以改做     (小神仙提供)
BODY{border-left:10px dotted #FFFFFF;border-right:10px dotted #FFFFFF;border-top:10px dotted #FFFFFF;border-bottom-width:10px;border-bottom-style:dotted;border-bottom-color:#FFFFFF;}

滑鼠指向連結有底圖及圍邊範例

a:hover{
border-top-style:dotted;
border-left-style:dotted;
border-right-style:dotted;
border-bottom-style:dotted;
border-color:#04F5F5 #04F5F5 #04F5F5 #04F5F5;
border-width:3px 3px 3px 3px;}
a, a:link, a:visited{color:#BE07FF;}
a:hover{color:#FF0932;BACKGROUND:url(圖 link);}

再提供一個範例:

a:hover{
border-top-style:dashed;border-left-style:dashed;border-right-style:dashed;border-bottom-style:dashed;border-color:#F3B1EF #F3B1EF #F3B1EF #F3B1EF;border-width:2px 2px 2px 2px;}
a, a:visited{color:purple;}
a:hover{color:black;background:transparent url(http://i524.photobucket.com/albums/cc321/HelloMissYam/de0b48473639.gif);}

數字部份,色碼也可以改,數字愈大,框線便愈粗.

可以使用作為外框的式樣:
none  (無邊框)

dotted  (點線) 上圖用了白色點線式樣.

dashed  (虛線)
solid  (實線)
double  (雙線)
groove  (立體凹線)
ridge  (立體凸線)
inset  (立體嵌入線)
outset  (立體隆起線)

如想知道顏色色碼代號,可到blog的编輯版面工具---外觀---完全自定模式內揀選色碼, 色碼code開始為 # 後加6位英 or 數目字.

  延伸閱讀

好多朋友問的問題,均可在下列文章找到答案,請各位看完唔明再問啦!!!

Rose Garden 不斷更新css教學,所以請注意常溜覽 BLOG 設置

http://hk.myblog.yahoo.com/jw!KvO.Ua6RGAXja05ehum1DZyf4_OotV3N73rIUVri/index?l=f&id=28

請看完以上附加的延伸閱讀網誌設定文章後,仍有不清楚之處才提問,

因能有可能巳可在裏面找到答案.本人網誌太多,歡迎慢慢瀏覽

因圖片及回應太多, 影响網誌開得好慢,所以本篇停止回應,

如有問題可在這版提出來.

http://hk.myblog.yahoo.com/RoseBlog-HelloMissYam/article?mid=14308

連結Rose.