Blog範本基本語法值概念

        俗語說的好“常在河邊走，哪有不濕鞋”在運用各路大仙開發出來的各種語法或者就算是使用阿土伯開發的無腦外掛，總是有搞混或是不明白的時候，因此適當的了解語法是有必要的。最好的方法就是會英文，然後跌跌撞撞的亂按、亂改、亂試!跟它拼了就對!(俺就是這樣學滴)當您要修改時請記得養成存檔的好習慣，如果怕造成無法挽回的錯誤，可另開設一個測試Blog，而且這年頭連網路都開始要環境保護了，所以在設定的地方把它設定為隱藏(避免浪費網路搜尋數值及各種資源，筆者我就為了找一個語法搜尋到一堆"測試Blog"!!)。一般來說區塊是指用 Div或是span。
(1)主要設定值

head 功能:此標籤為範本頁面抬頭，領悟後可延伸搭配header來設定，各種頁面使用的主要語法、javascript等都在此設定。

body 功能:一是主要為設定頁面的一般設定值，二是為主體顯示區域
main 功能:主顯示設定值輸入區域
footer 功能:底部顯示設定輸入區域
sidebar 功能:側欄顯示設定輸入區域


(2)常見語法

CLEAR

功能 : 設定浮動元件位置 ( 可設無、左邊、右邊、兩邊 )
語法 : { CLEAR : NONE︱LEFT︱RIGHT︱BOTH }
範例 : {CLEAR:LEFT}

CURSOR

功能 : 設定滑鼠游標 ( 可設自動、十字、箭頭、手形、移動、改變 - 雙箭頭、文字、等待、求助 )
語法 : { CURSOR : AUTO︱CROSSHAIR︱DEFAULT︱HAND︱MOVE︱E-RESIZE︱NE-RESIZE︱NW-RESIZE︱N-RESIZE︱SE-RESIZE︱SW-RESIZE︱S-RESIZE︱W-RESIZE︱TEXT︱WAIT︱HELP }


DISPLAY

功能 : 設定是否顯示
語法 : { DISPLAY : NONE }


        這個性質可設定整個元件要不要顯示，以及顯示的方式。它可用的參數這裡一一介紹。none代表不顯示，且此元件不占任何空間。block代表顯示，並視為區塊，前後緊臨的元件將換行顯示。inline代表顯示，但前後緊臨的元件會排在其左右，並不會換行。list-item代表顯示，與block大致相同。 table-header-group只能用在（不知道這個新標籤請至RONDO的HTML教學看看），代表表格在多頁時（如列印），此區之表格將會自動加在有此表格之頁面的第一列。table-header-group與table-footer-group相似，但用於，作用是表格在多頁時，此區之表格將會自動加在有此表格之頁面的最末列。IE4.0不支援block、inline、list -item這三種設定。使用範例如display:none此元件就被隱藏了

FLOAT

功能 : 設定浮動元件接續位置
語法 : { FLOAT : NONE︱LEFT︱RIGHT }


HEIGHT

功能 : 設定元件高度 (可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比%)
語法 : { HEIGHT : AUTO︱( length )︱( percentage ) }
範例 : {HEIGHT:10pt}


@IMPORT

功能 : 設定輸入排版樣式
語法 : @IMPORT URL ( url )


LEFT

功能 : 設定元件左邊位置 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )
語法 : { LEFT : AUTO︱( length )︱( percentage ) }


LIST-STYLE

功能 : 設定條列項目符號
語法 : { LIST-STYLE : KEYWORD︱POSITION︱URL ( url ) }


LIST-STYLE-IMAGE


功能 : 設定條列項目符號形狀 ( 可設無、圓形、圓圈、正方形、小數點、羅馬符號、希臘符號 )
語法 : { LIST-STYLE-TYPE : NONE︱DISK︱CIRCLE︱SQUARE︱DECIMAL︱LOWER-ROMAN︱UPPER-ROMAN︱LOWER-ALPHA︱UPPER-ALPHA }


MARGIN

功能 : 設定文字和邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )
語法 : { MARGIN : AUTO︱( length )︱( percentage ) }

