close
CSS部落格主體總整理
Blog 底布（背景）設定：
/* Background 部落格底布＜背景＞*/
body{background:#f6f6f6}
或是
/* Background color for whole page 定義部落格底色＜color=色彩。whole page=全部頁面＞*/
body{background-color: #f6f6f6}
/* Background image for whole page 定義部落格背景圖。＜image=圖像＞*/
body{background-image: url(圖檔位址); background-repeat: repeat}
↑↑都是在定義部落格底布，可將其合在一起，以免因加添元件時不小心重複了用語。
語法說明：
/* Background */ ←這是沒用過進階樣式會顯示的標頭
/* Background color for whole page */ ←含↓都是用過進階樣式後會顯示的標頭
/* Background image for whole page */ ←含↑都是用過進階樣式後會顯示的標頭
body{……} ←這是底布區語法標籤，可加入↓下面的各個元件來控制＜body=本體、主要部分＞
background-color:#F6F6F6; 定義部落格底色（未設定時會依您選用的樣式的內定色）
F6F6F6←是指顏色代碼。
background-image:url(圖檔位址); 定義部落格背景使用圖檔。圖檔未顯現的部分會以底色顯示。
圖檔位址是指置放於網路空間的位址，而非指您 Pc 內的位址或置於部落格相簿裡的圖位址。
background-repeat:repeat; 重複貼圖方式。除非底圖夠大，否則會有留白。repeat=重複，可佈滿框內。
用 no-repeat 則單圖顯示。用 repeat-x 則於X軸（水平）佈滿。用 repeat-y 則於Y軸（垂直）佈滿。
background-attachment:fixed; 固定部落格底布（捲動時只捲動其他內容）＜attachment=貼圖方法，fixed=固定、不動的＞
backgroud-position: ?% ?%; 此語已無效。是在定義圖邊距左側 ?％、距上方 ?％，可調整 ％ 來移動單一底圖位置。＜position=位置＞
部落標題文字置中語法：
#yblogtitle .mbd,#yblogtitle .mft{font-size:100%;color:#c30000;font-family:新細明體; color:#c30000;text-align:center;}
#yblogtitle .thd a{width:168px;height:20px;top:-0px;position:relative;left:0px;display:block;}
#yblogtitle .thd h1 {font-size:100%;color:white;font-family:新細明體;}
讓留言、文章回應以及左右欄位置中
BODY {Font-Family:verdana; text-align:center; }
Blog 框線（邊線）設定：
框線語法亦可直接加在上一（部落格底布）式內。
/* 部落格框邊設定 */
body {border:3px outset #FFFF00;}
或是用下式↓分別設定框飾
/* 部落格框邊設定 */
body {border-top:3px outset; border-bottom:3px outset; border-left:3px outset; border-right:3px outset; border-color:#FFFF00; opacity:100;}
語法說明：
body{……} 同樣是底布區語法標籤，可加入↓下面的各個元件來控制
border:3px
或
border-top:3px
border-bottom:3px
border-left:3px
border-right:3px 指邊框線厚 3px，值越大厚度越大，設成 0px 即是無邊框＜border=飾邊＞
獨立、各別定義框線：
border-top（上框邊）
border-bottom（下框邊）
border-left（左框邊）
border-right（右框邊）
框邊樣式 double=雙實線、solid=實心線、dotted=菱形點線、dashed=虛線、
outset=凸框、inset=凹框、groove=立體內凹框、ridge=立體浮凸框
border-color:#FFFF00;
第一式之 #FFFF00 定義框線色
因於 border:3px outset #FFFF00; 已指定是用於 border 所以不用再指定了
opacity:100 opacity 是在定義不透明度：100=不透明、0=透明。在這裡定義透明度是錯誤的，圖片或顏色的深淺，由圖片更改或色塊挑選即可，這裡設了透明度將作用於整個 body{…}，也就是連背景都跟著動，但是這裡卻是底層。正確設透明度是在圖層下尚有圖層，且有需要部分顯現下圖層，或者要隱藏目前圖層（例如：隱藏框線）時才設立。
部落格佈局寬：
目前螢幕寬大部分都是調整為 1024，扣除應用程式的邊框（以 IE 來說）7*2 = 14 pt，再扣捲軸寛 18 pt 後，內容區只剩約 990 pt，所以您要調整的佈局寬最大也就是在這個範圍內。另外， Yahoo 部落格左右欄框如以最寬的無框線方式呈現其寬度是 150*2 = 300 pt，左右欄框與內容區間隙是 11*2 = 22 pt，主文區邊與內文間隙約是 7*2 = 14 pt；所以一般內文圖檔或影片框在三欄式如超過約 650 pt 就會逼走左欄框往下了，這也就是說，圖檔及影片框最好是設 600*450 為最佳呈現方式。
/* col layout 定義佈局寬度<山坳 佈局、安排>/
.twocolga .ycnt3col, .twocoldr .ycnt3col {zoom:1; width:950px; text-align:left; margin:0 auto;}
語法說明：
.twocolga .ycnt3col, .twocoldr .ycnt3col {……} 定義除頂欄（第一橫框）外佈局總寬度，第二橫框及主文區會擴張到最寬。
這式主要用於二欄式，三欄式已經很寬了應不用再定義。
zoom:1; 圖層：１
width:950px; 定義佈局寬。二欄式內定寬是 750 px，1024 的螢幕最寬可調到 990 px
您如要展示底布漂亮圖檔，要調多少就得斟酌好
text-align:left; 本文-排成一排：左
margin:0 auto; 邊、邊空白：0 自動
捲軸設定：
/* Scroll Bar 捲軸設定 */
html{ScrollBar-TRACK-color: #B4D8B4; ScrollBar-FACE-color: #FFFFFF; ScrollBar-ARROW-color: #FF0000; ScrollBar-HIGHLIGHT-color: #008000; ScrollBar-SHADOW-color: #008000; ScrollBar-3DLIGHT-color: #008000; ScrollBar-DARKSHADOW-color: #008000; ScrollBar-BASE-color: #0000FF; }
語法說明：
html{……}
ScrollBar-TRACK-color:色碼; 軌道色
ScrollBar-FACE-color:色碼; 軸面色
ScrollBar-ARROW-color:色碼; 箭頭色
ScrollBar-HIGHLIGHT-color:色碼; 軸面及三角左邊框色
ScrollBar-SHADOW-color:色碼; 軸面及三角右邊框色
ScrollBar-3DLIGHT-color:色碼; 左立體邊
ScrollBar-DARKSHADOW-color:色碼; 右立體邊
ScrollBar-BASE-color:色碼; 整體色（看不出作用）
滑鼠設定：
/* Cursor 滑鼠游標＜螢幕上的游標＞*/
body{cursor:url(滑鼠位址)}
a:hover {cursor:url(滑鼠位址)}
語法說明：
body{cursor:url(滑鼠位址)} 是定義在一般顯示之滑鼠游標。
a:hover {cursor:url(滑鼠位址)} 是定義在滑鼠移到連結點所改變顯示之滑鼠游標。
/* Background 部落格底布＜背景＞*/
body{background:#f6f6f6}
或是
/* Background color for whole page 定義部落格底色＜color=色彩。whole page=全部頁面＞*/
body{background-color: #f6f6f6}
/* Background image for whole page 定義部落格背景圖。＜image=圖像＞*/
body{background-image: url(圖檔位址); background-repeat: repeat}
↑↑都是在定義部落格底布，可將其合在一起，以免因加添元件時不小心重複了用語。
語法說明：
/* Background */ ←這是沒用過進階樣式會顯示的標頭
/* Background color for whole page */ ←含↓都是用過進階樣式後會顯示的標頭
/* Background image for whole page */ ←含↑都是用過進階樣式後會顯示的標頭
body{……} ←這是底布區語法標籤，可加入↓下面的各個元件來控制＜body=本體、主要部分＞
background-color:#F6F6F6; 定義部落格底色（未設定時會依您選用的樣式的內定色）
F6F6F6←是指顏色代碼。
background-image:url(圖檔位址); 定義部落格背景使用圖檔。圖檔未顯現的部分會以底色顯示。
圖檔位址是指置放於網路空間的位址，而非指您 Pc 內的位址或置於部落格相簿裡的圖位址。
background-repeat:repeat; 重複貼圖方式。除非底圖夠大，否則會有留白。repeat=重複，可佈滿框內。
用 no-repeat 則單圖顯示。用 repeat-x 則於X軸（水平）佈滿。用 repeat-y 則於Y軸（垂直）佈滿。
background-attachment:fixed; 固定部落格底布（捲動時只捲動其他內容）＜attachment=貼圖方法，fixed=固定、不動的＞
backgroud-position: ?% ?%; 此語已無效。是在定義圖邊距左側 ?％、距上方 ?％，可調整 ％ 來移動單一底圖位置。＜position=位置＞
部落標題文字置中語法：
#yblogtitle .mbd,#yblogtitle .mft{font-size:100%;color:#c30000;font-family:新細明體; color:#c30000;text-align:center;}
#yblogtitle .thd a{width:168px;height:20px;top:-0px;position:relative;left:0px;display:block;}
#yblogtitle .thd h1 {font-size:100%;color:white;font-family:新細明體;}
讓留言、文章回應以及左右欄位置中
BODY {Font-Family:verdana; text-align:center; }
Blog 框線（邊線）設定：
框線語法亦可直接加在上一（部落格底布）式內。
/* 部落格框邊設定 */
body {border:3px outset #FFFF00;}
或是用下式↓分別設定框飾
/* 部落格框邊設定 */
body {border-top:3px outset; border-bottom:3px outset; border-left:3px outset; border-right:3px outset; border-color:#FFFF00; opacity:100;}
語法說明：
body{……} 同樣是底布區語法標籤，可加入↓下面的各個元件來控制
border:3px
或
border-top:3px
border-bottom:3px
border-left:3px
border-right:3px 指邊框線厚 3px，值越大厚度越大，設成 0px 即是無邊框＜border=飾邊＞
獨立、各別定義框線：
border-top（上框邊）
border-bottom（下框邊）
border-left（左框邊）
border-right（右框邊）
框邊樣式 double=雙實線、solid=實心線、dotted=菱形點線、dashed=虛線、
outset=凸框、inset=凹框、groove=立體內凹框、ridge=立體浮凸框
border-color:#FFFF00;
第一式之 #FFFF00 定義框線色
因於 border:3px outset #FFFF00; 已指定是用於 border 所以不用再指定了
opacity:100 opacity 是在定義不透明度：100=不透明、0=透明。在這裡定義透明度是錯誤的，圖片或顏色的深淺，由圖片更改或色塊挑選即可，這裡設了透明度將作用於整個 body{…}，也就是連背景都跟著動，但是這裡卻是底層。正確設透明度是在圖層下尚有圖層，且有需要部分顯現下圖層，或者要隱藏目前圖層（例如：隱藏框線）時才設立。
部落格佈局寬：
目前螢幕寬大部分都是調整為 1024，扣除應用程式的邊框（以 IE 來說）7*2 = 14 pt，再扣捲軸寛 18 pt 後，內容區只剩約 990 pt，所以您要調整的佈局寬最大也就是在這個範圍內。另外， Yahoo 部落格左右欄框如以最寬的無框線方式呈現其寬度是 150*2 = 300 pt，左右欄框與內容區間隙是 11*2 = 22 pt，主文區邊與內文間隙約是 7*2 = 14 pt；所以一般內文圖檔或影片框在三欄式如超過約 650 pt 就會逼走左欄框往下了，這也就是說，圖檔及影片框最好是設 600*450 為最佳呈現方式。
/* col layout 定義佈局寬度<山坳 佈局、安排>/
.twocolga .ycnt3col, .twocoldr .ycnt3col {zoom:1; width:950px; text-align:left; margin:0 auto;}
語法說明：
.twocolga .ycnt3col, .twocoldr .ycnt3col {……} 定義除頂欄（第一橫框）外佈局總寬度，第二橫框及主文區會擴張到最寬。
這式主要用於二欄式，三欄式已經很寬了應不用再定義。
zoom:1; 圖層：１
width:950px; 定義佈局寬。二欄式內定寬是 750 px，1024 的螢幕最寬可調到 990 px
您如要展示底布漂亮圖檔，要調多少就得斟酌好
text-align:left; 本文-排成一排：左
margin:0 auto; 邊、邊空白：0 自動
捲軸設定：
/* Scroll Bar 捲軸設定 */
html{ScrollBar-TRACK-color: #B4D8B4; ScrollBar-FACE-color: #FFFFFF; ScrollBar-ARROW-color: #FF0000; ScrollBar-HIGHLIGHT-color: #008000; ScrollBar-SHADOW-color: #008000; ScrollBar-3DLIGHT-color: #008000; ScrollBar-DARKSHADOW-color: #008000; ScrollBar-BASE-color: #0000FF; }
語法說明：
html{……}
ScrollBar-TRACK-color:色碼; 軌道色
ScrollBar-FACE-color:色碼; 軸面色
ScrollBar-ARROW-color:色碼; 箭頭色
ScrollBar-HIGHLIGHT-color:色碼; 軸面及三角左邊框色
ScrollBar-SHADOW-color:色碼; 軸面及三角右邊框色
ScrollBar-3DLIGHT-color:色碼; 左立體邊
ScrollBar-DARKSHADOW-color:色碼; 右立體邊
ScrollBar-BASE-color:色碼; 整體色（看不出作用）
滑鼠設定：
/* Cursor 滑鼠游標＜螢幕上的游標＞*/
body{cursor:url(滑鼠位址)}
a:hover {cursor:url(滑鼠位址)}
語法說明：
body{cursor:url(滑鼠位址)} 是定義在一般顯示之滑鼠游標。
a:hover {cursor:url(滑鼠位址)} 是定義在滑鼠移到連結點所改變顯示之滑鼠游標。
全站熱搜
留言列表
