Susan的布痴布玩

語法範例:　

#ymodprf .horos img{display:none;}
#ymodprf .horos{width:60px;height:75px;background:url(http://xxxxx.gif) center no-repeat;}

以上要更改的就是紅色字的地方！

60px , 75px 改成欲上傳的圖片大小！

http://xxxxx.gif → 就是你的圖片的位置

這段語法請放在 Blog 面版設定,自訂樣式內,最上面一行！

如果自訂樣式內有 /*customization CSS*/ 這個語法，請把改圖示的語法放在這個語法的下面.

CSS 將欄位底圖、底色、文字顏色更改

到部落格→管理部落格→面板設定→自訂樣式。

語法範例:　

/*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:
標題原本底色色碼 ; color: 標題字體顏色色碼 ; background-image:url(圖片網址);

編輯好語法後，貼到自訂樣式最後一行即可。

或許在自訂樣式內就有一個 " /*Nav module header*/ "，我是把它整個刪了，但有備份起來！

CSS 語法教學-欄位前加圖案

到部落格→管理部落格→面板設定→自訂樣式。

語法範例:　

/*Nav module list*/
.ycntmod .mbd ul.list li {background:url(圖片網址1) left .3em no-repeat;padding-left:17px;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)48px center no-repeat;}

語法說明：

圖片網址1 ==>左右二個分類欄的小圖

圖片網址2 ==>文章分類內==>所有文章,這個連結前的小圖

left .3em → 3em 數字越大,圖片越往下移動

no-repeat;padding-left:15px;margin → 圖與文字的距離 數字越大 距離越遠

margin-bottom:2px;_margin-bottom:3px → 與此行底部邊際距離

_line-height:1.5em → 此行 圖 的所在高度  數值越大 高度越高

編輯好語法後，貼到自訂樣式最後一行即可。

PS.要在 /*Nav module header*/ 這個語法之前...應該吧，我是這樣做才成功的，圖也不能太大！

CSS 招呼語底圖

語法範例:　

/*Opacity for blast*/
#yblast .bg {zoom:1; filter:alpha(opacity:100); background: url(http://xxxxx.gif) no-repeat}

1.opacity:100 → 是透明度　數字越大越透明。

2.圖片網址 → 是你要的招呼語底圖（在圖片上按右鍵→內容→網址→複製網址）。

3.no-repeat → 是圖片不重複。要圖片重複改成 repea t即可。

圖片重複會填滿整個招呼語底圖。

編輯好語法貼到「自訂樣式」的最後一行即可。

PS.要在 /*Nav module header*/ 這個語法之前...應該吧，我是這樣做才成功的！

CSS 語法教學-Blog 名稱字型更改

語法範例:

color:#0000FF → 改色碼 

font-size:130% → 改文字大小

font-family → 華康少女文字W3

font-family → 標楷體

CSS 語法教學-文章標題圖案 & 字型

語法範例:　

/*article content module*/
.yblogcnt .blgtitlebar {margin-bottom:10px;zoom:1;}
.yblogcnt .blgtitlebar h2 {font-size:126%;font-weight:bold;background:url(http://xxxxx.gif) no-repeat;padding-left:32px;fout-family:字型}
.yblogcnt .blgtitlebar h2 a {color:#195693; padding-right:5px;}

1.126% → 字型大小

2.要在 /*Nav module header*/ 這個語法之前。

CSS 卷軸變色教學

語法範例:　

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

CSS 自訂欄位-新增可愛圖片、連結網址教學

就跟一般 html 是一樣的

插入Flash：

[iframe src='你的flash檔' width="120" height="120"></iframe]

width → 寬，height → 高，自訂欄位內寬最好是120

請記得把上面的　[　&　]　改回　<　&　>

CSS 語法教學-滑鼠游標

語法範例1.

body{cursor:url(平時游標);}
a:hover{cursor:url(連結時游標);}

語法範例2.

body{cursor:hand;}
a:hover{cursor:crosshair;}

藍色部份為滑鼠圖案。

語法格式:

se-resize(向右下箭頭)　　　　sw-resize(向左下箭頭)
auto(自動決定)　　　　       　default(預設值)
crosshair(十字)　　　　       　hand(手形)
move(移動時的游標)　　     　help(有問號的游標

text(文字編輯的游標)　　    　wait(忙碌中的游標)
w-resize(向左箭頭)　　　　　 e-resize(向右箭頭)

n-resize(向上箭頭)　　　　 　ne-resize{向右上箭頭)
nw-resize(向左上箭頭) 　　  　s-resize(向下箭頭)

語法範例1是用圖檔下去改，而語法範例2是用語法控制內定的圖案

CSS 語法教學-去除連結底線

語法範例:

/*Links文章去除連結底線*/
a,a:link,a:visited{color:#002971;text-decoration: none}
a:hover{color:#6699FF;background-color: #FF00FF;text-decoration: none;}

語法說明:

color:#660000 → 改顏色

色碼表查詢

none → 加這句 去除連結底線

a,a:link,a:visited{color:#002971 → 超連結字體顏色 → 314

a:hover{color:#6699FF → 滑鼠停在超連結中文字的顏色 → 314

background-color: #FF00FF → 滑鼠停留在超連結中文字的底色 → 314

CSS 語法教學-更新日期前－小圖

語法範例:

/*Module latest upup更新日期前圖*/
#ymodupdate .mbd .date{background:url(http://xxxxx.gif) left center no-repeat;padding-left:7px;font-size:89%;font-family:verdana;}

語法說明：

padding-left:7px → 圖檔和右邊文字相差距離，數字越大，兩者之間距離越遠
font-size:89% → 圖檔大小

CSS 語法教學-框線設定

框線語法：

語法說明：

藍色-改色碼 → color:#904E0E

opacity:100 → 不透明

opacity:0 → 透明

1px → 為外框的厚度，數值越大寬度越大，可自行設定。

設成 0px 則可消除外框

double → 可改為下列不同樣式的外框

solid(實心線)

dotted(點)

dashed(短線)

double(雙實線)

立體效果：

groove(立體內凸框)、ridge(立體浮凸框)、inset(凹框)、outset(凸框)

CSS 語法教學-關於文字&底圖顏色

語法範例:

/*Blog title部落格名-顏色設定*/
#yblogtitle .mbd,#yblogtitle .mft{background-color:#FFFFCC; color:#ffffff;font-family:標楷體;font-size:130%;}
#yblogtitle h1{color:#0000FF;} background-color: #CCFFFF;font-family:標楷體;font-size:130%;}

語法說明:

background-color:#FFFFCC → 標題橫圖的底色

color:#ffffff → 標題下字體顏色

#yblogtitle h1{color:#0000FF;} → 文字顏色

background-color: #CCFFFF; → 文字底色

font-family:標楷體;font-size:130%; → 更改字型 & 大小

CSS 語法教學-關於背景圖

文章背景語法

去除連結底線+圖片背景語法範例：

CSS 頂端功能欄更換背景語法

語法說明:

/*Master header*/
#yhtw_masthead{background-image: url(http://xxxxx.gif); → 紅色部分更換圖檔

color:#000080;filter:alpha(opacity=50); opacity:0.30; moz-opacity:0.5;}
#yhtw_masthead a,#yhtw_masthead a:link、

#yhtw_masthead a:visited,

#yhtw_masthead a:hover{color:#000080;} → #更換文字顏色色碼

CSS 左右兩側標題背景圖語法範例

1.紅色-改顏色

2.灰色-改圖片