HTML CSS + DIV實現整體佈局
阿新 • • 發佈：2019-01-31
什麼是 HTML？
HTML 是用來描述網頁的一種語言。
HTML 指的是超文字標記語言 (Hyper Text Markup Language)
HTML 不是一種程式語言，而是一種標記語言 (markup language)
標記語言是一套標記標籤 (markup tag)
HTML 使用標記標籤來描述網頁
HTML 標籤
HTML 標記標籤通常被稱為 HTML 標籤 (HTML tag)。
HTML 標籤是由尖括號包圍的關鍵詞，比如
標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
開始和結束標籤也被稱為開放標籤和閉合標籤
HTML 文件 = 網頁
HTML 文件描述網頁
HTML 文件包含 HTML 標籤和純文字
HTML 文件也被稱為網頁
Web 瀏覽器的作用是讀取 HTML 文件，並以網頁的形式顯示出它們。瀏覽器不會顯示 HTML 標籤，而是使用標籤來解釋頁面的內容：
body之間的文字是可見的頁面內容
註釋標籤 
用於在
HTML 插入註釋。
h標籤定義和用法
標籤可定義標題。
h1定義最大的標題。
h2定義最小的標題。
由於 h 元素擁有確切的語義，因此請您慎重地選擇恰當的標籤層級來構建文件的結構。因此，請不要利用標題標籤來改變同一行中的字型大小。相反，我們應當使用層疊樣式表定義來達到漂亮的顯示效果。
一、CSS定義與解釋
它的基本語句語法的結構是這樣的：
選擇符{屬性：屬性值} 例子 如： #yangshi{width: 156px;height:25px;}
在網頁製作時採用CSS技術，可以有效地對全站頁面有共同性質屬性的佈局、字型、顏色、背景和其它效果屬性實現更加精確的控制。只要對網頁HTML裡的相應的CSS程式碼做一些簡單的修改，就可以改變同一頁面或整站用到此“選擇類”的網頁的外觀和格式樣式。 css程式碼由css命名加、“{”、加css屬性、加屬性值最後以“}”結束組成css屬性選擇器。如：在VS中， VS——檢視——（CSS屬性、管理樣式、應用樣式），調出工具欄——新建名稱為“aa”的樣式，設定後自動生成程式碼。 如對某段文字發生作用，可用關鍵字class="aa"進行引用。
Css 程式碼是控制網頁顯示樣式。
日常所指CSS程式碼包括是完整CSS選擇器。見下圖：
CSS程式碼解析圖，這段CSS程式碼為class應用，命名為thinkcss對應HTML運用：即class="thinkcss",設定此類CSS浮動靠左(float:left)，css寬度(width:300px)為300px 三、CSS的作用可以達到效果及特點： （1）在幾乎所有的瀏覽器上都可以使用。
（2）以前一些非得通過圖片轉換實現的功能，現在只要用CSS就可以輕鬆實現，從而更快地下載頁面。
（3）使頁面的字型變得更漂亮，更容易編排，使頁面真正賞心悅目。
（4）你可以輕鬆地控制頁面的佈局 。
（5）你可以將許多網頁的風格格式同時更新，不用再一頁一頁地更新了。你可以將站點上所有的網頁風格都使用一個CSS檔案進行控制，只要修改這個CSS檔案中相應的行，那麼整個站點的所有頁面都會隨之發生變動。想一想，沒有使用CSS前我們是如何控制字型的顏色和大小以及所使用的字型的？我們一般使用HTML標籤來實現，程式碼非常煩瑣。很難想象，如果在一個頁面裡需要頻繁地更替字型的顏色大小，最終生成的HTML程式碼的長度一定臃腫不堪。說實話，CSS就是為了簡化這樣的工作誕生的，當然其功能決非這麼簡單。結合DIV CSS是通過對頁面結構的風格控制的思想，來控制整個頁面的風格的屬性。瀏覽器通過CSS類解釋來呈現CSS屬性來表現樣式裡設定的樣式。 四、CSS替我們解決什麼問題-CSS作用？ HTML是骨架，CSS是衣服。相同HTML骨架結構，不同CSS樣式，所得到的美化佈局效果不同。 CSS能幫我們解決什麼問題呢？CSS配合DIV或div+css作用與解決問題：
1、CSS技術幫我們控制網頁中的字型大小、頁面寬度、頁面內容靠左靠右、字型樣式、某些網頁裡區域背景圖片、背景顏色、超連結滑鼠事件樣式、圖片居中、文字居中、網頁中內容板塊間隔等樣式（花樣）。 2、網頁中一些標籤元素樣式控制，如：標題、段落、列表等等網頁元素設定控制，包括上面講的文字圖片大小、DIV CSS佈局寬度顏色等屬性。 html引用css方法如下 http://www.divcss5.com/rumen/r56.shtml
1、直接在div中使用css樣式製作div+css網頁
2、html中使用style自帶式
3、使用@import引用外部CSS檔案
4、使用link引用外部CSS檔案 推薦此方法 1、直接在html標籤元素內嵌入css樣式，如 我是div css測試內容-www.divcss5.com支援 效果如下圖
2、在html頭部head部分內style宣告插入程式碼如下： 如上圖。 3、使用@import引用外部CSS檔案方法
Wcss.css檔案內程式碼.ceshi {font-size:14px; color:#FF0000;}
效果如下圖：
可以看出使用此方法和使用自帶式引用css樣式表方法有相同處，都是需要在html的head內使用style標籤引用外部css。
4、使用link來呼叫外部的css檔案
在head放置來呼叫外部的wcss.css檔案來實現html引用css檔案
詳細如下圖
此方法就不需要style標籤，而是直接通過link一個樣式來引用外部樣式
一般推薦使用link來引用外部的css樣式方法。
使用link來引用外部的css的優勢
1、有利於SEO，使用此方法引用外部css檔案，將使得html頁面的原始碼少很多比起直接加入css樣式，因為搜尋引擎蜘蛛爬行網頁的時候是不爬行css檔案的，這樣使得html原始碼很少，使得蜘蛛爬行更快，處理更少，增大了此網頁的權重，有利於排名。
2、節約html使得瀏覽器下載網頁時候分開執行緒了，就像載入一個頁面同時有兩條線在開啟一個頁面道理，使得網頁開啟格外快。（使用者瀏覽此網頁的時候html原始碼和css檔案同時下載，使得更加快速）
3、修改網頁的樣式方便，只需修改css樣式即可修改網頁的美工樣式，如果在網站專案中此方法，因整站應用了共用的css基本樣式，這樣修改整站風格樣式根據快捷方便。 式樣表可以層疊出現 , 後邊的式樣會將前邊的式樣覆蓋 , 比如規定標題式樣為 a , 而其中幾個頁面想改變這種式樣, 就可以再加入式樣表, 只是針對這些進行修改 . 層疊次序 : 1. 瀏覽器預設 2. 外部式樣表 3. 內部式樣表(位於標籤內部 ) 4. 內聯式樣(在 html元素內部) 在網頁中，可以通過div屬性id，以id="xx"形式，對某種樣式進行引用（id也可以對網頁中的其它組成元素進行引用）；也可以class=“xxxx”形式對css式樣引用。但兩種存在一些區別。
定義CSS樣式的程式碼中：“#”後面跟的是id，“.”後面跟的是class #對應的是id，建議是當前頁面只出現一次。 .對應的class，可以多次引用。
以id方式定義css樣式，語法形式為： #1 {...}
以class方式定義css樣式，語法形式為： .1 {...} CSS中的class與id區別及用法http://www.divcss5.com/rumen/r3.shtml
CSS id與CSS classhttp://www.divcss5.com/rumen/r117.shtml
以上網頁對CSS進行了詳細但又簡單明晰的介紹，強力推薦。
DIV標籤系統介紹 DIV標籤稱為區隔標記。 定義
可定義文件中的分割槽或節（division/section）。美: [dɪ'vɪʒ(ə)n]英: [dɪ'vɪʒ(ə)n]
標籤可以把文件分割為獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。如果用 id 或 class 來標記 ，那麼該標籤的作用會變得更加有效。 DIV元素:是用來為HTML文件內大塊（block-level）的內容提供結構和背景的元素。 DIV的起始標籤和結束標籤之間的所有內容都是用來構成這個塊的，其中所包含元素的特性由DIV標籤的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。 作用：設定字、畫、表格等的擺放位置。 當你把文字、圖象，或其他的放在 DIV 中，它可稱作為“DIV block”，或“DIV element”或“CSS-layer”，或乾脆叫“layer”。而中文我們把它稱作“層次”。
DIV標籤應用於 Style Sheet（樣式表）方面會更顯威力，它最終目的是給設計者另一種組織能力，有 Class、Style、title、ID 等屬性。
是一個塊級元素。這意味著它的內容自動地開始一個新行。實際上，換行是 固有的唯一格式表現。可以通過的 class 或 id 應用額外的樣式。
不必為每一個都加上類或 id，雖然這樣做也有一定的好處。
可以對同一個元素應用 class 或 id 屬性，但是更常見的情況是隻應用其中一種。這兩者的主要差異是，class 用於元素組（類似的元素，或者可以理解為某一類元素），而 id 用於標識單獨的唯一的元素。
CSS單元的位置和層次-div標籤
在網頁上利用HTML定位文字和圖象是一件“令人心痛”的事情。我們必須使用表格標籤和隱式GIF圖象，即使
Cascading Style Sheets（CSS）是 DHTML 的基礎。CSS 用來設定你網頁上的元素是如何展示的。Cascading Style Sheets Positioning（CSS-P）是 CSS 的一個擴充套件，它可用來控制任何東西在網頁上或是說在視窗中的位置。請你記住這兩個名詞：CSS 和 CSS－P。 position 決定 DIV tag 是如何放置的。 “relative”意思是DIV的位置是相對於其他 tag 的，而“absolute”是說 DIV tag 的位置是相對於它所在的視窗。 left 相對於視窗左邊的位置 top 相對於視窗上邊的位置 width DIV tag 的寬度。所有在 DIV 裡的文字或html都在裡面。
height DIV tag 的高度。這個性質很少用除非你想 Clip 層次。 color（字型顏色）：色彩程式碼； font-size（字型大小）：數值； line-height（行高）：數值； border（邊框）：寬度、型別和顏色，型別主要支援以下幾種：none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset； font-weight（字型粗細）：normal、bold、bolder、lighter； font-family（字型型別）：Arial、Tahoma、Verdana、仿宋_GB2312、黑體、楷體_GB2312、隸書、宋體、幼圓 clip 給出 layer 的 clipping（可看的見的）部分。Clip 可使得 DIV 顯示為一個可以定義的很準確的方塊。你可以用以下的四個值來給出這個方塊的在 DIV 位置和大小。 clip:rect(top,right,bottom,left); visibility 隱蔽或展現DIV 根據它的值“visible”，“hidden”，“inherit”。 z-index DIV tag 的立體位置。值越大 DIV 的位置越高。 background-color DIV 背景的顏色。 layer-background-color Netscape 的 DIV 背景顏色。 background-image DIV 的背景圖象。 layer-background-image Netscape 的 DIV 的背景圖象 filter:chroma(COLOR=轉換成透明的顏色)（chroma過濾器）：色彩程式碼，該顏色將轉換成透明效果； word-break（斷字）：normal（預設，正常斷字）、keep-all（嚴格不斷字）、break-all（嚴格斷字）； direction（文字方向）：ltr（預設，從左向右）、rtl（從右向左）; padding-left：層中的內容距離層左邊框的距離；padding-right：層中的內容距離層左邊框的距離；padding-top：層中的內容距離層頂部邊框的距離；padding-bottom：層中的內容距離層底部邊框的距離。 絕對定位和相對定位（position） 絕對定位： 定位屬性將是網蟲們開啟幸福之門的鑰匙： H4 { position: absolute; left: 100px; top: 43px } 這項CSS規則讓瀏覽器將
的起始位置精確地定在距離瀏覽器左邊100象素，距離其頂部43象素的位置。注意這裡唯一設定了的是左邊和頂部，也就說，文字將從左到右，從上到下載入瀏覽視窗。
左邊和頂部屬性很直觀，左邊（left）設定要素距瀏覽器視窗左邊的距離，頂部（top）設定距離瀏覽器視窗頂部的距離。設定這些距離時，你可以使用所學過的各種度單位或比例值。使用比例值時，比例值的是相對於母體要素的尺寸。
你可以定位什麼呢？任何東西！段落、單詞、GIF和JPEG圖象、QUICKTIME電影等等。
相對定位：
絕對定位使你能精確地定位要素在頁面的獨立位置，而不考慮頁面其它要素的定位設定。相對定位指你所定位的要素的位置相對於在檔案中所分配的位置。例：
I { position: relative; left: 40px; top: 10px }
相對定位的關鍵在於定位了的要素的位置是相對於它通常應在的位置進行定位。相對定位單元出現在普通的靜態定位單元的行間，定位時沒有把自己和靜態定位單元完全分開。如果你停止使用相對定位，則文字的顯示位置將恢復正常。使用相對定位時要小心，否則容易將頁面弄得非常亂。
除了相對定位和絕對定位，你還可以使用static（靜止）引數值。Static 是 position 特性的預設值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位設定。也就是說，除了邊距特性，或通過使用 float 特性來浮動單元可影響單元的定位外，其它均不可以。
定位單元的控制（width、height、visiblility）
除了控制定位單元的左上角位置，你還可以控制單元的寬度和高度，及單元在頁面的可視性。
寬度：定位了的要素在頁面上顯示時仍然會從左到右一直顯示。利用寬度屬性就可以設定字元向右流動的限制，即設定要素的寬度。
DIV { position: absolute; left: 200px; top: 40px; width: 150px }
瀏覽器接到這項規則時，它將文字按照規則規定的效果顯示，還將段落的最大水平尺寸限制在150象素。
寬度屬性只適用於絕對定位的要素。你可以使用我們學過的任何一種長度單位，或使用比例值設定寬度，比例值指相對於母體要素的比例。IE 4中，這項屬性還可用於圖象。你可以通過寬度設定人為地拉寬或壓縮圖象。
高度：理論上講，高度應該和寬度的設定類似，只不過是在垂直方向上：
DIV { position: absolute; left: 200px; top: 40px; height: 150px }
這裡我用了“理論上講”，因為有些瀏覽器不支援高度屬性。
可視性：利用CSS，你可以隱藏要素，使其在頁面上看不見。這條屬性對於定位了的和未定位的要素都適用。
H4 { visibility: hidden }
選項：
visible 使要素可以被看見
hidden 使要素被隱藏
inherit 指它將繼承母體要素的可視性設定。
值 inherit 為預設值。這使單元繼承父單元的可見性。所以，如果某一段是隱藏的，則它包含的任何行間單元也都被隱藏。這一繼承性可被明確指定的可見性取代。例如，段內的 EM 單元被指定為可見，這時如果該段被隱藏，則段內的所有其它內容都將消失，而唯有 EM 單元中的文字是可見的。
當一個要素被隱藏後，它仍然要佔據瀏覽器視窗中的原有空間。所以，如果你將文字包圍在一幅被隱藏的圖象周圍，那麼，其顯示效果將是文字包圍著一塊空白區域。此新聞
這條屬性在編寫語言和使用動態HTML時很有用，比如你可以使某段落或圖象只在滑鼠滑過時才顯示。
單元層次 （z-index）
特性 z-index 用於堆疊螢幕上的單元。預設情況下，單元堆疊的順序為它們出現在HTML標記的順序——也就是說，後出現單元堆疊在早出現單元的上面。Z-index 特性實際上定義同屬（sibling）單元的堆疊順序以及單元相對父單元的堆疊。按照規範草案，具有正 z-index 值的單元群都堆疊在父單元之上，它們自己的堆疊順序則按其取值的大小來決定（值大的單元在上層）。同樣，具有負 z-index 值的單元群都堆疊在父單元之下，它們自己的堆疊順序也按取值的大小來定（值大的單元在上層，例如值為 -1 的單元在值為 -2 的單元的上面）。
該引數值使用純整數。z-index用於絕對定位或相對定位了的要素。你也可以給圖象設定z-index。（對於Communicator，最好將標籤包在或
標籤內，然後將z-index應用到或
。）
剪輯絕對定位單元 （clip）
絕對定位單元可以被剪輯——也即剪輯顯示給使用者的區域，只顯示單元的一部分而把其餘部分作透明處理。對於傳統的基於文字和影象的網路頁面，這並不是一個很有用的特徵。但若要求多媒體頁面，這是很有用的。如 Netscape Communivator 4 和 Internet Explorer 4 都支援多媒體頁面，它們通過文件的指令碼介面動態地調整單元周圍的剪輯區，從而實線文字“劃入”和影象漸顯等顯示特徵。
在CSS中，剪輯通過 clip 特性來控制，這一特性只能用於絕對定位單元，其預設值為 auto，按單元的外邊緣來剪輯單元（實際上等於沒有剪輯）。另外，可通過如下表達式設定剪輯框：
clip : rect(top,right.bottom,left) ;
其中 top、right、bottom 和 left 分別是矩形剪輯框的上邊、右邊、下邊和左邊相對於被剪輯單元左上角的位置。Top、right、bottom 和 left 的值可以為任意絕對或相對長度值（但不能為百分比值），或者是關鍵字 auto。取值為 auto 意味著剪輯區域的各邊放好以後，被剪輯單元中的任何內容都不會超出這個區域。
控制單元溢位（overflow）
固定絕對或相對定位單元的 width 和 height，很可能會因為指定的區域不能滿足單元實際內容的需要，而造成單元內容溢位。這時可使用 overflow 來指定瀏覽器如何處理溢位：值 none（預設值）允許瀏覽器顯示溢位的內容，因此單元可溢位指定的區域。而值 clip 要求瀏覽器在單元底部和右邊剪輯單元內容，這樣，超出指定區域的單元內容將不顯示。值 scroll 也同樣要求瀏覽器在單元底部和右邊剪輯單元內容（同 clip），不過，瀏覽器應該（如果可能的話）為單元提供滾動條以使使用者能通過滾動來瀏覽被剪輯的內容。
HTML 是用來描述網頁的一種語言。
HTML 指的是超文字標記語言 (Hyper Text Markup Language)
HTML 不是一種程式語言，而是一種標記語言 (markup language)
標記語言是一套標記標籤 (markup tag)
HTML 使用標記標籤來描述網頁
HTML 標籤
HTML 標記標籤通常被稱為 HTML 標籤 (HTML tag)。
HTML 標籤是由尖括號包圍的關鍵詞，比如
標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
開始和結束標籤也被稱為開放標籤和閉合標籤
HTML 文件 = 網頁
HTML 文件描述網頁
HTML 文件包含 HTML 標籤和純文字
HTML 文件也被稱為網頁
Web 瀏覽器的作用是讀取 HTML 文件，並以網頁的形式顯示出它們。瀏覽器不會顯示 HTML 標籤，而是使用標籤來解釋頁面的內容：
body之間的文字是可見的頁面內容
註釋標籤
h1定義最大的標題。
h2定義最小的標題。
由於 h 元素擁有確切的語義，因此請您慎重地選擇恰當的標籤層級來構建文件的結構。因此，請不要利用標題標籤來改變同一行中的字型大小。相反，我們應當使用層疊樣式表定義來達到漂亮的顯示效果。
(入門，基礎知識查閱)
語法規則及習慣： html中，關鍵字為小寫單詞； c#中，程式體中變數或是首字母大寫？ CSS介紹 CSS 概念和作用:http://www.cnblogs.com/moveofgod/archive/2012/09/18/2691101.html(理論深入淺出) 認識CSS，瞭解CSS作用一、CSS定義與解釋
它的基本語句語法的結構是這樣的：
選擇符{屬性：屬性值} 例子 如： #yangshi{width: 156px;height:25px;}
在網頁製作時採用CSS技術，可以有效地對全站頁面有共同性質屬性的佈局、字型、顏色、背景和其它效果屬性實現更加精確的控制。只要對網頁HTML裡的相應的CSS程式碼做一些簡單的修改，就可以改變同一頁面或整站用到此“選擇類”的網頁的外觀和格式樣式。 css程式碼由css命名加、“{”、加css屬性、加屬性值最後以“}”結束組成css屬性選擇器。如：在VS中， VS——檢視——（CSS屬性、管理樣式、應用樣式），調出工具欄——新建名稱為“aa”的樣式，設定後自動生成程式碼。 如對某段文字發生作用，可用關鍵字class="aa"進行引用。
Css 程式碼是控制網頁顯示樣式。
日常所指CSS程式碼包括是完整CSS選擇器。見下圖：
CSS程式碼解析圖，這段CSS程式碼為class應用，命名為thinkcss對應HTML運用：即class="thinkcss",設定此類CSS浮動靠左(float:left)，css寬度(width:300px)為300px 三、CSS的作用可以達到效果及特點： （1）在幾乎所有的瀏覽器上都可以使用。
（2）以前一些非得通過圖片轉換實現的功能，現在只要用CSS就可以輕鬆實現，從而更快地下載頁面。
（3）使頁面的字型變得更漂亮，更容易編排，使頁面真正賞心悅目。
（4）你可以輕鬆地控制頁面的佈局 。
（5）你可以將許多網頁的風格格式同時更新，不用再一頁一頁地更新了。你可以將站點上所有的網頁風格都使用一個CSS檔案進行控制，只要修改這個CSS檔案中相應的行，那麼整個站點的所有頁面都會隨之發生變動。想一想，沒有使用CSS前我們是如何控制字型的顏色和大小以及所使用的字型的？我們一般使用HTML標籤來實現，程式碼非常煩瑣。很難想象，如果在一個頁面裡需要頻繁地更替字型的顏色大小，最終生成的HTML程式碼的長度一定臃腫不堪。說實話，CSS就是為了簡化這樣的工作誕生的，當然其功能決非這麼簡單。結合DIV CSS是通過對頁面結構的風格控制的思想，來控制整個頁面的風格的屬性。瀏覽器通過CSS類解釋來呈現CSS屬性來表現樣式裡設定的樣式。 四、CSS替我們解決什麼問題-CSS作用？ HTML是骨架，CSS是衣服。相同HTML骨架結構，不同CSS樣式，所得到的美化佈局效果不同。 CSS能幫我們解決什麼問題呢？CSS配合DIV或div+css作用與解決問題：
1、CSS技術幫我們控制網頁中的字型大小、頁面寬度、頁面內容靠左靠右、字型樣式、某些網頁裡區域背景圖片、背景顏色、超連結滑鼠事件樣式、圖片居中、文字居中、網頁中內容板塊間隔等樣式（花樣）。 2、網頁中一些標籤元素樣式控制，如：標題、段落、列表等等網頁元素設定控制，包括上面講的文字圖片大小、DIV CSS佈局寬度顏色等屬性。 html引用css方法如下 http://www.divcss5.com/rumen/r56.shtml
1、直接在div中使用css樣式製作div+css網頁
2、html中使用style自帶式
3、使用@import引用外部CSS檔案
4、使用link引用外部CSS檔案 推薦此方法 1、直接在html標籤元素內嵌入css樣式，如 我是div css測試內容-www.divcss5.com支援 效果如下圖
2、在html頭部head部分內style宣告插入程式碼如下： 如上圖。 3、使用@import引用外部CSS檔案方法
Wcss.css檔案內程式碼.ceshi {font-size:14px; color:#FF0000;}
效果如下圖：
可以看出使用此方法和使用自帶式引用css樣式表方法有相同處，都是需要在html的head內使用style標籤引用外部css。
4、使用link來呼叫外部的css檔案
在head放置來呼叫外部的wcss.css檔案來實現html引用css檔案
詳細如下圖
此方法就不需要style標籤，而是直接通過link一個樣式來引用外部樣式
一般推薦使用link來引用外部的css樣式方法。
使用link來引用外部的css的優勢
1、有利於SEO，使用此方法引用外部css檔案，將使得html頁面的原始碼少很多比起直接加入css樣式，因為搜尋引擎蜘蛛爬行網頁的時候是不爬行css檔案的，這樣使得html原始碼很少，使得蜘蛛爬行更快，處理更少，增大了此網頁的權重，有利於排名。
2、節約html使得瀏覽器下載網頁時候分開執行緒了，就像載入一個頁面同時有兩條線在開啟一個頁面道理，使得網頁開啟格外快。（使用者瀏覽此網頁的時候html原始碼和css檔案同時下載，使得更加快速）
3、修改網頁的樣式方便，只需修改css樣式即可修改網頁的美工樣式，如果在網站專案中此方法，因整站應用了共用的css基本樣式，這樣修改整站風格樣式根據快捷方便。 式樣表可以層疊出現 , 後邊的式樣會將前邊的式樣覆蓋 , 比如規定標題式樣為 a , 而其中幾個頁面想改變這種式樣, 就可以再加入式樣表, 只是針對這些進行修改 . 層疊次序 : 1. 瀏覽器預設 2. 外部式樣表 3. 內部式樣表(位於標籤內部 ) 4. 內聯式樣(在 html元素內部) 在網頁中，可以通過div屬性id，以id="xx"形式，對某種樣式進行引用（id也可以對網頁中的其它組成元素進行引用）；也可以class=“xxxx”形式對css式樣引用。但兩種存在一些區別。
定義CSS樣式的程式碼中：“#”後面跟的是id，“.”後面跟的是class #對應的是id，建議是當前頁面只出現一次。 .對應的class，可以多次引用。
以id方式定義css樣式，語法形式為： #1 {...}
以class方式定義css樣式，語法形式為： .1 {...} CSS中的class與id區別及用法http://www.divcss5.com/rumen/r3.shtml
CSS id與CSS classhttp://www.divcss5.com/rumen/r117.shtml
以上網頁對CSS進行了詳細但又簡單明晰的介紹，強力推薦。
DIV標籤系統介紹 DIV標籤稱為區隔標記。 定義
可定義文件中的分割槽或節（division/section）。美: [dɪ'vɪʒ(ə)n]英: [dɪ'vɪʒ(ə)n]
標籤可以把文件分割為獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。如果用 id 或 class 來標記 ，那麼該標籤的作用會變得更加有效。 DIV元素:是用來為HTML文件內大塊（block-level）的內容提供結構和背景的元素。 DIV的起始標籤和結束標籤之間的所有內容都是用來構成這個塊的，其中所包含元素的特性由DIV標籤的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。 作用：設定字、畫、表格等的擺放位置。 當你把文字、圖象，或其他的放在 DIV 中，它可稱作為“DIV block”，或“DIV element”或“CSS-layer”，或乾脆叫“layer”。而中文我們把它稱作“層次”。
DIV標籤應用於 Style Sheet（樣式表）方面會更顯威力，它最終目的是給設計者另一種組織能力，有 Class、Style、title、ID 等屬性。
是一個塊級元素。這意味著它的內容自動地開始一個新行。實際上，換行是 固有的唯一格式表現。可以通過的 class 或 id 應用額外的樣式。
不必為每一個都加上類或 id，雖然這樣做也有一定的好處。
可以對同一個元素應用 class 或 id 屬性，但是更常見的情況是隻應用其中一種。這兩者的主要差異是，class 用於元素組（類似的元素，或者可以理解為某一類元素），而 id 用於標識單獨的唯一的元素。
CSS單元的位置和層次-div標籤
在網頁上利用HTML定位文字和圖象是一件“令人心痛”的事情。我們必須使用表格標籤和隱式GIF圖象，即使
Cascading Style Sheets（CSS）是 DHTML 的基礎。CSS 用來設定你網頁上的元素是如何展示的。Cascading Style Sheets Positioning（CSS-P）是 CSS 的一個擴充套件，它可用來控制任何東西在網頁上或是說在視窗中的位置。請你記住這兩個名詞：CSS 和 CSS－P。 position 決定 DIV tag 是如何放置的。 “relative”意思是DIV的位置是相對於其他 tag 的，而“absolute”是說 DIV tag 的位置是相對於它所在的視窗。 left 相對於視窗左邊的位置 top 相對於視窗上邊的位置 width DIV tag 的寬度。所有在 DIV 裡的文字或html都在裡面。
height DIV tag 的高度。這個性質很少用除非你想 Clip 層次。 color（字型顏色）：色彩程式碼； font-size（字型大小）：數值； line-height（行高）：數值； border（邊框）：寬度、型別和顏色，型別主要支援以下幾種：none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset； font-weight（字型粗細）：normal、bold、bolder、lighter； font-family（字型型別）：Arial、Tahoma、Verdana、仿宋_GB2312、黑體、楷體_GB2312、隸書、宋體、幼圓 clip 給出 layer 的 clipping（可看的見的）部分。Clip 可使得 DIV 顯示為一個可以定義的很準確的方塊。你可以用以下的四個值來給出這個方塊的在 DIV 位置和大小。 clip:rect(top,right,bottom,left); visibility 隱蔽或展現DIV 根據它的值“visible”，“hidden”，“inherit”。 z-index DIV tag 的立體位置。值越大 DIV 的位置越高。 background-color DIV 背景的顏色。 layer-background-color Netscape 的 DIV 背景顏色。 background-image DIV 的背景圖象。 layer-background-image Netscape 的 DIV 的背景圖象 filter:chroma(COLOR=轉換成透明的顏色)（chroma過濾器）：色彩程式碼，該顏色將轉換成透明效果； word-break（斷字）：normal（預設，正常斷字）、keep-all（嚴格不斷字）、break-all（嚴格斷字）； direction（文字方向）：ltr（預設，從左向右）、rtl（從右向左）; padding-left：層中的內容距離層左邊框的距離；padding-right：層中的內容距離層左邊框的距離；padding-top：層中的內容距離層頂部邊框的距離；padding-bottom：層中的內容距離層底部邊框的距離。 絕對定位和相對定位（position） 絕對定位： 定位屬性將是網蟲們開啟幸福之門的鑰匙： H4 { position: absolute; left: 100px; top: 43px } 這項CSS規則讓瀏覽器將
的起始位置精確地定在距離瀏覽器左邊100象素，距離其頂部43象素的位置。注意這裡唯一設定了的是左邊和頂部，也就說，文字將從左到右，從上到下載入瀏覽視窗。
左邊和頂部屬性很直觀，左邊（left）設定要素距瀏覽器視窗左邊的距離，頂部（top）設定距離瀏覽器視窗頂部的距離。設定這些距離時，你可以使用所學過的各種度單位或比例值。使用比例值時，比例值的是相對於母體要素的尺寸。
你可以定位什麼呢？任何東西！段落、單詞、GIF和JPEG圖象、QUICKTIME電影等等。
相對定位：
絕對定位使你能精確地定位要素在頁面的獨立位置，而不考慮頁面其它要素的定位設定。相對定位指你所定位的要素的位置相對於在檔案中所分配的位置。例：
I { position: relative; left: 40px; top: 10px }
相對定位的關鍵在於定位了的要素的位置是相對於它通常應在的位置進行定位。相對定位單元出現在普通的靜態定位單元的行間，定位時沒有把自己和靜態定位單元完全分開。如果你停止使用相對定位，則文字的顯示位置將恢復正常。使用相對定位時要小心，否則容易將頁面弄得非常亂。
除了相對定位和絕對定位，你還可以使用static（靜止）引數值。Static 是 position 特性的預設值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位設定。也就是說，除了邊距特性，或通過使用 float 特性來浮動單元可影響單元的定位外，其它均不可以。
定位單元的控制（width、height、visiblility）
除了控制定位單元的左上角位置，你還可以控制單元的寬度和高度，及單元在頁面的可視性。
寬度：定位了的要素在頁面上顯示時仍然會從左到右一直顯示。利用寬度屬性就可以設定字元向右流動的限制，即設定要素的寬度。
DIV { position: absolute; left: 200px; top: 40px; width: 150px }
瀏覽器接到這項規則時，它將文字按照規則規定的效果顯示，還將段落的最大水平尺寸限制在150象素。
寬度屬性只適用於絕對定位的要素。你可以使用我們學過的任何一種長度單位，或使用比例值設定寬度，比例值指相對於母體要素的比例。IE 4中，這項屬性還可用於圖象。你可以通過寬度設定人為地拉寬或壓縮圖象。
高度：理論上講，高度應該和寬度的設定類似，只不過是在垂直方向上：
DIV { position: absolute; left: 200px; top: 40px; height: 150px }
這裡我用了“理論上講”，因為有些瀏覽器不支援高度屬性。
可視性：利用CSS，你可以隱藏要素，使其在頁面上看不見。這條屬性對於定位了的和未定位的要素都適用。
H4 { visibility: hidden }
選項：
visible 使要素可以被看見
hidden 使要素被隱藏
inherit 指它將繼承母體要素的可視性設定。
值 inherit 為預設值。這使單元繼承父單元的可見性。所以，如果某一段是隱藏的，則它包含的任何行間單元也都被隱藏。這一繼承性可被明確指定的可見性取代。例如，段內的 EM 單元被指定為可見，這時如果該段被隱藏，則段內的所有其它內容都將消失，而唯有 EM 單元中的文字是可見的。
當一個要素被隱藏後，它仍然要佔據瀏覽器視窗中的原有空間。所以，如果你將文字包圍在一幅被隱藏的圖象周圍，那麼，其顯示效果將是文字包圍著一塊空白區域。此新聞
這條屬性在編寫語言和使用動態HTML時很有用，比如你可以使某段落或圖象只在滑鼠滑過時才顯示。
單元層次 （z-index）
特性 z-index 用於堆疊螢幕上的單元。預設情況下，單元堆疊的順序為它們出現在HTML標記的順序——也就是說，後出現單元堆疊在早出現單元的上面。Z-index 特性實際上定義同屬（sibling）單元的堆疊順序以及單元相對父單元的堆疊。按照規範草案，具有正 z-index 值的單元群都堆疊在父單元之上，它們自己的堆疊順序則按其取值的大小來決定（值大的單元在上層）。同樣，具有負 z-index 值的單元群都堆疊在父單元之下，它們自己的堆疊順序也按取值的大小來定（值大的單元在上層，例如值為 -1 的單元在值為 -2 的單元的上面）。
該引數值使用純整數。z-index用於絕對定位或相對定位了的要素。你也可以給圖象設定z-index。（對於Communicator，最好將標籤包在或
標籤內，然後將z-index應用到或
。）
剪輯絕對定位單元 （clip）
絕對定位單元可以被剪輯——也即剪輯顯示給使用者的區域，只顯示單元的一部分而把其餘部分作透明處理。對於傳統的基於文字和影象的網路頁面，這並不是一個很有用的特徵。但若要求多媒體頁面，這是很有用的。如 Netscape Communivator 4 和 Internet Explorer 4 都支援多媒體頁面，它們通過文件的指令碼介面動態地調整單元周圍的剪輯區，從而實線文字“劃入”和影象漸顯等顯示特徵。
在CSS中，剪輯通過 clip 特性來控制，這一特性只能用於絕對定位單元，其預設值為 auto，按單元的外邊緣來剪輯單元（實際上等於沒有剪輯）。另外，可通過如下表達式設定剪輯框：
clip : rect(top,right.bottom,left) ;
其中 top、right、bottom 和 left 分別是矩形剪輯框的上邊、右邊、下邊和左邊相對於被剪輯單元左上角的位置。Top、right、bottom 和 left 的值可以為任意絕對或相對長度值（但不能為百分比值），或者是關鍵字 auto。取值為 auto 意味著剪輯區域的各邊放好以後，被剪輯單元中的任何內容都不會超出這個區域。
控制單元溢位（overflow）
固定絕對或相對定位單元的 width 和 height，很可能會因為指定的區域不能滿足單元實際內容的需要，而造成單元內容溢位。這時可使用 overflow 來指定瀏覽器如何處理溢位：值 none（預設值）允許瀏覽器顯示溢位的內容，因此單元可溢位指定的區域。而值 clip 要求瀏覽器在單元底部和右邊剪輯單元內容，這樣，超出指定區域的單元內容將不顯示。值 scroll 也同樣要求瀏覽器在單元底部和右邊剪輯單元內容（同 clip），不過，瀏覽器應該（如果可能的話）為單元提供滾動條以使使用者能通過滾動來瀏覽被剪輯的內容。