CSS語法公開 (影音.欄)
CSS語法還有一些好玩的功能：請看→玄音TEXT示範
CSS補充篇
1.MV SWF 音樂、奇摩影音、You Tube 影音，播放語法。
2.最上面的置頂區塊下拉。
3.在部落格加外框。各欄位加邊框。
4.部落格名稱、描述欄框：改文字顏色及換底色為底圖。
5.左欄框：在標題文字欄位及內容欄位加上底圖。
6.最新文章欄框：標題欄、內文欄改文字色加底圖。
7.將招呼語預設框換成圖片。
嗨！Dear的格友們 大家安安唷！
又一天的觀摩學習，玄音又學到好東西了，再來跟大家分享。
這都要感謝部落格小子的大大們，歡喜布施分享，感恩！
若您也有發現新的ＣＳＳ語法功能，是玄音沒有列出的，也請分享喔。玄音喜歡學習！先謝謝了。
1.MV SWF 音樂奇摩影音You Tube 影片播放語法：
語法範例：
MV SWF 影音 音樂播放：
說明：
影音網址 width="影片寬" height="影片高" autostart=false enablecontextmenu="0">
例：http://tw.yimg.com/i/tw/search/video04/flashright.swf ←可將此網址套進語法看看喔。
＼＼＼＼＼＼＼
將語法直接貼在文章發表的語法區內即可。文章發表下面有一個‵口觀看HTML 原始碼‵，前面口打勾就是貼語法區了。
音樂檔播放時：寬高是指影音播放器的大小。width="311"(影音播放器寬) height="47"(影音播放器高)
副檔名 mv swf 音樂檔 都可以套進影音網址。
／／／／／／／
卡通：戀愛學園 (直接複製語法。)
PS:本來以為自製的影片沒有上傳成功，結果剛剛又去看時，影片昨天上傳的影片突然出現了。好高興喔！有空可以看看喔！
說明：
在文章發表的語法區貼入複製的語法即可。有時影片不會顯現出來，多試幾次就ＯＫ了。
奇摩影音：上傳影片很慢，我製作了一部68ＭＢ的影片，上傳了三個小時，有傳完，可是影片沒有顯示，還是失敗了。等待是很費時的。所以乾脆就直接複製分享的影片來欣賞。
／／／／／／／
You Tube 影片分享： http://www.youtube.com
卡通：柯南片尾曲 (直接複製語法。)
說明：
在文章發表的語法區貼入複製的語法即可。有時影片不會顯現出來，多試幾次就ＯＫ了。
You Tube 影片：這也是分享影片，進入You Tube選部喜歡的影片，直接複製語法貼入文章發表語法區就可以了。
2.最上面的置頂區塊下拉：
語法範例：＃玄音TEXT＃ 示範
body{ border-top: 20px dotted;border-color:#000000;}
說明：（上外框top。大小20px。點線dotted。黑色#000000。設定值可以更改。）
語法可直接複製貼在ＣＳＳ底端即可。
最上面的置頂區塊下拉，會有這種現象產生是因為加了上方外框的原因。
外框就是可以把整個頁面圍起來的框，在這裡我只是要拉下置頂區塊，所以只貼入上外框語法。
3.部落格加外框及邊框。
部落格外框語法範例：＃本格示範＃
body{
border-right: 5px double;
border-top: 5px double;
border-left: 5px double;
border-bottom: 5px double;
border-color:red;
}
說明：(上top下bottom左left右right。框大5小5px。雙線框double。紅色框red(#FF1100)。）
設定值可以更改。色碼用英文字或代碼都可以，記得寫代碼時前面要加#。若只要上方框，就貼上方框語法，其他語法刪掉。
body{
border-right: 粗細px 邊框樣式; ←右邊
border-top: 粗細px 邊框樣式; ←上方
border-left: 粗細px 邊框樣式; ←左邊
border-bottom: 粗細px 邊框樣式; ←下方
border-color:顏色色碼;
}
邊框樣式：
none(無邊框) dotted(點線) dashed(虛線) solid(實線) double(雙線)
groove(立體凹線) ridge(立體凸線) inset(立體嵌入線) outset(立體隆起線)
欄位邊框語法範例：
名稱標題欄邊框:
/*Opacity for blogtitle*/
#yblogtitle .rctop, #blogtitle .rctop div, #yblogtitle .rcl, #yblogtitle .rcr, #yblogtitle .rcbtm, #yblogtitle .rcbtm div {zoom:1; filter:alpha(opacity:0);
border-right: 3px groove;
border-top: 3px groove;
border-left: 3px groove;
border-bottom: 3px double;
border-color:RED;
}
說明：
/*Opacity for blogtitle*/ ←名稱標題欄邊框
#yblogtitle .rctop, #blogtitle .rctop div, #yblogtitle .rcl, #yblogtitle .rcr, #yblogtitle .rcbtm, #yblogtitle .rcbtm div {zoom:1; filter:alpha(opacity:0);
border-right: 3px double;
border-top: 3px double;
border-left: 3px double;
border-bottom: 3px double;
border-color:RED;
}
(上top下bottom左left右right。框大小3px。雙線框double。紅色框red(#FF1100)。）
opacity:0 ←透明度
在ＣＳＳ裡找到這個 /*Opacity for blogtitle*/ 語法，把黃底色的語法複製加進去就可以了。
因為預設語法中，是沒有黃底色的語法，所以要自己另行加入。
記得語法要加在 } 符號裡面。設定值可以自行更改。欄位不想加框，就不用更動了。
下面的左欄邊框 內文邊框說明都是如此。
／／／／／／／
左欄邊框:
/*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:52);
border-right: 3px groove;
border-top: 3px groove;
border-left: 3px groove;
border-bottom: 3px groove;
border-color:RED;}
／／／／／／／
內文邊框:
/*Opacity for main content*/
.yc3pribd .rctop,.yc3pribd .rctop div,.yc3pribd .rcl,.yc3pribd .rcr,.yc3pribd .rcbtm,.yc3pribd .rcbtm div {zoom:1; filter:alpha(opacity:0);
border-right: 3px groove;
border-top: 3px groove;
border-left: 3px groove;
border-bottom: 3px groove;
border-color:RED;
}
說明：
※下面紅色語法是玄音TEXT裡的語法：只在新文章欄加左右框，大小5，點線(圓點)，白色框。
/*Opacity for main content*/
.yc3pribd .rctop,.yc3pribd .rctop div,.yc3pribd .rcl,.yc3pribd .rcr,.yc3pribd .rcbtm,.yc3pribd .rcbtm div {zoom:1; filter:alpha(opacity:100);
border-right: 5px dotted;
border-left: 5px dotted;
border-color:#FFFFFF;}
4.部落格名稱、描述欄框：改文字顏色及換底色為底圖。
語法範例：
/*Blog title*/
#yblogtitle .mbd,#yblogtitle .mft{background: url(http://www.demzen.dk/deco59/decorations3/demzen_deco_glitter_6.gif
) repeat;background-color: #E1FFE1;}
#yblogtitle h1{color:#666666; font-weight:bold;}
說明：
/*Blog title*/ ←部落格名稱描述欄，原預設值。
#yblogtitle .mbd,#yblogtitle .mft{background-color:#AA3F62; color:#FF9AD2;}
#yblogtitle h1{color:#FFC8E5;}
/*Blog title*/ ←加入了名稱描述欄框底圖（底色）
#yblogtitle .mbd,#yblogtitle .mft{圖片網址
) repeat;background-color: #E1FFE1;}
#yblogtitle h1{color:#666666; font-weight:bold;}
／／／／／／／
background-color: #E1FFE1 ←標題框的底色
color:#666666; ←標題名稱文字的顏色
5.左欄：標題字欄位及加上底圖。
左欄標題欄位語法範例：
/*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:#FBF2CA; color:#90620E;
background-image:url(http://www.debukuma.com/sozia1i6/back/tail_c1/bgtc4r.gif);
}
說明：
/*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:#AA3F62;color:#EFDBE2;}
/*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:#FBF2CA; color:#90620E;
background-image:url(圖片網址);
}
／／／／／／／
background:#FBF2CA; color:#90620E ←左欄標題底色。
background-image:url(圖片網址) ←左欄標題欄位加入圖片。
左欄內容欄位語法範例：
/*Nav module body*/
.yc3sec .mbd, .yc3subbd .mbd, .yc3sec .mft, .yc3subbd .mft{ background-image:url(http://www.demzen.dk/hpting59/baggrund/baggrundeanimals/animal_baggrund_12.gif
);}
說明：
/*Nav module body*/←左欄內容欄位原預設值只有底色。
.yc3sec .mbd, .yc3subbd .mbd, .yc3sec .mft, .yc3subbd .mft{background:#FFF4FA; color:#C7869F;}
/*Nav module body*/←左欄內容欄位加入底圖
.yc3sec .mbd, .yc3subbd .mbd, .yc3sec .mft, .yc3subbd .mft{background-image:url(圖片網址
);}
／／／／／／／
background-image:url(圖片網址) ←將左欄內容欄位的底色，改成圖片語法。
6.最新文章欄：標題欄、內文欄改字色加底圖。
最新文章標題欄範例語法：
/*Main content header*/
.yc3pribd .mhd{background:url(http://www.demzen.dk/animationer59/delfin/delfin7.gif) repeat; color:#FBF2CA;}
說明：
/*Main content header*/ ←最新文章標題欄預設值。
.yc3pribd .mhd{background:#FA79C0; color:#AA3F62;}
/*Main content header*/ ←最新文章標題欄加入底圖。
.yc3pribd .mhd{background:url圖片網址) repeat; color:#FBF2CA;}
／／／／／／／
background:url(圖片網址)←底色換成圖片。
repeat←圖片重覆貼滿。
最新文章內容欄範例語法：
/*Main content body*/
.yc3pribd .mbd, .yc3pribd .mft, #yreplymsg table, #ysbscrblist table, #ybloginfo table, #yusrinfo table, #yusrintro p{
background-image:url(http://www.h2.dion.ne.jp/~motherc/tyou13txt/tyou13img/tyou1309bg1.jpg
);
color:#1A4066} #ymodcal .mbd td strong {color:3B9DC1;}
說明：
/*Main content body*/ ←內文欄原預設值。
.yc3pribd .mbd, .yc3pribd .mft, #yreplymsg table, #ysbscrblist table, #ybloginfo table, #yusrinfo table, #yusrintro p{background:#FFF4FA; color:#8D0B36;}
#ymodcal .mbd td strong {color:#FC9557;}
background:#FFF4FA; color:#8D0B36 ←內文欄位底色。
color:#FC9557 ←內文欄位文字顏色。
／／／／／／／
/*Main content body*/ ←內文欄位更換底圖。
.yc3pribd .mbd, .yc3pribd .mft, #yreplymsg table, #ysbscrblist table, #ybloginfo table, #yusrinfo table, #yusrintro p{
background-image:url(http://www.h2.dion.ne.jp/~motherc/tyou13txt/tyou13img/tyou1309bg1.jpg
);
color:#1A4066} #ymodcal .mbd td strong {color:3B9DC1;}
background-image:url(圖片網址) ←內文欄位底圖。
7.將招呼語預設框換成圖片。＃本格展示＃
語法範例：
/*Opacity for blast*/
#yblast .bg {zoom:1; filter:alpha(opacity:67); background: url(http://www.msjh.tp.edu.tw/~c207a/Image/A058.gif) no-repeat}
說明：
/*Opacity for blast*/ ←招呼語
#yblast .bg {zoom:1; filter:alpha(opacity:67); background: url(圖片網址) no-repeat}
／／／／／／／
opacity:67：透明度多少。
no-repeat：圖片不重覆。
repeat：圖片重覆。會填滿整個招呼語框。
※若圖片不夠大，則改為圖片重覆 repeat。只要將 no- 刪掉即可。
以上就是新學的一些語法，希望對您有幫助，歡迎發問指教，我會盡力為您解答的。
祝您 玩的愉快
玄音合十
