部落格HTML / CSS語法應用

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

/*二度空間 CSS自訂樣式(自訂邊框 線樣式)範例,語法依照中文意思排列(語法請做選擇性使用,不可全部套上)*/

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

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

/*注意空格及每段語法連慣性,避免開啟動作不正常。無設定的相關語法,以yahoo預設值為設定值*/

/*背景預設顏色的作用: 圖片失聯時,以背景色替代,顏色要謹慎設定(有關背景的部份,必須配合透明度使用)*/

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

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

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

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

/*_______________兩段式背景_______________*/

/*兩段式背景(以下兩個背景語法需同時使用)PS:建議使用1280px以上寬度之圖片當底圖*/

/*兩段式背景-主背景--背景圖 - 背景圖不重複-背景置中上*/
body {background:url(主背景圖網址) no-repeat;background-position:center top; }

/*兩段式背景-副背景--背景圖 - 背景預設顏色-背景圖縱向重複-背景置中上(PS:此段背景主要目的是重複延伸背景,所以是切割主背景圖的下半段大約1/4當副背景圖銜接使用)*/
html {background:url(副背景圖網址) #1B006B repeat-y;background-position:center top;}

/*附記:使用超寬版面自動在頁底加上捲軸(滑軌)*/
html {overflow:auto;}

/*___________________________________*/

/*圖片重複方向定義解說 : 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#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;}

/*自訂留言板按鈕圖片*/ /*相關參考請至 ee部落格小物作品*/
#ymodmsgbd h3 a {display:block;background:url( 圖片網址 ) no-repeat;width:130px;height:130px;text-indent:-300px;}

/*自訂部落格相簿按紐圖片*/ /*相關參考請至 ee部落格小物作品*/
#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;}

/*文章標題小圖-不重複 - 小圖與文字間隙 - 小圖與文字位置*/
.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{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;}

/*套用圖片式邊框語法,透明度建議調整為100(在此無提供圖片式邊框)*/ /*相關參考請至eeの板型邊框收集*/

/*透明度請由進階樣式調整,以下僅做其它網頁應用參考,不能使用在奇摩部落格自訂樣式中*/

/*Opacity for blogtitle置頂欄透明度*/
#yblogtitle .rctop, #yblogtitle .rctop div, #yblogtitle .rcl, #yblogtitle .rcr, #yblogtitle .rcbtm, #yblogtitle .rcbtm div {zoom:1; filter:alpha(opacity:100)}

/*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:100)}

/*Background color for module左右背景透明度*/
.yc3sec .mbd, .yc3subbd .mbd, .yc3sec .mft, .yc3subbd .mft {zoom:1;  filter:alpha(opacity:100)}

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

/*捲軸改變顏色(此部分參考捲軸產生器)*/
html{
scrollbar-face-color: #1B006B;
scrollbar-highlight-color: #FFFFFF;   
scrollbar-shadow-color: #FFFFFF;  
scrollbar-3Dlight-color: #1B006B;   
scrollbar-arrow-color:#FFFFFF;    
scrollbar-track-color: #1B006B;
scrollbar-darkshadow-color:#1B006B }

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

/*文章分類--最新回應--最新文章--加入捲軸↓*/

/*文章分類--最新回應--最新文章--捲軸內容高度--內容超出區塊自動由瀏覽器決定-相對定位*/
 #ymodfolder .mbd, #ymodnewcomt .mbd, #ymodnewart .mbd {HEIGHT:250px;OVERFLOW:auto;position:relative;}

/*全板置中*/
body {text-align: center;}

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

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

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

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

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

/*隱藏文章發文日期*/
#ypartsingle .date,#yarticle .date {display:none}

/*隱藏奇摩頁尾)*//*頁首已禁止隱藏*/
#yhtw_mastfoot{display:none;}

/*隱藏"刊登贊助網站"框內文字語法置於自訂樣式中*/
.ysm  {display:none;}

圖片重複方向 :

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

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

repeat = x-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

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

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

英文色碼表                數字色碼表

相關設定與語法解說連結 :

1.IE捲軸顏色生成器|2.回應_引用+邊框|3.左右欄位+彩色邊框+底圖 |4.將視窗左邊界靠邊--視窗四邊加框線  |5.滑鼠指標移到超連結顯示立體彩邊框|6.部落格常用語法解說|7.自定小小圖花邊框|8.美化部落格月曆表

1.http://tw.myblog.yahoo.com/jw!.KNty8iGR0WBlosOtiUpDA--/article?mid=3884&next=3491&l=f&fid=57

2.http://tw.myblog.yahoo.com/jw!.KNty8iGR0WBlosOtiUpDA--/article?mid=7443&prev=1&next=7420&l=a&fid=57

3.http://tw.myblog.yahoo.com/jw!.KNty8iGR0WBlosOtiUpDA--/article?mid=7334&prev=7349&next=7325&l=a&fid=57

4.http://tw.myblog.yahoo.com/jw!.KNty8iGR0WBlosOtiUpDA--/article?mid=7210&prev=7240&next=7205&l=a&fid=57

5.http://tw.myblog.yahoo.com/jw!.KNty8iGR0WBlosOtiUpDA--/article?mid=7162&prev=7198&next=7089&l=a&fid=57

6.http://tw.myblog.yahoo.com/jw!.KNty8iGR0WBlosOtiUpDA--/article?mid=4514&prev=4665&next=3884&l=f&fid=57

7.http://tw.myblog.yahoo.com/jw!.KNty8iGR0WBlosOtiUpDA--/article?mid=7526&prev=1&next=7493&l=a&fid=57

8.http://tw.myblog.yahoo.com/jw!.KNty8iGR0WBlosOtiUpDA--/article?mid=7568&prev=7708&next=7526&l=f&fid=57