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像素以下之圖片)*/ /*整頁背景預設顏色-背景圖 - 背景圖不重複 - 背景固定*/ /*取消兩欄式下方捲軸*/ /*整頁背景圖簡語*/ /*圖片重複方向定義解說 : repeat-x = 橫向排列，適用垂直條形圖; repeat-y = 縱向排列，適用水平條形圖; repeat = x-y軸同時排列，適用方形圖; no-repeat = 單張圖片不重複，適用與架框同等長寬的圖片*/ |
|
/*回應 - 引用+邊框 線*/ /*我要回應小圖-連結區塊-height:60px-width:60px為圖框大小*/ -------感應滑鼠回應引用圖-------- /*回應圖*/ /*滑鼠指標靠近改變回應圖*/ /*引用圖*/ /*滑鼠指標靠近改變引用圖*/ |
|
/*訂閱自訂圖示-連結區塊-改變圖示位置四邊不同值順序為上、右、下、左+邊框線(格主需在登出的狀態下才看得到訂閱圖)*/ -------感應滑鼠訂閱圖-------- /*訂閱圖-連結區塊-訂閱圖位置-訂閱圖顯示寬高-訂閱圖網址 - 框線*/ /*滑鼠指標靠近改變訂閱圖 - 框線*/ |
|
/*自訂留言板按鈕圖片*/ /*自訂部落格相簿按紐圖片*/ |
|
/*-----↓標題欄-注意語法設定重複衝突干擾 -----*/ /*標題背景圖應用:如果單張大圖不重複圖片時，需在(圖片網址) #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 */ /*隱藏標題(包括訂閱)*/ /*隱藏標題所有文字(包括自訂格名)-適合應用加在格式二，最好配合訂閱圖示位置調整*/ /*隱藏格名語法*/ /*獨立設定自訂格名文字顏色-字型-字體大小(不受 .text 文字語法設定影響)*/ /*以下部落格自訂格名與描述-必須配合透明度使用-套用格式四選一(勿混用，會產生錯誤)*/ /*部落格自訂格名與描述-格式一(置頂框線在訂閱圖之上)*/ /*部落格自訂格名與描述 - 文字置中*/ /*部落格自訂格名+背景圖-背景預設顏色 - 字體顏色 - 字型 - 字體大小 - 粗體字*/ /*部落格描述+背景圖-背景預設顏色-背景高度+邊框 線*/ /*部落格描述字體顏色 - 字型 - 字體大小*/ /*部落格自訂格名與描述-格式二(置頂框線在訂閱圖之外)*/ /*部落格自訂格名與描述 - 文字置中-字體大小*/ /*部落格自訂格名+背景圖-背景預設顏色-字體顏色-字型-粗體*/ /*部落格描述+背景圖-背景預設顏色-背景高度+邊框 線*/ /*部落格描述-字體顏色 - 字型*/ /*部落格自訂格名圖片與描述-格式三(部落格名以圖片取代)*/ /*隱藏設定小方圖*/ /*部落格名標題圖置中*/ /*部落格描述-字型-字體顏色 - 字體大小-文字靠左-文字顯示範圍寬高-絕對位置-文字位置*/ /*部落格名圖-連結區塊-圖片置中-圖框寬高(配合圖片大小)-部落格名字體大小為0-文字排縮(目的為移出顯示作用)*/ /*部落格描述背景圖-背景預設顏色-小圖重複*/ /*部落格自訂格名圖片與隱藏描述-格式四(部落格名以圖片取代)*/ |
| /*滑鼠自動變換含超連結字體變換顏色-連結初始字體顏色-去除連結底線+連結位置相對自動加彩色邊框 線*/ /*附記 : 左右欄框分目錄連結，字體顏色在此會 受到影響*/ 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;} |
|
/*左右欄框分類標題 -框與框的間距+邊框 線*/ /*左右欄框分類標題 -標題小圖-不重複 - 小圖與文字間隙*/ /*左右欄位加底&透明度*/ |
|
/*文章標題小圖-不重複 - 小圖與文字間隙 - 小圖與文字位置*/ /*文章標題字體-顏色-字型-大小-粗體*/ /*文章欄位字體顏色 - 字型 - 字體大小*/ |
|
/*所有預設整體字體-顏色-字型-大小(其它架框項目無設定時，在此可能影響)*/ 或是 ↓↑ /*全版預設整體字體-顏色-字型-大小(其它架框項目無設定時，在此可能影響)*/ |
|
/*欄位名稱標題字體顏色-字型-字體大小-粗體-欄位寬高*/ /*欄位名稱標題+背景圖(建議用橫形圖)-圖片左右位置-不重複-文字位置 - (此語法建議用在不透明樣式)*/ /*欄位名稱標題背景顏色(當使用欄位名稱標題透明背景圖時，背景顏色跟著一起呈現)*/ |
|
/*個性圖 - 圖框大小-不重複+邊框 線*/ /*隱藏窄欄框上的"上傳個人相片"及"編輯個人檔案"按鈕*/ /*改變性別圖上方的星座文字-置左-字體-文字大小-文字顏色*/ /*改變暱稱字體-文字大小*/ |
|
/*月曆-字體基本顏色-字體大小+背景圖-背景預設顏色+邊框*/ /*整欄月曆襯底背景圖(建議使用單色系)*/ /*月曆-連結日期字體顏色+醒目框線*/ /*月曆-年月連結字體顏色-字體大小(上年-下月)(注意 : 如果使用了連結自動加框線語法，建議使用目前語法中的字體大小)*/ /*月曆-年月背景小圖(上年-下月)*/ /* 月曆上今天日期的字體顏色及大小 */ /* 月曆星期的字體顏色 */ /*附記：如果因為使用了圖片式欄位邊框，而影響月曆的年月不能顯示，可利用↓做修正*/ |
|
/*招呼語隱藏"我要留言"字樣(招呼語有連結作用時，此語法不能使用)*/ /*招呼語+邊框線*/ /*招呼語-自訂背景圖，底圖圖如果與字寬同寬時，可設 no-repeat (圖片網址空白即透明)*/ /*Opacity for blast招呼語透明度*/ /*招呼語-自訂背景圖，底圖寬高*/ /*招呼語-自訂背景圖，底圖位置*/ /*招呼語-文字寬高(建議這一段語法獨立寫)*/ /*招呼語-文字置中-文字位置*/ /*招呼語-字體顏色-字型-大小-粗體(當招呼語有連結作用時，需在.text後空一格加入 a 改變為連結的字體作用*/ |
|
/*Shared rounded corner for all modules 全欄位框線*/ |
|
/*shared rounded corner for all modules 透明無框線*/ 或 /*隱藏框線*/ |
|
/*透明化無框線將background:url(圖片.gif) 改成 background:transparent 透過*/ /*標題框*/ /*文章框*/ /*左右側欄框線*/ |
|
/*將預設兩欄式版型擴張(加寬)至左右邊界*/ /*注意！兩組二選一*/ |
|
/*隱藏左右欄位名稱標題*/ /*隱藏文章欄位全部文章大標題*/ /*隱藏性別小圖*/ /*隱藏部落格相簿*/ /*隱藏更新日期欄*/ /*隱藏摩頭摩尾(奇摩頁首與頁尾)*/ |
|
/*隱藏標題按鍵組*/ /*發表文章*/ /*上傳相片*/ /*管理部落格*/ /*訂閱部落格*/ |
|
/*文章內文下方告示圖片*/ /*回應欄位圖片動畫*/ |
|
/*留言內容欄*/ /*文章欄我要留言按紐背景小圖-我要留言字體-顏色-字型-粗體字*/ /*留言板標題列高度-背景圖*/ /*留言板留言內容欄背景圖*/ /*留言板透明度-注意!設為全透明時，背景圖無作用*/ /*留言板標題留言板字體*/ /*留言板標題留言板字體置中 (此段不加入時，即置於左側)*/ /*留言板標題留言板字體隱藏 (此段如果覺得有礙美觀可應用)*/ /*留言板留言內容字體*/ /*留言板所有連結字體*/ |
|
/*版面寬度定位*/ /*版面寬度定位-三欄式*/ /*版面寬度定位-二欄式*/ |
| /*捲軸顏色變更設定*/ 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 (顏色碼) 設定背景顏色。 color：設定字體顏色。 font-family：設定文字字型。 font-size：設定文字大小。(必須為正整數) text-align：決定 文字水平對齊方式。left：靠左對齊 center：置中對齊 right：靠右對齊 font-weight(文字粗細)：設定文字粗細。normal：正常 bold：粗體 bolder：特粗 細體：lighter width(寬)：區塊的寬度 (不設定，依系統原訂大小) |
|
指定背景圖位置 /*背景圖片x與y軸的位置*/ backgroud-position: 0% 0%; /*左邊上方*/ background-position : top; /*向上對齊*/ |
|
圖片重複方向 : 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
