close
區塊是指用<DIV>、<SPAN>等標籤所建立出的邏輯區域,或是圖形、表格等均可稱之為區塊。在DHTML中,使用區塊是非常頻繁的,所以區塊設定就顯得非常有用。



CLEAR

功能 :設定浮動元件位置 ( 可設無、左邊、右邊、兩邊 )

語法 : { CLEAR : NONE︱LEFT︱RIGHT︱BOTH }

範例 : {CLEAR:LEFT}



CLIP

功能 :剪輯可見部份

語法 : { CLIP : AUTO︱( shape ) }

( shape ) - RECT ( top ) ( right ) ( bottom ) ( left )

這個性質可決定區塊的哪些範圍是可視的,而元件在此設定範圍外是不可視的。我們必需指定一個矩形區域給它,依序為上、右、下、左座標,而座標原點是此元件 的左上角。例如我們可用clip:rect(0,100,100,0),則從(0,0)至(100,100)間都是可視的,此元件在這範圍外就看不到了。



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只能用在<THEAD>(不知道這個新標籤請至RONDO的HTML教學看看),代表表格在多頁時(如 列印),此區之表格將會自動加在有此表格之頁面的第一列。table-header-group與table-footer-group相似,但用於 <TFOOT>,作用是表格在多頁時,此區之表格將會自動加在有此表格之頁面的最末列。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-IMAGE : NONE︱URL ( url ) }



LIST-STYLE-POSITION

功能 : 設定條列項目符號位置 ( 可設內部、外部 )

語法 : { LIST-STYLE-POSITION : INSIDE︱OUTSIDE }



LIST-STYLE-TYPE

功能 : 設定條列項目符號形狀 ( 可設無、圓形、圓圈、正方形、小數點、羅馬符號、希臘符號 )

語法 :
{ 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

功能 : 設定元件後加分頁符號

語法 : { PAGE-BREAK-AFTER : AUTO︱LEFT︱RIGHT︱ALWAYS }



PAGE-BREAK-BEFORE

功能 : 設定元件前加分頁符號

語法 : { PAGE-BREAK-BEFORE : AUTO︱LEFT︱RIGHT︱ALWAYS }



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代表讓瀏覽器幫你決定。至於百分比法是依據其父元件的大小來決定的。



Z-INDEX

功能 : 設定Z軸參數 ( 正數為上方,負數為下方 )

語法 : { Z-INDEX : NUMBER }

所謂CSS之2.5D擺設就靠這個性質,當有很多元件重疊時(如position:absolute就會發生),擁有較大z-index值的元件會擺在上面,此值可正可負。如z-index:3會擺在z-index:2的元件之上。
arrow
arrow
    全站熱搜

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