部落格常用語法解說 .分類:部落格HTML / CSS語法應用2007/06/21 11:39
部落格常用語法解說
語法說明:
/*主題*/ | 內容標題 | {常用修改樣式} |
/*Links網頁超連結*/ | a,a:link,a:visited (原始超連結文字) | color:#FFFFFF(字體顏色) font-family:新細明體(文字字型) font-size:9px(文字尺寸) font-weight:bold(文字粗體) background-color:#FFFFFF(文字背景顏色) position:relative;top:2px;left:2px(文字位移數值) text-decoration:none(刪除底線) |
a:hover (滑鼠經過時變化) | color:#FFFFFF(字體顏色) font-family:新細明體(文字字型) font-size:9px(文字尺寸) font-weight:bold(文字粗體) background-color:#FFFFFF(文字背景顏色) background-image:url(http://圖檔網址.gif)(文字背景圖檔) border:1px dotted #FFFFFF(文字點狀框線) position:relative;top:2px;left:2px(文字位移數值) text-decoration:none(刪除底線) |
範例:
/*Links網頁超連結*/
a,a:link,a:visited{color:#6600CC;text-decoration:none}
a:hover{color:#FFFF00;background-image:url(http://圖檔網址.gif);background-repeat:repeat;border:1px dotted #6600CC;position:relative;top:1px;left:1px}
*部落格背景
語法說明:
/*主題*/ | 內容標題 | {常用修改樣式} |
/*Background部落格背景*/ | body (整個部落格背景) | background-color:#FFFFFF(背景顏色) background-image:url(http://圖檔網址.gif)(背景圖檔) background-attachment:fixed(背景固定不動) background-repeat:repeat(背景重複排列) background-repeat:no-repeat(單一背景不重複) background-repeat:repeat-x(背景在x軸重複排列) background-repeat:repeat-y(背景在y軸重複排列) background-position:0% 0%(單一背景在x與y軸的位置) border:10px double #FFFFFF(背景加雙框線) |
範例:
/*Background部落格背景*/
body{background-color:#9966FF;background-image:url(http://圖檔網址.gif);background-attachment:fixed}
*奇摩置頂欄
語法說明:
/*主題*/ | 內容標題 | {常用修改樣式} |
/*Master header奇摩置頂欄*/ | #yhtw_masthead (整列置頂欄) | display:none(不顯示) background-color:#FFFFFF(背景顏色) background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:no-repeat(單一背景不重複) color:#FFFFFF(字體顏色) font-family:新細明體(文字字型) font-weight:bold(文字粗體) border:3px double #FFFFFF(背景加雙框線) filter:alpha(opacity=50)(背景透明度) |
#yhtw_masthead .mhlogo (部落格logo) | display:none(不顯示) background-color:#FFFFFF(背景顏色) border:3px double #FFFFFF(背景加雙框線) font-family:新細明體(文字字型) | |
#yhtw_masthead .mhuser (您好會員登出會.....) | display:none(不顯示) background-color:#FFFFFF(背景顏色) border:3px double #FFFFFF(背景加雙框線) font-family:新細明體(文字字型) | |
#yhtw_masthead .mhsch (請選擇功能服務.....) | display:none(不顯示) background-color:#FFFFFF(背景顏色) border:3px double #FFFFFF(背景加雙框線) color:#FFFFFF(字體顏色) font-family:新細明體(文字字型) filter:alpha(opacity=50)(背景透明度) |
範例:
/*Master header奇摩置頂欄*/
#yhtw_masthead{display:none}
*奇摩置底欄
語法說明:
/*主題*/ | 內容標題 | {常用修改樣式} |
/*Master foot奇摩置底欄*/ | #yhtw_mastfoot (整列置底欄) | display:none(不顯示) |
範例:
/*Master foot奇摩置底欄*/
#yhtw_mastfoot{display:none}
*主標題欄位
語法說明:
/*主題*/ | 內容標題 | {常用修改樣式} |
/*Blog title主標題欄位*/ | #yblogtitle .mbd (整個主標題欄) | background-color:#FFFFFF(背景顏色) background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:no-repeat(單一背景不重複) background-position:0% 0%(單一背景在x與y軸的位置) border:3px double #FFFFFF(背景加雙框線) text-align:center(文字位置) zoom:1;filter:alpha(opacity:0)(背景透明度) |
#yblogtitle .mbd .thd (主標題文字) | background-color:#FFFFFF(背景顏色) background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:no-repeat(單一背景不重複) background-position:0% 0%(單一背景在x與y軸的位置) border:3px double #FFFFFF(背景加雙框線) font-family:新細明體(文字字型) font-size:9px(文字尺寸) text-align:center(文字位置) width:60px; height:60px(欄位尺寸) | |
#yblogtitle h1 (主標題文字超連結) | display:block; float:left(以圖檔為超連結) background-color:#FFFFFF(背景顏色) background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:no-repeat(單一背景不重複) background-position:0% 0%(單一背景在x與y軸的位置) color:#FFFFFF(字體顏色) font-weight:bold(文字粗體) text-align:center(文字位置) width:60px; height:60px(欄位尺寸) | |
#yblogtitle .mbd .tbd (描述文字) | display:none(不顯示) background-color:#FFFFFF(背景顏色) background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:no-repeat(單一背景不重複) background-position:0% 0%(單一背景在x與y軸的位置) border:3px double #FFFFFF(背景加雙框線) color:#FFFFFF(字體顏色) font-family:新細明體(文字字型) | |
#yblogtitle .rctop, #yblogtitle .rctop div, #yblogtitle .rcl, #yblogtitle .rcr, #yblogtitle .rcbtm, #yblogtitle .rcbtm div (整欄及框線) | zoom:1;filter:alpha(opacity:0)(背景透明度) |
範例:
/*Blog title主標題欄位*/
#yblogtitle .mbd{text-align:center}
#yblogtitle .mbd .thd{background-image:url(http://圖檔網址.gif);background-repeat:no-repeat;background-position:0% 100%;width:380px;height:45px;font-size:16px;text-align:right}
#yblogtitle h1{color:#FFFFFF;font-weight:bold}
#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)}
*招呼語欄
語法說明:
/*主題*/ | 內容標題 | {常用修改樣式} |
/*Blog blast module招呼語欄位*/ | #yblast (整個招呼語欄) | text-align:center(文字位置) filter:alpha(opacity=50)(背景透明度) |
#yblast .bg (招呼語欄背景) | background-color:#FFFFFF(背景顏色) background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:no-repeat(單一背景不重複) background-position:0% 0%(單一背景在x與y軸的位置) border:10px double #FFFFFF(背景加雙框線) filter:alpha(opacity=50)(背景透明度) width:60px; height:60px(欄位尺寸) | |
#yblast .text (招呼語文字) | display:none(不顯示) color:#FFFFFF(字體顏色) font-family:新細明體(文字字型) font-size:9px(文字尺寸) font-weight:bold(文字粗體) text-align:center(文字位置) filter:alpha(opacity=50)(背景透明度) |
範例:
/*Blog blast module招呼語欄位*/
#yblast{text-align:right}
#yblast .bg{background-image:url(http://圖檔網址.gif);background-repeat:no-repeat;width:150px;height:30px}
#yblast .text{font-size:10px}
*文章欄
語法說明:
/*主題*/ | 內容標題 | {常用修改樣式} |
/*Article文章寬欄位*/ | .yc3pribd .mhd (文章標題欄) | display:none(不顯示) background-color:#FFFFFF(背景顏色) background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:no-repeat(單一背景不重複) background-position:0% 0%(單一背景在x與y軸的位置) border:10px double #FFFFFF(背景加雙框線) color:#FFFFFF(字體顏色) font-family:新細明體(文字字型) font-size:9px(文字尺寸) font-weight:bold(文字粗體) text-align:center(文字位置) filter:alpha(opacity=50)(背景透明度) |
.yc3pribd .mbd (文章內容欄) | background-color:#FFFFFF(背景顏色) background-image:url(http://圖檔網址.gif)(背景圖檔) background-attachment:fixed(背景固定不動) background-repeat:repeat(背景重複排列) background-repeat:no-repeat(單一背景不重複) background-position:0% 0%(單一背景在x與y軸的位置) border:10px double #FFFFFF(背景加雙框線) color:#FFFFFF(字體顏色) font-family:新細明體(文字字型) font-size:9px(文字尺寸) font-weight:bold(文字粗體) text-align:center(文字位置) zoom:1;filter:alpha(opacity:0)(背景透明度) | |
.blgtitlebar h2 (文章內容標題) | display:none(不顯示) background-color:#FFFFFF(背景顏色) background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:no-repeat(單一背景不重複) background-position:0% 0%(單一背景在x與y軸的位置) border:10px double #FFFFFF(背景加雙框線) color:#FFFFFF(字體顏色) font-family:新細明體(文字字型) font-size:9px(文字尺寸) font-weight:bold(文字粗體) text-align:center(文字位置) zoom:1;filter:alpha(opacity:0)(背景透明度) | |
.yc3pribd .rctop, .yc3pribd .rctop div, .yc3pribd .rcl, .yc3pribd .rcr, .yc3pribd .rcbtm, .yc3pribd .rcbtm div (整欄及框線) | zoom:1;filter:alpha(opacity:0)(背景透明度) |
範例:
/*Article文章寬欄位*/
.yc3pribd .mhd{display:none}
.yc3pribd .mbd{color:#6600CC;font-size:10px;zoom:1;filter:alpha(opacity:0)}
.blgtitlebar h2{background-image:url(http://圖檔網址.gif);background-repeat:no-repeat;color:#FFFF00;padding-left:30px}
.yc3pribd .rctop,.yc3pribd .rctop div,.yc3pribd .rcl,.yc3pribd .rcr,.yc3pribd .rcbtm,.yc3pribd .rcbtm div{zoom:1;filter:alpha(opacity:0)}
*左右窄欄
語法說明:
/*主題*/ | 內容標題 | {常用修改樣式} |
/*Blog category list module左右窄欄位*/ | .yc3sec .mhd,.yc3sub .mhd (左右上標欄) | display:none(不顯示) background-color:#FFFFFF(背景顏色) background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:repeat(背景重複排列) background-repeat:no-repeat(單一背景不重複) background-position:0% 0%(單一背景在x與y軸的位置) border:10px double #FFFFFF(背景加雙框線) filter:alpha(opacity=50)(背景透明度) |
.yc3sec .mhd h3,.yc3sub .mhd h3 (左右欄標題文字) | background-color:#FFFFFF(背景顏色) background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:no-repeat(單一背景不重複) background-position:0% 0%(單一背景在x與y軸的位置) color:#FFFFFF(字體顏色) font-family:新細明體(文字字型) font-size:9px(文字尺寸) font-weight:bold(文字粗體) text-align:center(文字位置) zoom:1;filter:alpha(opacity:0)(背景透明度) | |
.yc3sec .mbd,.yc3sub .mbd (左右欄內容) | background-color:#FFFFFF(背景顏色) background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:repeat(背景重複排列) background-repeat:no-repeat(單一背景不重複) background-position:0% 0%(單一背景在x與y軸的位置) color:#FFFFFF(字體顏色) font-family:新細明體(文字字型) font-size:9px(文字尺寸) text-align:center(文字位置) zoom:1;filter:alpha(opacity:0)(背景透明度) | |
.ycntmod .mbd ul.list li (標前圖示) | background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:no-repeat(單一背景不重複) padding-left:25px(標題位移數值) _line-height:1.5em(標題行距倍數) | |
.ycntmod .mbd ul.list li.more (所有文章及更多回應) | background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:no-repeat(單一背景不重複) | |
.yc3sec .rctop, .yc3sec .rctop div, .yc3sec .rcl, .yc3sec .rcr, .yc3sec .rcbtm, .yc3sec .rcbtm div, .yc3sub .rctop, .yc3sub .rctop div, .yc3sub .rcl, .yc3sub .rcr, .yc3sub .rcbtm, .yc3sub .rcbtm div (整欄及框線) | zoom:1;filter:alpha(opacity:0)(背景透明度) |
範例:
/*Blog category list module左右窄欄位*/
.yc3sec .mhd,.yc3sub .mhd{filter:alpha(opacity=0)}
.yc3sec .mhd h3,.yc3sub .mhd h3{background:url(http://圖檔網址.gif);background-repeat:no-repeat;color:#FFFFFF;font-weight:bold;font-size:12px;padding-left:25px;padding-top:5px}
.yc3sec .mbd,.yc3sub .mbd{color:#6600CC;font-size:10px;zoom:1;filter:alpha(opacity:0)}
.ycntmod .mbd ul.list li{background-image:url(http://圖檔網址.gif);background-repeat:no-repeat;padding-left:25px;padding-top:10px;_line-height:1.5em}
.ycntmod .mbd ul.list li.more{background-image:url(http://圖檔網址.gif);background-repeat:no-repeat}
.yc3sec .mhd a:visited,.yc3subbd .mhd a:visited{color:#FFFFFF}
*欄位框線圖
語法說明:
/*主題*/ | 內容標題 | {常用修改樣式} |
/*Shared rounded corner for all modules欄位框線圖*/ | .ycntmod .rctop (框線左上角) | background:url(http://圖檔網址.gif) left top no-repeat(左上框線圖檔) margin-right:8px(右邊位移數值) |
.ycntmod .rctop div (框線右上角) | background:url(http://圖檔網址.gif) right top no-repeat(右上框線圖檔) height:30px (上方圖檔高度) right:8px(圖檔位移數值) | |
.ycntmod .rcl (框線左直線) | background:url(http://圖檔網址.gif) repeat-y(左直框線圖檔) | |
.ycntmod .rcr (框線右直線) | background:url(http://圖檔網址.gif) right repeat-y(右直框線圖檔) | |
.ycntmod .rcbtm (框線左下角) | background:url(http://圖檔網址.gif) left bottom no-repeat(左下框線圖檔) margin-right:8px(右邊位移數值) | |
.ycntmod .rcbtm div (框線右下角) | background:url(http://圖檔網址.gif) right bottom no-repeat(右下框線圖檔) height:30px (上方圖檔高度) right:8px(圖檔位移數值) |
範例:
/*Shared rounded corner for all modules欄位框線圖*/
.ycntmod .rctop{background:url(http://左上圖檔網址.gif) left top no-repeat;margin-right:20px}
.ycntmod .rctop div{background:url(http://右上圖檔網址.gif) right top no-repeat;height:20px;right:-20px}
.ycntmod .rcl{background:url(http://左直圖檔網址.gif) repeat-y}
.ycntmod .rcr{background:url(http://右直圖檔網址.gif) right repeat-y}
.ycntmod .rcbtm {zoom:1;background:url(http://左下圖檔網址.gif) left bottom no-repeat;margin-right:20px}
.ycntmod .rcbtm div {background:url(http://右下圖檔網址.gif) right bottom no-repeat;height:20px;right:-20px}
註:左右窄欄位的預設寬度為width:140px,設定為120px較不會影響框線
*捲軸
語法說明:
/*主題*/ | 內容標題 | {常用修改樣式} |
/*Scrollbar捲軸區色彩*/ | html (網頁主體) | scrollbar-face-color:#FFFFFF(捲軸的軸面顏色) scrollbar-track-color:#FFFFFF(捲軸的軸軌顏色) scrollbar-3dlight-color:#FFFFFF(捲軸立體邊左上暗顏色) scrollbar-highlight-color:#FFFFFF(捲軸立體邊左上亮顏色) scrollbar-shadow-color:#FFFFFF(捲軸立體邊右下亮顏色) scrollbar-darkshadow-color:#FFFFFF(捲軸立體邊右下暗顏色) scrollbar-arrow-color:#FFFFFF(捲軸上下三角型顏色) |
範例:
/*Scrollbar捲軸區色彩*/
html{scrollbar-face-color:#9470DB;scrollbar-track-color:#C48AFF;scrollbar-3dlight-color:#AB57FF;scrollbar-highlight-color:#6B00D6;scrollbar-shadow-color:#AB57FF;scrollbar-darkshadow-color:#6B00D6;scrollbar-arrow-color:#7800F0}
*自我介紹
語法說明:
/*主題*/ | 內容標題 | {常用修改樣式} |
/*Profile自我介紹欄*/ | #ymodprf (整個自我介紹欄) | display:none(不顯示) filter:alpha(opacity=50)(背景透明度) |
#yprf (個人相片) | display:none(不顯示) | |
#ymodprf .nickname (個人暱稱) | display:none(不顯示) font-family:新細明體(文字字型) font-size:9px(文字尺寸) font-weight:bold(文字粗體) text-align:center(文字位置) | |
#ymodprf .horos (個人星座) | display:none(不顯示) background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:no-repeat(單一背景不重複) background-position:0% 0%(單一背景在x與y軸的位置) color:#FFFFFF(字體顏色) font-family:新細明體(文字字型) font-size:9px(文字尺寸) font-weight:bold(文字粗體) text-align:center(文字位置) width:140px; height:60px(欄位尺寸) | |
#ymodprf .horos img (性別小圖示) | display:none(不顯示) |
範例:
/*Profile自我介紹欄*/
#yprf{display:none}
#ymodprf .nickname{font-size:12px;font-weight:bold;filter:alpha(opacity:0)}
#ymodprf .horos{background-image:url(http://圖檔網址.gif);background-repeat:no-repeat;background-position:0% 50%;color:#FFFFFF;width:40px; height:50px}
#ymodprf .horos img{display:none}
*更新日期
語法說明:
/*主題*/ | 內容標題 | {常用修改樣式} |
/*Blog latest update module更新日期欄*/ | #ymodupdate (整個更新日期欄) | display:none(不顯示) filter:alpha(opacity=50)(背景透明度) |
#ymodupdate .mbd .date (日期欄) | background-color:#FFFFFF(文字背景顏色) background-image:url(http://圖檔網址.gif)(文字背景圖檔) zoom:1;filter:alpha(opacity:0)(背景透明度) padding-top:10px(日期位移數值) |
範例:
/*Blog latest update module更新日期欄*/
#ymodupdate{display:none}
*部落格相簿
語法說明:
/*主題*/ | 內容標題 | {常用修改樣式} |
/*Blog album module部落格相簿*/ | #ymodalbum (整個部落格相簿欄) | display:none(不顯示) filter:alpha(opacity=50)(背景透明度) |
#ymodalbum h3 (部落格相簿文字) | background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:no-repeat(單一背景不重複) background-position:0% 0%(單一背景在x與y軸的位置) border:1px double #FFFFFF filter:alpha(opacity=50)(背景透明度) font-family:新細明體(文字字型) font-size:9px(文字尺寸) background-color:#FFFFFF(文字背景顏色) width:140px;height:60px(欄位尺寸) |
範例:
/*Blog album module部落格相簿*/
#ymodalbum h3{background-image:url(http://圖檔網址.gif);background-repeat:no-repeat;background-position:50% 100%;height:180px}
*留言版
語法說明:
/*主題*/ | 內容標題 | {常用修改樣式} |
/*Blog guest book module留言板欄位*/ | #ymodmsgbd h3 (留言板文字) | background-image:url(http://圖檔網址.gif)(背景圖檔) background-repeat:no-repeat(單一背景不重複) background-position:0% 0%(單一背景在x與y軸的位置) border:1px double #FFFFFF filter:alpha(opacity=50)(背景透明度) font-family:新細明體(文字字型) font-size:9px(文字尺寸) background-color:#FFFFFF(文字背景顏色) width:140px;height:60px(欄位尺寸) |
範例:
/*Blog guest book module留言板欄位*/
#ymodmsgbd h3{background-image:url(http://圖檔網址.gif);background-repeat:no-repeat;background-position:50% 100%;height:40px}
引用:http://tw.myblog.yahoo.com/jw!.KNty8iGR0WBlosOtiUpDA--/article?mid=4514
留言列表