CSS語法總整理－培迪的痞客邦部落格

　　常常有部落格新人問我怎樣修改版面，這些是常用的 css語法，我整理出來，讓大家參考。我沒有提供幫訪客設計版面的服務，甚歉。其實，修改版面並不難，請大家自己打造個人風格的版面，當您自己修改完成時，心中的快樂是很難形容的。加油喔～～

怎樣修改呢？css在哪裡呢？
1.將所選用的圖片網址，加到語法中
2.你的大頭貼下方【編輯個人檔案】→ 【面板設定】→【自訂樣式】
3.將語法貼到自訂樣式（css語法）中，就行了...

/*blog profile 部落格檔案、個人資料、自我介紹加圖片*/
table#bloginfo th {background:url(部落格檔案標題圖片的網址);}
table#bloginfo td {background:url(部落格檔案敘述圖片的網址);}
table#usrinfo th {background:url(個人資料標題圖片的網址);}
table#usrinfo td {background:url(個人資料敘述圖片的網址);}
#yusrintro p {background:url(自我介紹圖片的網址);}

/*自訂欄位寬度三欄式*左欄寬150右欄寬200*/
.thrcol .yc3main {width:100%;float:left; margin-left:-210px;}
.thrcol .yc3mainbd {margin-left:210px;}
.thrcol .yc3pri {width:100%;float:right;margin-right:-160px;}
.thrcol .yc3pribd {margin-right:160px;}
.thrcol .yc3subbd {width:200px;float:right;}
.thrcol .yc3sec {width:150px;}
.thrcol .yc3sub{z-index:1;}
.thrcol .yc3pri,.thrcol .yc3main{z-index:10;}

每個人版型設定不同。（使用二欄式或三欄式）

/*two col layout 二欄式版面加大寬度設定*/
.twocolga #yhtw_mastfoot, .twocoldr #yhtw_mastfoot {width:950px;margin:0 auto;}
.twocolga[class], .twocoldr[class]{min-width:950px;behavior:none;}
.twocolga .ycnt3col,.twocoldr .ycnt3col {zoom:1;width:950px;text-align:left;margin:0 auto;}

/*三欄式版面寬度設定*/

.thrcol #yhtw_mastfoot {width:950x;margin:0 auto;}
.thrcol[class]{min-width:950px;behavior:none;}
.thrcol .ycnt3col {zoom:1;width:950px;text-align:left;margin:0 auto;}

如果您要更改自訂欄位的寬度，詳細內容請閱讀怎樣加寬自訂欄位？

/*自訂欄位連結列自動加框*/
.ycntmod .mbd ul.list li {BACKGROUND: url(底圖網址 ) 0% 100%; COLOR:white; border:5px; BORDER-TOP-STYLE: double; BORDER-RIGHT-STYLE: double; BORDER-LEFT-STYLE: double; BORDER-BOTTOM-STYLE: double;}

外框的樣式有8種，可更改顏色、粗細、距離，詳細說明請閱讀自動加框

/*make coomment bar回應引用更換圖片*/
div.btncomment a {display:block;height:高px;width:寬px;background:url(我要回應圖片網址) no-repeat;}
div.btntrackback a {display:block;height:高px;width:寬px;background:url(我要引用圖片網址) no-repeat;}

