close


 ～~感謝"芭樂園"分享~(請關掉背景音樂)~～ 































　



　






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=位置＞

奇魔聖誕節底布


http://tw.yimg.com/i/tw/blog/css/cat5_3/cat5_3.jpg


每組定義皆需以；號來做分隔


例如：
body{background-image:url(圖址); backgroud-position: 50% 50%; background-repeat:no-repeat; background-attachment:fixed;}
即指底圖置中、不重複貼、且頁面固定


單色顯示不加圖時可只用下式↓
body{background:#FFFFFF;} 或 body{background-color:#FFFFFF;}


語法範例：






/* Background　部落格背景 */
body{background-color:#FFFFFF; background-image:url(http://hk.geocities.com/h88wy/HH001.gif); background-repeat:repeat; background-attachment:fixed; }
或
/* Background　部落格背景 */
body{background:#FFFFFF}


部落標題文字置中語法：
#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{…}，也就是連背景都跟著動，但是這裡卻是底層。正確設透明度是在圖層下尚有圖層，且有需要部分顯現下圖層，或者要隱藏目前圖層（例如：隱藏框線）時才設立。


【border:3px outset #FFFF00;】或【border-top:3px outset;】為同一組的定義，所以各元件僅以（空格）做分隔；而 border-top、border-bottom、border-left、border-right 則是分別在定義各邊框，所以要用（；）號做分隔。

語法範例：（本語法未設立即為無框線。或用：body{border:0px;} 亦可）






/* 部落格框邊設定 */
body {
border-top:5px #FFFF00 solid ; /*5px 寬，黃色實線*/
border-bottom:5px #0000FF solid ; /*5px 寬，藍色實線*/
border-left:5px #000000 solid ; /*5px 寬，黑色實線*/
border-right:5px #FF0000 solid ; /*5px 寬，紅色實線*/
}


部落格佈局寬：


目前市場上螢幕寬大部分都是調整為 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 自動

語法範例：






/* col layout　定義佈局寬度 */
.twocolga .ycnt3col, .twocoldr .ycnt3col {zoom:1; width:950px; text-align:left; margin:0 auto;}


捲軸設定：






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

語法說明：可以到 http://cdh.idv.tw/cdh/no04.htm 先試做個捲軸，再把語法貼過來，只不過色彩差太多了。






















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:色碼;


整體色（看不出作用）

語法範例：






/* Scroll Bar　捲軸設定 */
html{ScrollBar-TRACK-color:#FFFFFF; ScrollBar-FACE-color:#E6EBD5; ScrollBar-ARROW-color:#FF0000; }


滑鼠設定：






/* Cursor　滑鼠游標＜螢幕上的游標＞*/
body{cursor:url(滑鼠位址)}
a:hover {cursor:url(滑鼠位址)}

語法說明：
body{cursor:url(滑鼠位址)}　是定義在一般顯示之滑鼠游標。
a:hover {cursor:url(滑鼠位址)}　是定義在滑鼠移到連結點所改變顯示之滑鼠游標。這部分見連結樣式教學有比較詳細的說明。


提供幾個滑鼠下載點，您可以從那裡複製到，但是最好是下載到自己的網路空間，以免原主人刪除或設限而失連。
游標網址：http://a.myidk.com/mouse/　移到編號能預覽
游標網址：http://www.wretch.cc/blog/ashine0118&article_id=6571377　移到前面名稱能預覽
游標網址：http://sheng.phy.nknu.edu.tw/wjs-13ani.htm　點紅心能預覽（只適用於 IE 瀏覽器）
游標網址：http://home.kimo.com.tw/a815182/ani/1_index.htm　已失連。他所提供的語法非用於奇摩部落格，要改為本式。
游標網址：http://home.kimo.com.tw/a815182/ani/2_index.htm　同上之第２頁，已失連


語法範例：






/* Cursor　滑鼠游標 */
body{cursor:url(http://hk.geocities.com/love99_h/Ani/M005.ani)}
a:hover {cursor:url(http://hk.geocities.com/love99_h/Ani/D02.ani)}
















前言

主文區

左右欄框

部落格主體

部落格頂部的三橫框

部落格範本

其他功能效果

發文 常用語法

網路空間申請教學

CSS 語法教學連結






myshero重新整理編輯\97.10.09-04





 





 ～學習修改文章框架　來自~~"隨芯所欲"　的　作品~~～ 


 


arrow
arrow
    全站熱搜
    創作者介紹
    創作者 Myshero 的頭像
    Myshero

    ╰☆ Myshero520╭☆

    Myshero 發表在 痞客邦 留言(0) 人氣()