奇摩部落格自訂式樣CSS語法總覽(四)特殊語法

2008060718:49
蒐集:自訂式樣教學  2007/11/12 01:24

奇摩部落格自訂式樣CSS語法總覽(四)特殊語法

請從

管理部落格 → 面板設定 → 自訂樣式 → 在到CSS欄

將上面語法覆製 → 貼在CSS內容欄最下面

CSS語法欄內沒有相同的語法  就直接貼上  有的話請(請覆蓋原先的設定)

(重覆貼取語法會干擾程式,可能會造成效果無法顯示,

或是其他無法預期的事情,除非把語法清除重新設定。)

【進階樣式和自訂樣式的設定也會相互干擾】

連結類語法:

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

 

/*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}

部落格內字體大小顏色設定:

/*Blog title標題字置中及字體大小顏色設定*/
#yblogtitle .mbd,#yblogtitle .mft{font-size:180%;color:#000000 ;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:新細明體;}

語法中桃紅色字180% 是字的大小請自行修改

字體大小設定範例:

font-size:100%;

可設定屬性有  點(pt)  英吋(in) 公分(cm)  點(px) 百分比(%)

藍色字是字的顏色色碼請參考下面網頁色碼表在自行修改

http://xxx.stenly.com/color_list.htm

字體顏色設定範例

color:#ff0000;

可設定顏色英文名稱或十六進位色碼填英文名稱CSS僅接受16個常見的(green、blue、red、purple、navy、olive.....),其餘要填色碼。

字體式樣(請用一般如新明細體 , 標楷體等如太特殊字有些瀏覽器無法判讀喔)

字體設定屬性範例

font-family:標楷體;

字體式樣設定~屬性有

serif (新細明體或Times等)
sans-serif (Helvetica等)
cursive (筆記體的字型)
fantasy (裝飾為主的字型)
monospace (等寬的字型)


 

 

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

 

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

 

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

其他特殊設定語法:

/*部落格單色外框線*/
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;}

 

/*guestbook留言版加圖片*/

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

 

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

 

/*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;}

 

/*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(自我介紹圖片的網址);}

 

/*show comment bar文章預覽區不顯示回應 引用文字*/
.showcmnt {display:none;}
.showcmnt span {display:none;}
.showcmnt span:last-child {display:none;}
.showcmnt span a {display:none;}

 

/*Blog title部落敘述換歡迎圖片置中,字型顏色大小設定*/
#yblogtitle .mbd{text-align:center}
#yblogtitle .mbd .thd{background-image:url(圖片網址);background-repeat:no-repeat;background-position:0% 100%
;width:圖寬px;height:圖高px;font-family:標楷體;font-size:20px;text-align:center}
#yblogtitle h1{color::#4169E1;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:100)}