/*comment list management管理回應欄*/
.listbd {background:url(管理回應底圖網址); color:#文字顏色之色碼;}
#ycmntlist table th {background: url(管理回應標題圖網址); color: #文字顏色之色碼; }
#ycmntlist .btncmntre {background:url(管理回應按鈕圖網址);}

/*guestbook留言版加圖片*/

#ymsgboard q a {background:url(留言板按鈕圖網址) ;}
#ymsgboard .mhd {background:url(留言板標題圖網址) ;}
#ymsgboard .mbd {background:url(留言板底圖網址) ;}

/*Article隱藏文章寬欄位*/
.yc3pribd .mhd{display:none}
.yc3pribd .mbd{zoom:1;filter:alpha(opacity:底圖透明度)}

/*Blog category list module隱藏左右欄位標題*/
.yc3sec .mhd,.yc3sub .mhd{display:none}
.yc3sec .mbd,.yc3sub .mbd{zoom:1;filter:alpha(opacity:底圖透明度)}

/*Blog album module隱藏部落格相簿*/
#ymodalbum{display:none;}

/*隱藏留言板*/
#ymodmsgbd h3{display:none}

/*Blog latest update module隱藏更新日期*/
#ymodupdate{display:none}

/*Profile隱藏自我介紹欄*/
#ymodprf{display:none}

/* 隱藏頁首和頁尾*/
#yhtw_masthead,#yhtw_mastfoot{display:none;}

/* 隱藏整個部落格*/

body{background-image:url(背景圖網址); background-attachment:fixed;}
.ycntmod { filter:alpha(opacity:0); }

隱藏整個部落格的語法，使用 Firefox 火狐瀏覽器無法隱藏...IE瀏覽器才可以隱藏部落格。如果您是使用Firefox 火狐瀏覽器，詳細語法請閱讀隱藏部落格

/*Links連結去底線*/
a,a:link,a:visited{color:#未連結時色碼;text-decoration: none}
a:hover{color:#連結時色碼;text-decoration: none;}

/*Links網頁超連結虛線框*/
a,a:link,a:visited{color:#色碼;text-decoration:none}
a:hover{color:# 色碼;background-image:url(http://圖檔網址.gif);background- repeat:repeat;border:1px dotted #色碼;position:relative;top:1px;left:1px}

/*Links連結浮出效果*/
a:hover{ border: 2px #fff outset }

/*Background背景圖底圖重複*/
body{background:#ffffff url(背景圖網址) repeat;}

/*Background背景圖底圖固定*/
body{ background:#ffffff url(背景圖網址) no-repeat;background-attachment: fixed}

/*部落格標題圖*/
#yblogtitle h1 { display:block; float:left; background:url(標題圖網址)no-repeat; width:圖片寬度px; height:圖片高度px; font-size:0; line-height:0; text-indent:-5000px; overflow:hidden; cursor:pointer; cursor:hand;}

/*Blog title標題置中*/
#yblogtitle .mbd,#yblogtitle .mft{font-size:180%;color:#色碼;font-family:新細明體; color:#D23C78;text-align:center;}
#yblogtitle .thd a{width:168px;height:40px;top:-0px;position:relative;left:0px;display:block;}
#yblogtitle .thd h1 {font-size:180%;color:white;font-family:新細明體;}

/*Module latest upup更新日期前小圖*/
#ymodupdate .mbd .date{background:url(小圖網址) left center no-repeat;padding-left:11px;font-size:104%;font-family:verdana;}

/*Nav module list左右欄位小圖*/
.ycntmod .mbd ul.list li {background:url(小圖網址1) left .1em no-repeat;padding-left:25px;margin-bottom:3px;_margin-bottom:3px;_line-height:1.5em;}
.ycntmod .mbd ul.list li.more {margin:-3px 0 0 -3px;text-align:right;background:url(小圖網址2) 20px center no-repeat;}

/*Article content module文章前小圖*/
.yblogcnt .blgtitlebar {margin-bottom:9px;zoom:1;}
.yblogcnt .blgtitlebar h2 {font-size:125%;font-weight:bold;background:url(小圖網址) no-repeat;padding-left:60px;}

/*btnsbsrb訂閱部落格圖*此語法自己看不見訂閱圖/
div#btnsbsrb a{display:block;width:圖片寬度px;height:圖片高度px;overflow:hidden;background:url(訂閱圖網址) no-repeat;margin:0;}
div#btnsbsrb_nologin a{display:block;width:圖片寬度px;height:圖片高度px;overflow:hidden;background:url(訂閱圖網址) no-repeat;margin:0;}
#yblogtitle .tft {text-align:right;padding-bottom:0px;position:relative;}

/*btnsbsrb訂閱部落格圖*此語法自己可以看見訂閱圖/
div#btnsbsrb_nologin a,div#btnsbsrb a {display:block;position:absolute;top:10px;left:91%; width:90px;height:33px;background:url(訂閱圖網址) no-repeat;}

/*性別圖*/
#ymodprf .horos img{display:none;}
#ymodprf .horos{width:圖片寬度px;height:圖片高度px;background:url(性別圖網址) center no-repeat;}

/*滑鼠游標*/
body{cursor:url(未連結時游標網址)}
a:hover {cursor:url(連結時游標網址)}

/*Opacity for blast招呼語圖框+文字置中*/
#yblast{zoom:1;position:relative;top:-20px;left:0px;margin:0 0 -55px 0;z-index:2;}
#yblast .text,#yblast .bg{overflow:hidden;padding:5px 5px;width:招呼語圖框寬px;height:招呼語圖框高px;}#yblast .text{zoom:1;margin:-55px 0 0;}
#yblast .text a#yblast a.edit{background:url(圖框網址);width:13px;height:13px;}
#yblast .bg {zoom:1; filter:alpha(opacity:透明度); background: url(圖框網址) no-repeat}
#yblast .text{color:#文字顏色之色碼;font-size:90%;}

/*shared rounded corner for all modules無框線語法*/
.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {zoom:1;background:url() left top no-repeat;margin-right:5px;}
.ycntmod .rctop div {background:url() right top no-repeat;height:5px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcbtm {zoom:1;background:url() left bottom no-repeat;margin-right:5px;}
.ycntmod .rcbtm div {background:url() right bottom no-repeat;height:5px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcl {padding-left:5px;background:url() repeat-y;}.ycntmod .rcr {zoom:1;padding-right:5px;background:url() right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

/*部落格單色外框線*/
body {border: 框線大小px double #大框線色碼 ;}

/*部落格漸層外框線*/
html{border-top : 大小px solid #色碼; border-bottom : 大小px solid #色碼; border-left : 大小px solid #色碼; border-right : 大小px solid #色碼; }

/*按鈕框框*/
input,select{background: #框底色碼;color: #文字色碼;border: 1px solid #框線色碼;FONT-SIZE: 9px;font-family:verdana;}

/*Text color for module左右欄位標題文字顏色*/
.text {color: #文字顏色之色碼}

/*Text color for blog title部落格標題字體顏色*/
#yblogtitle .text {color: #文字顏色之色碼}

/*Text color for blog title部落格敘述文字*/
#yblogtitle .text {color:#文字顏色之色碼;}

/*Text color for main content中間文章欄位文字顏色*/
.yc3pribd .text {color: #文字顏色之色碼}

/*Nav module body左右欄位底圖*/
.yc3sec .mbd, .yc3subbd .mbd, .yc3sec .mft, .yc3subbd .mft{background-image:url(底圖網址);}

/*Nav module header左右欄標題底圖*/
.yc3sec .mhd, .yc3subbd .mhd, .yc3sec .mhd a, .yc3subbd .mhd a,.yc3sec .mhd a:link, .yc3subbd .mhd a:link,.yc3sec .mhd a:visited, .yc3subbd .mhd a:visited{background-image : url(底圖網址);}

/*Blog title部落格標題敘述欄底圖*/
#yblogtitle .mbd,#yblogtitle .mft{background: url(底圖網址) repeat; }#yblogtitle h1{color: #000000 ;}

/*Main content body文章底圖*/
.yc3pribd .mbd, .yc3pribd .mft, #yreplymsg table, #ysbscrblist table, #ybloginfo table, #yusrinfo table, #yusrintro p{
background-image:url(底圖網址);color: #FF0099} #ymodcal .mbd td strong {color: #FF0099;}

/*Main content header文章標題底圖*/
.yc3pribd .mhd{ background:url(圖片網址) repeat; color:#FF0099}

/*Background color for whole page背景底色*/
body {background-color: #色碼}

/*Background color for blog title部落格敘述底色*/
#yblogtitle .mbd, #blogtitle .mft {background-color: #色碼}

/*Background color for module左右欄位內容底色*/
.yc3sec .mbd, .yc3subbd .mbd, .yc3sec .mft, .yc3subbd .mft {zoom:1; background: #色碼; filter:alpha(opacity:透明度)}

/*Nav module header左右欄位標題底色*/
.yc3sec .mhd, .yc3subbd .mhd{background: #色碼;color: #色碼;}

/*Opacity for main content文章底圖透明度*/
.yc3pribd .rctop,.yc3pribd .rctop div,.yc3pribd .rcl,.yc3pribd .rcr,.yc3pribd .rcbtm,.yc3pribd .rcbtm div {zoom:1; filter:alpha(opacity:透明度)}
#yblast{display}

/*Opacity for sub column左右欄位透明度*/
.yc3subbd .rctop,.yc3subbd .rctop div,.yc3subbd .rcl,.yc3subbd .rcr,.yc3subbd .rcbtm,.yc3subbd .rcbtm div, .yc3sec .rctop,.yc3sec .rctop div,.yc3sec .rcl,.yc3sec .rcr,.yc3sec .rcbtm,.yc3sec .rcbtm div {zoom:1; filter:alpha(opacity:透明度)}

/*Opacity for blogtitle部落格標題敘述透明度*/
#yblogtitle .rctop, #blogtitle .rctop div, #yblogtitle .rcl, #yblogtitle .rcr, #yblogtitle .rcbtm, #yblogtitle .rcbtm div {zoom:1; filter:alpha(opacity:透明度)}

如果您是使用Firefox 瀏覽器，會發現版面的透明度無效。這時只要在每個想要呈現透明的部分，使用這語法 background:url( ) ，詳細說明請閱讀使用Firefox 瀏覽器時的透明版面

/*捲軸變色*/

html{
SCROLLBAR-FACE-COLOR: 色碼;                     /*設定軸面顏色*/
SCROLLBAR-HIGHLIGHT-COLOR:色碼;              /*設定軸面三角左邊顏色*/
SCROLLBAR-SHADOW-COLOR: 色碼;               /*設定軸面三角右邊顏色*/
SCROLLBAR-3DLIGHT-COLOR: 色碼;                 /*設定左立體邊顏色*/
SCROLLBAR-DARKSHADOW-COLOR: 色碼;      /*設定右立體面顏色*/
SCROLLBAR-ARROW-COLOR: 色碼;                 /*設定箭頭的顏色*/
SCROLLBAR-TRACK-COLOR: 色碼;                   /*設定軸軌的顏色*/
}

捲軸顏色產生器色碼表色碼選擇器框線圖加框語法

/*Shared rounded corner for all modules框線圖*/
.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {zoom:1;background:url(左彎上邊框圖網址) left top no-repeat;margin-right:5px;}
.ycntmod .rctop div {background:url(右上彎角圖網址) right top no-repeat;height:5px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcbtm {zoom:1;background:url(左彎下框邊圖網址) left bottom no-repeat;margin-right:5px;}
.ycntmod .rcbtm div {background:url(右下彎角圖網址) right bottom no-repeat;height:5px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcl {padding-left:5px;background:url(左側直邊框圖網址) repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:5px;background:url(右側直邊框圖網址) right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

希望這些內容，能對您有所幫助，加油喔～～

《　晨曦乍現　公告　》

除非你的年紀比我大！！！否則請不要叫我幫你修改版面～～（帥哥不在此限內...）

引用：http://tw.myblog.yahoo.com/jw!LRpTR2iHQU7nnybZhqiOk2s-/article?mid=27394

常用自訂語法-整理Ⅱ

每個語法使用者設定不一，以下為參考語法，不當的設定或許與使用者目前使用的自訂內容會產生干擾，請小心慎選使用。

語法依照中文意思排列(語法請做選擇性使用，不可全部套上)。

所有數據只是參考值，需要配合需求程度調整，邊框線部份不需要的，語法可以直接刪除。

不存在的網址連結及多餘的重複語法，會影響正常的視窗開啟速度。

注意空格及每段語法連慣性，避免開啟動作不正常。

無設定的相關語法，以yahoo預設值為設定值。

背景預設顏色的作用: 圖片失聯時，以背景色替代，顏色要謹慎設定。

部份透明度設定因YAHOO新版語法規定失效，請自行測試。

/*個人資料管理頁面公開的部落標題-個人資料-自我介紹+背景圖-背景預設顏色-文字顏色-字型字體大小使用預設值*/
#ybloginfo table, #yusrinfo table, #yusrintro p {background: url(圖片網址) #E6E6E6;color:#FF0000;}

/*整頁背景位置調整，x與y軸的位置(適用於1000X600像素以下之圖片)*/
body {background-position : 50% 0%; }

/*整頁背景預設顏色-背景圖 - 背景圖不重複 - 背景固定*/
body {background:#1B006B;background-image: url(圖片網址);background-repeat:no-repeat;background-attachment:fixed;}

/*取消兩欄式下方捲軸*/
body {overflow-x:hidden;}

/*整頁背景圖簡語*/
body {background: url(圖片網址) #1B006B no-repeat;background-position : 50% 0%;background-attachment:fixed;overflow-x:hidden;}

/*圖片重複方向定義解說 : repeat-x = 橫向排列，適用垂直條形圖; repeat-y = 縱向排列，適用水平條形圖; repeat = x-y軸同時排列，適用方形圖; no-repeat = 單張圖片不重複，適用與架框同等長寬的圖片*/

/*回應 - 引用+邊框線*/
div.btncomment a {border-left:4px double #00ffff; border-right:4px double #00ffff; border-top:4px double #00ffff; border-bottom:4px double #00ffff;}
div.btntrackback a {border-left:4px double #00ffff; border-right:4px double #00ffff; border-top:4px double #00ffff; border-bottom:4px double #00ffff;}

/*我要回應小圖-連結區塊-height:60px-width:60px為圖框大小*/
div.btncomment a {display:block;height:60px;width:60px;background:url(小圖網址) no-repeat;}
/*我要引用小圖-連結區塊-height:60px-width:60px為圖框大小*/
div.btntrackback a {display:block;height:60px;width:60px;background:url(小圖網址) no-repeat;}

-------感應滑鼠回應引用圖--------

/*回應圖*/
div.btncomment a {display:block;height:32px;width:62px;background:url(圖片網址) no-repeat;}

/*滑鼠指標靠近改變回應圖*/
div.btncomment a:hover {display:block;height:35px;width:80px;background:url(圖片網址) no-repeat;}

/*引用圖*/
div.btntrackback a {display:block;height:32px;width:62px;background:url(圖片網址) no-repeat;}

/*滑鼠指標靠近改變引用圖*/
div.btntrackback a:hover {display:block;height:35px;width:80px;background:url(圖片網址) no-repeat;}

/*訂閱自訂圖示-連結區塊-改變圖示位置四邊不同值順序為上、右、下、左+邊框線(格主需在登出的狀態下才看得到訂閱圖)*/
div#btnsbsrb_nologin a,div#btnsbsrb a {display:block;background: url(圖片網址); margin:100pt 0pt 0pt 0pt; border-left:8px double #FF0000; border-right:8px double #FF0000; border-top:8px double #FF0000; border-bottom:8px double #FF0000;}

-------感應滑鼠訂閱圖--------

/*訂閱圖-連結區塊-訂閱圖位置-訂閱圖顯示寬高-訂閱圖網址 - 框線*/
div#btnsbsrb_nologin a,div#btnsbsrb a{display:block;position:absolute;top:-110px;left:91%; width:90px;height:33px;background:url(訂閱圖網址) no-repeat; border-left:4px double #FF0000; border-right:4px double #FF0000; border-top:4px double #FF0000; border-bottom:4px double #FF0000; }

/*滑鼠指標靠近改變訂閱圖 - 框線*/
div#btnsbsrb_nologin a:hover,div#btnsbsrb a:hover,div#btnsbsrb_nologin a:active,div#btnsbsrb a:active {background:url(答謝訂閱圖網址) no-repeat;border-left:4px double #00FFFF; border-right:4px double #00FFFF; border-top:4px double #00FFFF; border-bottom:4px double #00FFFF;}

/*自訂留言板按鈕圖片*/
#ymodmsgbd h3 a {display:block;background:url( 圖片網址 ) no-repeat;width:130px;height:130px;text-indent:-300px;}

/*自訂部落格相簿按紐圖片*/
#ymodalbum h3 a {display:block;background:url( 圖片網址 ) no-repeat;width:130px;height:130px;text-indent:-300px;}

/*-----↓標題欄-注意語法設定重複衝突干擾 -----*/

/*標題背景圖應用:如果單張大圖不重複圖片時，需在(圖片網址) #0000bf後空一格加入 no-repeat center 例如 : #yblogtitle h1{background: url(圖片網址) #0000bf no-repeat center; color: #FF0000; font-family:標楷體; FONT-SIZE:26pt; font-weight:bold;}*/

/*標題背景圖位置應用: center=置中，left=左邊，right=右邊，top=上面，bottom=下面，no-repeat=不重複，repeat-x=橫向重複，repeat-y=縱向重複，組合範例: no-repeat center */

/*隱藏標題(包括訂閱)*/
#yblogtitle {display:none}

/*隱藏標題所有文字(包括自訂格名)-適合應用加在格式二，最好配合訂閱圖示位置調整*/
#yblogtitle .text {display:none}

/*隱藏格名語法*/
#yblogtitle a {display:none;}

/*獨立設定自訂格名文字顏色-字型-字體大小(不受 .text 文字語法設定影響)*/
#yblogtitle h1, #yblogtitle a {color: #00FF00; font-family:標楷體; FONT-SIZE:30px;}

/*以下部落格自訂格名與描述-必須配合透明度使用-套用格式四選一(勿混用，會產生錯誤)*/

/*部落格自訂格名與描述-格式一(置頂框線在訂閱圖之上)*/

/*部落格自訂格名與描述 - 文字置中*/
#yblogtitle .mbd{text-align:center;}

/*部落格自訂格名+背景圖-背景預設顏色 - 字體顏色 - 字型 - 字體大小 - 粗體字*/
#yblogtitle h1{background: url(圖片網址) #0000bf; color: #FF0000; font-family:標楷體; FONT-SIZE:26px; font-weight:bold;}

/*部落格描述+背景圖-背景預設顏色-背景高度+邊框線*/
#yblogtitle .text {background: url(圖片網址) #0000bf; height:200px; border-left:4px double #00ffff; border-right:4px double #00ffff; border-top:4px double #00ffff; border-bottom:4px double #00ffff;}

/*部落格描述字體顏色 - 字型 - 字體大小*/
#yblogtitle .text {color:#ff7f00; font-family:標楷體; FONT-SIZE:20px;}

/*部落格自訂格名與描述-格式二(置頂框線在訂閱圖之外)*/

/*部落格自訂格名與描述 - 文字置中-字體大小*/
#yblogtitle .mbd {text-align:center; font-size:20px;}

/*部落格自訂格名+背景圖-背景預設顏色-字體顏色-字型-粗體*/
#yblogtitle h1 {background: url(圖片網址) #80c0ff; color:#FF0000;font-family:標楷體; font-weight:bold;}

/*部落格描述+背景圖-背景預設顏色-背景高度+邊框線*/
#yblogtitle .mbd {background: url(圖片網址) #0000bf; height:200px; border-left:4px double #00ffff; border-right:4px double #00ffff; border-top:4px double #00ffff; border-bottom:4px double #00ffff;}

/*部落格描述-字體顏色 - 字型*/
#yblogtitle .text {color:#ff7f00; font-family:標楷體;}

/*部落格自訂格名圖片與描述-格式三(部落格名以圖片取代)*/

/*隱藏設定小方圖*/
#yblogtitle .edit {display:none;}

/*部落格名標題圖置中*/
#yblogtitle .thd {text-align:center; }

/*部落格描述-字型-字體顏色 - 字體大小-文字靠左-文字顯示範圍寬高-絕對位置-文字位置*/
#yblogtitle .tbd {font-family:標楷體; color:#00007f;font-size:150%;text-align:left;width:90%;height:205px;position:relative;top:85px;left:5px;}

/*部落格名圖-連結區塊-圖片置中-圖框寬高(配合圖片大小)-部落格名字體大小為0-文字排縮(目的為移出顯示作用)*/
#yblogtitle .thd a {display:block;background:url(格名圖網址) center no-repeat;display:block;width:100px;height:100px;font-size:0;text-indent:-5000px;}

/*部落格描述背景圖-背景預設顏色-小圖重複*/
#yblogtitle .mbd {background: url(圖片網址) #8080ff repeat;}

/*部落格自訂格名圖片與隱藏描述-格式四(部落格名以圖片取代)*/
#yblogtitle .edit {display:none;}
#yblogtitle .mbd{text-align:center}
#yblogtitle .mbd .tbd{display:none}
#yblogtitle .rctop,#yblogtitle .rctop div,#yblogtitle .rcl,#yblogtitle .rcr,#yblogtitle .rcbtm,#yblogtitle .rcbtm div{zoom:1;filter:alpha(opacity:0)}
#yblogtitle .thd h1 {display:block;background:url(格名圖網址) center no-repeat;display:block;float:center;width:430px;height:120px;font-size:0;text-indent:-5000px;}

/*滑鼠自動變換含超連結字體變換顏色-連結初始字體顏色-去除連結底線+連結位置相對自動加彩色邊框線*/
/*附記 : 左右欄框分目錄連結，字體顏色在此會受到影響*/
body{cursor:url(小圖網址)}
a:hover{cursor:url(小圖網址);color:#00ffff;}
a,a:link,a:visited{color:#ffffff;text-decoration: none}
a:hover {position: relative; border-left:3px ridge #00ffff; border-right:3px ridge #ffff00; border-top:3px ridge #00ff80; border-bottom:3px ridge #ff00ff;}

/*左右欄框分類標題 -框與框的間距+邊框線*/
.ycntmod .mbd ul.list li {margin-bottom:7px; border-left:3px ridge #00ffff; border-right:3px ridge #ffff00; border-top:3px ridge #00ff80; border-bottom:3px ridge #ff00ff;}

/*左右欄框分類標題 -標題小圖-不重複 - 小圖與文字間隙*/
.ycntmod .mbd ul.list li {background:url(小圖網址) 3% 10% no-repeat;padding-left:15px;}

/*左右欄位加底&透明度*/
.yc3subbd, .yc3sec {border:3px double #FBD3D5;margin-bottom:5px;background:#FFEFEC;filter:alpha(opacity=60);opacity:0.60;}

/*文章標題小圖-不重複 - 小圖與文字間隙 - 小圖與文字位置*/
.yblogcnt .blgtitlebar h2 {background:url(小圖網址) no-repeat;padding-left:15px;}
.yblogcnt .blgtitlebar {margin-bottom:10px;zoom:1;}

/*文章標題字體-顏色-字型-大小-粗體*/
.yblogcnt .blgtitlebar h2 {color:#FF0000;font-family:標楷體;font-size:22px;font-weight:bold;}

/*文章欄位字體顏色 - 字型 - 字體大小*/
.yc3pribd .text {color: #AFEEEE;font-family:新細明體;font-size:125%;}

/*所有預設整體字體-顏色-字型-大小(其它架框項目無設定時，在此可能影響)*/
.text {color:#FFFF00; font-family:新細明體; font-size:115%;}

或是 ↓↑

/*全版預設整體字體-顏色-字型-大小(其它架框項目無設定時，在此可能影響)*/
BODY {color:#FFFF00;Font-Family: 新細明體;Font-Size:115%;}

/*欄位名稱標題字體顏色-字型-字體大小-粗體-欄位寬高*/
#ymodmsgbd .mhd h3, .ycntmod .mhd h3, .ymsgboard .mhd h3 {color:#FF0000;font-family:標楷體;font-size:22px;font- weight:bold;width:123px;height:35px;}

/*欄位名稱標題+背景圖(建議用橫形圖)-圖片左右位置-不重複-文字位置 - (此語法建議用在不透明樣式)*/
#ymodmsgbd .mhd h3, .ycntmod .mhd h3, .ymsgboard .mhd h3 {background: url(圖片網址) 50% no-repeat;padding-left:15px;padding-top:15px;}

/*欄位名稱標題背景顏色(當使用欄位名稱標題透明背景圖時，背景顏色跟著一起呈現)*/
.yc3sec .mhd,.yc3sub .mhd{background:#FF0000}

/*個性圖 - 圖框大小-不重複+邊框線*/
#ymodprf .horos{width:129px;height:129px;background:url(圖片網址) no-repeat center; border-left:4px double #00ffff; border-right:4px double #00ffff; border-top:4px double #00ffff; border-bottom:4px double #00ffff;}

/*隱藏窄欄框上的"上傳個人相片"及"編輯個人檔案"按鈕*/
#ymodprf .btneditprf a {display:none;}
#ymodprf .btnulprfphoto a {display:none;}

/*改變性別圖上方的星座文字-置左-字體-文字大小-文字顏色*/
#ymodprf .horos{text-align:left; font-family:新細明體; font-size:14px; color:#FF0000;}

/*改變暱稱字體-文字大小*/
#ymodprf .nickname a {font-family:標楷體;font-size:28px;}

/*月曆-字體基本顏色-字體大小+背景圖-背景預設顏色+邊框*/
#ymodcal table {color:#FF0000; font-size:100%; background: url(圖片網址) #000000; border-left:4px double #00ffff; border-right:4px double #00ffff; border-top:4px double #00ffff; border-bottom:4px double #00ffff;}

/*整欄月曆襯底背景圖(建議使用單色系)*/
#ymodcal {background: url(圖片網址) repeat;}

/*月曆-連結日期字體顏色+醒目框線*/
#ymodcal table a {color:#00ffff; border-left:1px solid #ff0000; border-right:1px solid #ff0000; border-top:1px solid #ff0000; border-bottom:1px solid #ff0000;}

/*月曆-年月連結字體顏色-字體大小(上年-下月)(注意 : 如果使用了連結自動加框線語法，建議使用目前語法中的字體大小)*/
#ymodcal a {color:#00ff80;} /*←年份三角翻查符號顏色*/
#ymodcal .selyr {color:#ffff00;font-size:80%;}
#ymodcal .selmn a {color:#ff00ff;font-size:70%;}

/*月曆-年月背景小圖(上年-下月)*/
#ymodcal .selyr {background: url(背景小圖) no-repeat;width:50px;height:25px;text-align:center;}
#ymodcal .selmn {background: url(背景小圖) no-repeat;width:70px;height:25px;text-align:center;}

/* 月曆上今天日期的字體顏色及大小 */
#ymodcal .mbd td strong {color:#FFFF00; font-size:115%;}

/* 月曆星期的字體顏色 */
#ymodcal th {color:#00ff80;}

/*附記：如果因為使用了圖片式欄位邊框，而影響月曆的年月不能顯示，可利用↓做修正*/
#ymodcal .selyr, #ymodcal .selmn a {width:60px;font-size:100%;;margin-left:-5px;}

/*招呼語隱藏"我要留言"字樣(招呼語有連結作用時，此語法不能使用)*/
#yblast .text a{display:none;}

/*招呼語+邊框線*/
#yblast .bg {border-left:4px double #00ffff; border-right:4px double #00ffff; border-top:4px double #00ffff; border-bottom:4px double #00ffff;}

/*招呼語-自訂背景圖，底圖圖如果與字寬同寬時，可設 no-repeat (圖片網址空白即透明)*/
#yblast .bg {background: url(圖片網址) repeat;}

/*Opacity for blast招呼語透明度*/
#yblast .bg {zoom:1; filter:alpha(opacity:100)}

/*招呼語-自訂背景圖，底圖寬高*/
#yblast .bg {width:85%;height:70px;}

/*招呼語-自訂背景圖，底圖位置*/
#yblast {position:relative;top:27px;left:17px;}

/*招呼語-文字寬高(建議這一段語法獨立寫)*/
#yblast .text {width:90%;height:70px;}

/*招呼語-文字置中-文字位置*/
#yblast .text{text-align:center; position:relative;top:-45px;left:-10px;}

/*招呼語-字體顏色-字型-大小-粗體(當招呼語有連結作用時，需在.text後空一格加入 a 改變為連結的字體作用*/
#yblast .text{color:#FF0000;font-family:標楷體;font-size:300%;font-weight:bold;}

/*Shared rounded corner for all modules 全欄位框線*/
.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {zoom:1;background:url(圖01.gif) left top no-repeat;margin-right:5px;}
.ycntmod .rctop div {background:url(圖02.gif) right top no-repeat;height:10px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcbtm {zoom:1;background:url(圖03.gif) left bottom no-repeat;margin-right:5px;}
.ycntmod .rcbtm div {background:url(圖04.gif) right bottom no-repeat;height:10px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcl {padding-left:5px;background:url(圖05.gif) repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:5px;background:url(圖06.gif) right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

/*shared rounded corner for all modules 透明無框線*/
.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {zoom:1;background:transparent left top no-repeat;margin-right:0px;}
.ycntmod .rctop div {background:transparent right top no-repeat;height:0px;font-size:0;position:relative;right:-0px;}
.ycntmod .rcbtm {zoom:1;background:transparent left bottom no-repeat;margin-right:0px;}
.ycntmod .rcbtm div {background:transparent right bottom no-repeat;height:0px;font-size:0;position:relative;right:-0px;}
.ycntmod .rcl {padding-left:0px;background:transparent repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:0px;background:transparent right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

或

/*隱藏框線*/
.ycntmod .rctop {background:none;}
.ycntmod .rctop div {background:none;}
.ycntmod .rcbtm {background:none;}
.ycntmod .rcbtm div {background:none;}
.ycntmod .rcl {background:none;}
.ycntmod .rcr {background:none;}

/*透明化無框線將background:url(圖片.gif) 改成 background:transparent 透過*/

/*標題框*/
#yblogtitle .rctop {zoom:1;background:url(圖01.gif) left top no-repeat;margin-right:5px;}
#yblogtitle .rctop div {background:url(圖02.gif) right top no-repeat;height:10px;font-size:0;position:relative;right:-5px;}
#yblogtitle .rcbtm {zoom:1;background:url(圖03.gif) left bottom no-repeat;margin-right:5px;}
#yblogtitle .rcbtm div {background:url(圖04.gif) right bottom no-repeat;height:10px;font-size:0;position:relative;right:-5px;}
#yblogtitle .rcl {padding-left:10px;background:url(圖05.gif) repeat-y;}
#yblogtitle .rcr {zoom:1;padding-right:10px;background:url(圖06.gif) right repeat-y;}

/*文章框*/
.yc3pribd .rctop {zoom:1;background:url(圖01.gif) left top no-repeat;margin-right:5px;}
.yc3pribd .rctop div {background:url(圖02.gif ) right top no-repeat;height:10px;font-size:0;position:relative;right:-5px;}
.yc3pribd .rcbtm {zoom:1;background:url(圖02.gif ) left bottom no-repeat;margin-right:5px;}
.yc3pribd .rcbtm div {background:url(圖04.gif ) right bottom no-repeat;height:10px;font-size:0;position:relative;right:-5px;}
.yc3pribd .rcl {padding-left:5px;background:url(圖05.gif ) repeat-y;}
.yc3pribd .rcr {zoom:1;padding-right:5px;background:url(圖06.gif ) right top repeat-y;}

/*左右側欄框線*/
.yc3sec .rctop,.yc3sub .rctop {zoom:1;background:url(圖01.gif ) left top no-repeat;margin-right:0px;}
.yc3sec .rctop div,.yc3sub .rctop div {background:url(圖02.gif ) right top no-repeat;height:10px;font-size:0;position:relative;right:-0px;}
.yc3sec .rcbtm,.yc3sub .rcbtm {zoom:1;background:url(圖03.gif ) left bottom no-repeat;margin-right:0px;}
.yc3sec .rcbtm div,.yc3sub .rcbtm div {background:url(圖04.gif ) right bottom no-repeat;height:10px;font-size:0;position:relative;right:-0px;}
.yc3sec .rcl,.yc3sub .rcl {padding-left:5px;background:url(圖05.gif ) repeat-y;}
.yc3sec .rcr,.yc3sub .rcr {zoom:1;padding-right:5px;background:url(圖06.gif ) right repeat-y;}

/*將預設兩欄式版型擴張(加寬)至左右邊界*/ /*注意！兩組二選一*/
.twocoldr .ycnt3col,.twocolga .ycnt3col {width:990px;}
或
.twocoldr .ycnt3col,.twocolga .ycnt3col {width:99.9%;}

/*隱藏左右欄位名稱標題*/
.yc3sec .mhd,.yc3sub .mhd{display:none}

/*隱藏文章欄位全部文章大標題*/
.yc3pribd .mhd{display:none}

/*隱藏性別小圖*/
#ymodprf .horos img{display:none;}

/*隱藏部落格相簿*/
#ymodalbum{display:none;}

/*隱藏更新日期欄*/
#ymodupdate{display:none}

/*隱藏摩頭摩尾(奇摩頁首與頁尾)*/
#yhtw_masthead, #yhtw_mastfoot{display:none;}

/*隱藏標題按鍵組*/
#yblogtitle .tft div a span{display:none;}

/*發表文章*/
div.btncompose a{display:block;width:76px;height:22px;overflow:hidden;background:url(http://tw.yimg.com/i/tw/blog/btn_postblog.gif) no-repeat;}

/*上傳相片*/
div.btnphoto a{display:block;width:76px;height:22px;overflow:hidden;background:url(http://tw.yimg.com/i/tw/blog/btn_ulimg.gif) no-repeat}

/*管理部落格*/
div.btnsetup a{display:block;width:92px;height:22px;overflow:hidden;background:url(http://tw.yimg.com/i/tw/blog/yimg/btn_setupblog.gif) no-repeat}

/*訂閱部落格*/
div#btnsbsrb a,div#btnsbsrb_nologin a{display:block;width:89px;height:22px;overflow:hidden;background:url(http://tw.yimg.com/i/tw/blog/btn_subscribe.gif) no-repeat;}

/*文章內文下方告示圖片*/
#yarticle .browsebtns{background:url(圖片網址) center bottom no-repeat;width:449px;height:100px;}

/*回應欄位圖片動畫*/
#rtemodule {background:url(圖片網址) no-repeat scroll center top;padding-top:120px;}

/*留言內容欄*/

/*文章欄我要留言按紐背景小圖-我要留言字體-顏色-字型-粗體字*/
#ymsgboard q a {background:url(背景小圖網址) no-repeat;color:#FF0000;font-family:標楷體;font-size:32px;font-weight:bold;}

/*留言板標題列高度-背景圖*/
#ymsgboard .mhd {height:100px;background:url(背景圖網址) repeat-y;}

/*留言板留言內容欄背景圖*/
#ymsgboard .mbd {background:url(背景圖網址) repeat-y;}

/*留言板透明度-注意!設為全透明時，背景圖無作用*/
#ymsgboard .rctop, #ymsgboard .rctop div, #ymsgboard .rcl, #ymsgboard .rcr, #ymsgboard .rcbtm, #ymsgboard .rcbtm div {zoom:1; filter:alpha(opacity:50)}

/*留言板標題留言板字體*/
#ymsgboard .mhd h3 {color:#ff00ff;font-family:新細明體;font-size:24px;}

/*留言板標題留言板字體置中 (此段不加入時，即置於左側)*/
#ymsgboard .mhd .text {text-align:center;}

/*留言板標題留言板字體隱藏 (此段如果覺得有礙美觀可應用)*/
#ymsgboard .mhd h3 {display:none;}

/*留言板留言內容字體*/
#ymsgboard .mbd .text {color:#0000ff;font-family:新細明體;font-size:16px;}

/*留言板所有連結字體*/
#ymsgboard .mbd .text a {color:#FF0000;font-family:新細明體;font-size:20px;}

/*版面寬度定位*/

/*版面寬度定位-三欄式*/
.thrcol #yhtw_mastfoot {width:995px;margin:0 auto;}
.thrcol[class]{min-width:995px;behavior:none; }
.thrcol .ycnt3col {zoom:1;width:995px;text-align:left;margin:0 auto;}

/*版面寬度定位-二欄式*/
.twocolga #yhtw_mastfoot, .twocoldr #yhtw_mastfoot {width:950px;margin:0 auto;}
.twocolga[class], .twocoldr[class]{min-width:950px;behavior:none;}
.twocolga .ycnt3col,.twocoldr .ycnt3col {zoom:1;width:950px;text-align:left;margin:0 auto;}

/*捲軸顏色變更設定*/
html{
scrollbar-base-color : #ff0000;　/*整體顏色*/
scrollbar-face-color : #000000;　/*軸面顏色*/
scrollbar-track-color: #000000;　/*軸軌顏色*/
scrollbar-arrow-color : #ff0000　;/*箭頭顏色*/
scrollbar-3dlight-color: #ff0000;　/*左立體邊顏色*/
scrollbar-highlight-color : #ff0000;　/*軸面左角邊顏色*/
scrollbar-shadow-color : #ff0000;　/*軸面右角邊顏色*/
scrollbar-darkshadow-color : #ff0000;　/*右立體邊顏色*/
}

語法背景色&文字顏色設定大略註解：

background-color：#FFFFFF (顏色碼) 設定背景顏色。
簡例：background：#6699CC；

color：設定字體顏色。
例：color：#FF9900； (#FF9900為顏色代碼參閱色碼表變更)

font-family：設定文字字型。
例：font-family：新細明體；

font-size：設定文字大小。(必須為正整數)
例1：font-size：20px；
例2：font-size：120%；

text-align：決定文字水平對齊方式。left：靠左對齊 center：置中對齊 right：靠右對齊
例：text-align：center；

font-weight(文字粗細)：設定文字粗細。normal：正常　bold：粗體　bolder：特粗　細體：lighter
例：font-weight：bold；

width(寬)：區塊的寬度 (不設定，依系統原訂大小)
height(高)：區塊的高度 (不設定，依系統原訂大小)

指定背景圖位置

/*背景圖片x與y軸的位置*/

backgroud-position: 0% 0%; /*左邊上方*/
backgroud-position: 0% 50%; /*左邊中間*/
backgroud-position: 50% 0%; /*中間上方*/
backgroud-position: 50% 50%; /*正中間*/
backgroud-position:100% 0%; /*右邊上方*/
backgroud-position: 0% 100%; /*左邊下方*/
backgroud-position: 100% 50%; /*右邊中間*/
backgroud-position: 50% 100%; /*中間下方*/
backgroud-position: 100% 100%; /*右邊下方*/

background-position : top; /*向上對齊*/
background-position : bottom; /*向下對齊*/
background-position : left; /*向左對齊*/
background-position : right; /*向右對齊*/
background-position : center; /*置中對齊*/

圖片重複方向 :

repeat = 整頁重複

repeat-x = 橫向排列，適用垂直條形圖

repeat-y = 縱向排列，適用水平條形圖

no-repeat = 單張圖片不重複，適用與架框同等長寬的圖片

邊框語法解說 :

border-left:5px double #00ffff; border-right:5px double #00ffff; border-top:5px double #00ffff; border-bottom:5px double #00ffff;

left = 左邊框

right = 右邊框

top = 上邊框

bottom = 下邊框

double = 雙線 (請參考框線條樣式)

5px = 框線粗細像素值 (一般使用在1~5之間)

#ff00ff = 框線顏色色碼 (可搭配個人使用的背景配色，請參考色碼表)

框線條樣式 : ( 無、點線、實線、雙線、溝線、脊線、嵌入線、浮出線 )

相對應語法 : none︱ dotted｜solid︱ double︱ groove︱ ridge︱ inset︱ outset

貼語法路徑→管理部落格→面板設定→自訂樣式→加入語法→確定

色碼表應用 : (注意 : 有些數字色碼無支援應用在奇摩部落格當邊框顏色，無支援的貼上只會顯示灰色)

大部分取自語法應用編輯(二度空間)

參閱文章網址( http://tw.myblog.yahoo.com/jw!.KNty8iGR0WBlosOtiUpDA--/article?mid=7489 )

整理補充編輯：

引用：http://tw.myblog.yahoo.com/jw!zgGA9hWTEg6DAB0jiS5wNn8-/article?mid=15204

引用：http://tw.myblog.yahoo.com/jw!R.LG_UeaHBKsESHCfX.uaT0-/article?mid=13972

oreokimo

培迪的痞客邦部落格

oreokimo 發表在痞客邦留言(0) 人氣()

E-mail轉寄

培迪的痞客邦部落格

我是培迪(Oreokimo) 歡迎光臨 " 培迪在痞客邦的小天地" ！