DIV標籤
定義文檔中分區的標籤
DIV標籤，稱為區隔標記。作用是設定字、畫、表格等的擺放位置。當你把文字、圖象，或其他的放在DIV中，它可稱作為“DIVblock”，或“DIVelement”或“CSS-layer”，或乾脆叫“layer”。而中文我們把它稱作“層次”。
DIV元素，是用來為HTML文檔內大塊（block-level）的內容提供結構和背景的元素。DIV的起始標籤和結束標籤之間的所有內容都是用來構成這個塊的，其中所包含元素的特性由DIV標籤的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。
可定義文檔中的分區或節（division/section）。
標籤可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。如果用id或class來標記
，那麼該標籤的作用會變得更加有效。
DIV標籤應用於StyleSheet（樣式表）方面會更顯威力，它最終目的是給設計者另一種組織能力，有Class、Style、title、ID等屬性。
是一個塊級元素。這意味著它的內容自動地開始一個新行。實際上，換行是
固有的特定格式表現。可以通過
的class或id應用額外的樣式。
不必為每一個
都加上類或id，雖然這樣做也有一定的好處。
可以對同一個
元素應用class或id屬性，但是更常見的情況是只應用其中一種。這兩者的主要差異是，class用於元素組（類似的元素，或者可以理解為某一類元素），而id用於標識單獨的特定的元素。
以下內容為例：
align="center"
可選值：center，left，right。決定字、畫、表格等居中、靠左或靠右的作用和居中標記一樣，前者是由HTML3.0開始的標準，後者是通用己久的標示法。
CSS單元的位置和層次-div標籤
都知道，在網頁上利用HTML定位文字和圖象是一件“令人心痛”的事情。必須使用表格標籤和隱式GIF圖象，即使這樣也不能保證定位的精確，因為瀏覽器和操作平台不同會使顯示的結果發生變化。
而CSS能使你看到希望的曙光。利用即將學到的CSS屬性，你可以精確地設定元素的位置，還能將定位的元素疊放在彼此之上。
CascadingStyleSheets（CSS）是DHTML的基礎。CSS用來設定你網頁上的元素是如何展示的。CascadingStyleSheetsPositioning（CSS-P）是CSS的一個擴展，它可用來控制任何東西在網頁上或是說在窗口中的位置。請你記住這兩個名詞：CSS和CSS－P。下面四個英文網址提供了詳細的關於CSS和CSS-P的文件和解釋。
●1．使用DIV標籤（div）
當使用CSS-P的時候，我們主要把它用在DIV（division）tag上。當你把文字，圖象，而中文把它稱作“層次”。所以當你以後看到這些名詞的時候，你就知道它們是指一段在DIV中HTML。
使用DIV的方法跟使用其他tag的方法一樣：
ThisisaDIVtag.
如果單獨使用DIV而不加任何CSS-P,那麼它在網頁中的效果和使用是一樣的。
但當把CSS-P用到DIV中去以後，就可以嚴格設定它的位置。首先需要給這個可以被CSS-P控制的DIV一個ID或說是它的名字。比如說給下面這個DIV的名字是truck。給名字的目的是以後可用JavaScript來控制它，比如說移動它或改變它的一些性質等等。
Thisisatruck
給層次取什麼名字是隨意的，名字可以是任何英文字母和數字，但第一個必須是字母。有兩種把CSS-P應用到DIV的方法。
InlineCSS：Inline是最常用的方法。
Thisisatruck.
ExternalSTYLEtag：使用External方法的結果是一樣的。會在以後的課程里再詳細解釋這種方法。主要討論Inline方法。請注意在External方法里，在STYLE里的ID和DIV里的關係。
Thisisatruck.
Cross-BrowserCSS性質：
這個課程的主要目的是讓你寫出的網頁在NS4和IE4上都能工作，所以主要討論那些對倆者都通用的性質。下面這些性質符合由W3C給出的標準。
position 決定DIVtag是如何放置的。“relative”意思是DIV的位置是相對於其他tag的，而“absolute”是說DIVtag的位置是相對於它所在的窗口。
left 相對於窗口左邊的位置
top 相對於窗口上邊的位置
width DIVtag的寬度。所有在DIV里的文字或html都在裡面。
height DIVtag的高度。這個性質很少用除非你想Clip層次。
clip 給出layer的clipping（可看的見的）部分。Clip可使得DIV顯示為一個可以定義的很準確的方塊。你可以用以下的四個值來給出這個方塊的在DIV位置和大小。
clip:rect(top,right,bottom,left);
visibility 隱蔽或展現DIV根據它的值“visible”，“hidden”，“inherit”。
z-index DIVtag的立體位置。值越大DIV的位置越高。
background-color DIV背景的顏色。
layer-background-color Netscape的DIV背景顏色。
background-image DIV的背景圖象。
layer-background-image Netscape的DIV的背景圖象。
●2．絕對定位和相對定位（position）
絕對定位：
定位屬性將是網蟲們打開幸福之門的鑰匙：
H4{;left:100px;top:43px}
這項CSS規則讓瀏覽器將
的起始位置精確地定在距離瀏覽器左邊100象素，距離其頂部43象素的位置。注意這裡設置了的是左邊和頂部，也就說，文字將從左到右，從上到下載入瀏覽窗口。
左邊和頂部屬性很直觀，左邊（left）設定要素距瀏覽器窗口左邊的距離，頂部（top）設定距離瀏覽器窗口頂部的距離。設定這些距離時，你可以使用所學過的各種度單位或比例值。使用比例值時，比例值的是相對於母體要素的尺寸。
你可以定位什麼呢？任何東西！段落、單詞、GIF和JPEG圖象、QUICKTIME電影等等。
相對定位：
絕對定位使你能精確地定位元素在頁面的獨立位置，而不考慮頁面其它要素的定位設置。相對定位指你所定位的元素的位置相對於在文件中所分配的位置。例：
I{;left:40px;top:10px}
相對定位的關鍵在於定位了的元素的位置是相對於它通常應在的位置進行定位。相對定位單元在普通的靜態定位單元的行間出現，定位時沒有把自己和靜態定位單元完全分開。如果你停止使用相對定位，則文字的顯示位置將恢復正常。使用相對定位時要小心，否則容易將頁面弄得非常亂。
除了相對定位和絕對定位，你還可以使用static（靜止）參數值。Static是position特性的預設值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位設置。也就是說，除了邊距特性，或通過使用float特性來浮動單元可影響單元的定位外，其它均不可以。
●3．定位單元的控制（width、height、visiblility）
除了控制定位單元的左上角位置，你還可以控制單元的寬度和高度，及單元在頁面的可視性。
寬度：定位了的元素在頁面上顯示時仍然會從左到右一直顯示。利用寬度屬性就可以設定字元向右流動的限制，即設定元素的寬度。
DIV{;left:200px;top:40px;width:150px}
瀏覽器接到這項規則時，它將文字按照規則規定的效果顯示，還將段落最大水平尺寸限制在150象素。
寬度屬性只適用於絕對定位的元素。你可以使用學過的任何一種長度單位，或使用比例值設定寬度，比例值指相對於母體元素的比例。IE4中，這項屬性還可用於圖象。你可以通過寬度設置人為地拉寬或壓縮圖象。
高度：理論上講，高度應該和寬度的設置類似，只不過是在垂直方向上：
DIV{;left:200px;top:40px;height:150px}
這裡用了“理論上講”，因為有些瀏覽器不支持高度屬性。
可視性：利用CSS，你可以隱藏元素，使其在頁面上看不見。這條屬性對於定位了的和未定位的元素都適用。
H4{visibility:hidden}
選項：
visible使元素可以被看見
hidden使元素被隱藏
inherit指它將繼承母體元素的可視性設置。
值inherit為預設值。這使單元繼承父單元的可見性。所以，如果某一段是隱藏的，則它包含的任何行間單元也都被隱藏。這一繼承性可被明確指定的可見性取代。例如，段內的EM單元被指定為可見，這時如果該段被隱藏，則段內的所有其它內容都將消失，而唯有EM單元中的文本是可見的。
color:#999999文字顏色
font-family:宋體文字字型
font-size:10pt文字大小
font-style:italic文字斜體
font-variant:small-caps小字體
letter-spacing:1pt文字間距
line-height:200%設定行高
font-weight:bold文字粗體
vertical-align:sub下標字
vertical-align:super上標字
text-decoration:line-through加刪除線
text-decoration:overline加頂線
text-decoration:underline加底線
text-decoration:none刪除連接底線
text-transform:capitalize首字大寫
text-transform:uppercase英文大寫
text-transform:lowercase英文寫
text-align:right文字*右對齊
text-align:left文字*左對齊
text-align:center文字居中對齊
這些是一些簡單的文字效果，可以應用到css的頁面中。
背景
background-color:black背景顏色
background-image:url(image/bg.gif)背景圖片
background-attachment:fixed固定背景
background-repeat:repeat重複排列-網頁預設
background-repeat:no-repeat不重複排列
background-repeat:repeat-x在x軸重複排列
background-repeat:repeat-y在y軸重複排列
background-position:90%90%背景圖片x與y軸的位置
鏈接
A所有超連接
A:link超連接文字格式
A:visited瀏覽過的連接文字格式
A:active按下連接的格式
A:hover滑鼠移至連接
邊框
border-top:1pxsolidblack上框
border-bottom:1pxsolid#6699cc下框
border-left:1pxsolid#6699cc左框
border-right:1pxsolid#6699cc右框
border:1pxsolid#6699cc四邊框
虛線
實線
設置div的高度與文字的行高一樣就可以了，即line-height和height的數值是一樣的就可以了，最後給div一個over-flow:hidden，讓超出的部分隱藏。
基本信息
- 中文名
- DIV標籤
- 外文名
- "DIV block"
- 用來
- 為HTML文檔內大塊
- 包含
- 定義文檔中的分區或節
目錄