這個性質一次設定上、下、左、右邊界與區塊外之元件間格距離。使用時應依序指定上、右、下、左，如margin:3px 2px 5px 1px。亦可一次指定四邊，如margin:2px，則全部均設2px。

MARGIN-BOTTOM


功能 :設定文字和下邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )
語法 : { MARGIN-BOTTOM : AUTO︱( length )︱( percentage ) }


MARGIN-LEFT


功能 : 設定文字和左邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )
語法 : { MARGIN-LEFT : AUTO︱( length )︱( percentage ) }


MARGIN-RIGHT

功能 : 設定文字和右邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )
語法 : { MARGIN-RIGHT : AUTO︱( length )︱( percentage ) }



MARGIN-TOP　

功能 : 設定文字和上邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )
語法 : { MARGIN-TOP : AUTO︱( length )︱( percentage ) }


OVERFLOW

功能 : 設定容器元件顯示方法
語法 : { OVERFLOW : NONE︱CLIP︱SCROLL }


這個性質是設定當區塊內包含的元件大於區塊之寬或高時，顯示的方法。可用值有auto（自動設定，當需要時出現捲軸）、scroll（強迫顯示捲軸，即使內部元件並無超過區塊邊界）、hidden（超出區塊的部份不顯示）、 visible（全部顯示，無視區塊大小）。最常用的是overflow:auto讓瀏覽器自動判斷

PADDING

功能 : 設定元件和邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )
語法 : { PADDING : ( length )︱( percentage ) }


這個性質一次設定上、下、左、右邊界的間格距離。使用時應依序指定上、右、下、左，如padding:3px 2px 5px 1px。亦可一次指定四邊，如padding:2px，則全部均設2px。

PADDING-BOTTOM

功能 : 設定元件和下邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )
語法 : { PADDING-BOTTOM : ( length )︱( percentage ) }


PADDING-LEFT


功能 : 設定元件和左邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )
語法 : { PADDING-LEFT : ( length )︱( percentage ) }


PADDING-RIGHT

功能 : 設定元件和右邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )
語法 : { PADDING-RIGHT : ( length )︱( percentage ) }


PADDING-TOP

功能 : 設定元件和上邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )
語法 : { PADDING-TOP : ( length )︱( percentage ) }


PAGE-BREAK-AFTER(or BEFORE)


功能 : 設定元件後加分頁符號
語法 : { PAGE-BREAK-AFTER : AUTO︱LEFT︱RIGHT︱ALWAYS } (BEFORE同)


POSITION


功能 : 設定元件位置 ( 可設絕對、相對、靜態 )
語法 : { POSITION : ABSOLUTE︱RELATIVE︱STATIC }


TOP


功能 : 設定元件上方位置 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )
語法 : { TOP : AUTO︱( length )︱( percentage ) }


VERTICAL-ALIGN


功能 : 元件垂直調整
語法 : { VERTICAL-ALIGN : BASELINE︱MIDDLE︱SUB︱SUPER︱TEXT-TOP︱TEXT-BOTTOM︱TOP︱BOTTOM }


VISIBILITY

功能 : 設定是否可見( 可設可見、隱藏、繼承 )
語法 : { VISIBILITY : VISIBLE︱HIDDEN︱INHERIT }


設定此元件要不要顯示，這個性質與display有相似之處，但不相同。可用值有visible（顯示）、inherit（貼附，如此元件所在之父元件可見，則此元件為可見，反之亦然）、hidden（隱藏，但仍占有空間，此與display:none不同）。用法如visibility:hidden則可隱藏此元件。


WIDTH　

功能 : 設定元件寬度 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )
語法 : { WIDTH : AUTO︱( length )︱( percentage ) }


此性質可設定區塊的寬度，可用單位或百分比法來指定其值，或是用特徵字auto。如width:30px或width:50%均是可行的方法，而width:auto代表讓瀏覽器幫你決定。至於百分比法是依據其父元件的大小來決定的。

當您看到這時，恭喜你！你已經具備了惡搞Blog範本的能力！