Los Angeles Chinese Learning Center, providing private Chinese Mandarin classes, Chinese tutors, Mandarin interpreter and translators, China investment report, investment opportunity report, China intelligence report, information on Chinese herbal medicines in Los Angeles
Corporate Services Other Services
Private Instruction Invest in China
Curriculum FAQ
Business Culture Links
Textbooks Our Staff
Hours and Location Contact Us
 

區塊屬性設定


區塊是指用<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的元件之上。

 

 
All contents copyright ? Los Angeles Chinese Learning Center, unless otherwise noted. Website Hosting and Promotion