今天開始，認真學習前端技術，哈哈哈~~~加油~~~
推薦這本《CSS網站布局實錄》（第2版）給初級入門選手，雖然這本書年代有點久遠，不過很經典。
注明一下：這裡講述的CSS均為CSS 2.0版本。
第一章 Web標准與CSS布局概述
1.1 Web標准的歷史及發展
1.1.1 Web標准
Web標准是由W3C(World Wide Web Consortium)和其他標准化組織制定的一套規范集合，包含一系列標准，包含了HTML、XHtml、JavaScript以及CSS等。
Web標准的目的在於創建一個統一的用於Web表現層的技術標准，以便通過不同浏覽器或終端設備向最終用戶展示信息內容。
1.1.2 Web表現層技術
Web本身是由一套非常復雜的技術架構組成，但其最終目的是面向浏覽器或應用程序的用戶，並為後者提供一個可視化的、便於操作的信息交互平台。而表現層技術指的就是將信息展示給用戶並提供給用戶交互行為的技術。簡單理解為表現就是樣式，技術層面上是一堆程序代碼，而表現層帶帶來的是視覺上所看到的東西。
目前，由W3C制定的Web標准正是這樣一個表現層技術的集合，同時也是目前唯一的跨平台跨客戶端的技術。
1.2 Web標准的構成
Web標准由三大部分組成的標准集：結構(Structure)、表現(Presentation)以及行為(Behavior)。
1.2.1 結構(Structure)
結構用來對網頁中用到的信息進行整理與分類。用於結構化設計的Web標准技術主要有這幾種：HTML、XML、XHtml。
1. Html(Hyper Text Mark-up Language)超文本標記語言
這是Web最基本的描述語言。HTML文本是由HTML命令標簽組成的描述性文本，HTML標簽可以說明文字、圖形、動畫、聲音、表格、鏈接等。Html的結構包括頭部(Head)、主體(Body)兩大部分。頭部描述浏覽器所需的信息，主體包含所要展現的具體內容。
2. XML(The Extensible Markup Language)可擴展標記語言
XML最初設計的目的是為了彌補Html的不足，以其強大的擴張性滿足網絡信息發布的需要，後來逐漸用於網絡數據的轉換及描述。
3. XHtml(The Extensible HypterText Markup Language)可擴展超文本標記語言
XHTML是更嚴謹更純淨的HTML版本。簡單來說，建立XHTML的目的就是實現Html向XML的過渡。
1.2.2 表現(Presentation)
表現技術用於對已經被結構化的信息進行顯示上的控制，包含版式、顏色、大小等樣式控制。目前的Web展示中，用於表現的Web標准技術主要就是CSS技術。
CSS(Cascading Style Sheets)層疊樣式表
W3C創建CSS標准的目的是希望以CSS來描述整個頁面的布局設計，與HTML所負責的結構分開。使用CSS布局與XHtml所描述的信息結構相結合，能夠幫助設計師分離出表現與內容，使站點的構建及維護更加容易。
1.2.3 行為(Behavior)
行為是指對整個文檔內部的一個模型進行定義及交互行為的編寫，用於編寫用戶可以進行交互式操作的文檔。表現行為的Web標准技術主要有：DOM和ECMAScript。
1. DOM(Document Object Model)文檔對象模型
根據W3C DOM規范，DOM是一種讓浏覽器與Web內容結構之間溝通接口，使得可以訪問頁面上的標准組件。給予Web設計師和開發者一個標准的方法，讓他們來訪問站點中的數據、腳本和表現層對象。
2. ECMAScript腳本語言（JavaScript的擴展腳本語言）
它是由CMA(Computer Manufacturers Association)制定的一種標准腳本語言(JavaScript)，用於實現具體界面上對象的交互操作。
1.3 CSS布局與table布局的區別
從目前的Web標准來看，最理想的技術結構式使用HTML或XHTML來設計網頁，推薦使用XHtml以更嚴謹的語言編寫結構，並使用CSS來完成網頁的布局表現。
1.3.1 CSS的優勢
CSS是控制網頁布局樣式的基礎，並真正能夠做到網頁表現與內容分離的一種樣式設計語言。相對於傳統Html對樣式的控制而言，CSS能夠對網頁中的對象的位置進行像素級的精確控制，支持幾乎所有的字體、字號樣式，以及擁有對網頁對象盒模型樣式的控制能力，並能夠進行初步頁面交互設計。歸納起來，CSS有以下幾個主要優勢：
浏覽器支持完善：CSS樣式設計出來的網頁，在眾多平台及浏覽器下對樣式的表現最為接近。
表現與結構分離；在CSS設計代碼中，通過CSS的內部導入(Import)特性，可以使設計代碼根據設計需求進行二次分離。
樣式設計控制功能強大：對網頁對象的位置排版，能夠進行像素級的精確控制等。
繼承性能優越（層疊處理）：CSS的代碼在浏覽器的解析順序上，具有類似OOP面向對象的基本特性，浏覽器能根據CSS的級別，按照對同一元素定義的先後進行應用多個樣式。
1.3.2 傳統的table布局與CSS布局
實際上，傳統table布局方式只是利用了Html的table元素所具有的零邊框特性。由於table元素可以在顯示時，使得單元格的邊框和間距被設置為0，即不顯示邊框，所以可以將網頁中的各個元素按照版式劃分後，分別放入表格的各個單元格中，從而實現了復雜的排版組合效果。
table表格布局代碼最常見的是在Html標簽之間嵌入一些設計代碼，比如width="100%", border="0"等，而這種混合式編寫的大量樣式設計代碼混雜在表格單元格中，使得其可讀性大大降低，維護起來成本也很高。
table布局的核心在於設計一個能滿足版式要求的表格結構，將內容裝入每個單元格中，間距及空格則通過許多透明gif進行占位來實現，最終的結構式一個復雜的表格，而這樣復雜的表格設計使得網頁文件量龐大，不利於設計與修改，最終導致浏覽器下載及解析速度過慢。
而使用CSS布局則可以從根本上改變這種狀況。CSS布局的思維方法不再放入table元素的設計中，取而代之的是Html中的另一個元素div。div可以理解為圖層或者一個塊，div是一種比表格更加簡單的元素。div的功能僅僅用於將一段信息給標記出來，用於後期的樣式定義。
在使用div時，無須像表格那樣通過其內部的單元格來組織版式。通過CSS強大的樣式定義功能，可以比表格更簡單、更自由地控制頁面的版式及樣式。下面列出一部分div樣式設計代碼：
XHtml部分：
復制代碼代碼如下:
/* 表示頁面中定義了一個div，並使用content這個class名稱 */
<div class="content">....</div>
CSS部分：
復制代碼代碼如下:
[CSS]</p>< p>.content {
float: right; /* 表示div浮動在當前位置的右側 */
margin: 10px 20px 10px 10px; /* 設置外邊距屬性 */
text-align: center; /* div裡的文字居中顯示 */
line-height: 160%; /* div中的文字行高為原高的160% */
width: 50%; /* 表示這個div的寬度為所處的上一層位置的50% */
background-color: blue; /* 表示div的背景色為藍色 */
}
.content{}區域表示在CSS中定義了一個名為content的樣式名稱，它用於對頁面中所有class為content的對象進行樣式控制。
1.4 向Web標准過渡
Web標准的目的是實現網頁結構、表現、行為的分離，達到最佳架構，提供網站可用性與用戶體驗。用下面幾個標准及方法進行網站構建是最為理想的選擇。
1.4.1 從HTML轉向XHtml
為什麼要使用XHtml
事實上，XHTML就是HTML的下一個版本，用於替代HTML並幫助轉向XML的一套過渡型標記語言。XHtml的設計目的並不是為了最終表現，它主要用於對網頁內容進行結構設計，其嚴謹語法結構有利於浏覽器進行解析出來，它是一門面向文檔結構的設計語言。
目前，XHtml的使用標准主要包含Transitional、Strict和Frameset三種應用方式。
Transitional方式：一種松散過渡型的XHTML應用，它允許用戶使用部分HTML標簽來編寫XHtml文檔。推薦使用這種方法。
Strict方式：一種嚴格型的應用方式，XHtml中不能使用任何樣式表現的標簽及屬性。
Frameset方式：針對框架網頁的應用方式。
1.4.2 發揮CSS的作用
1. 合理的CSS文件結構
雖然CSS做到了樣式設計與內容的分離，但CSS文件本身也應該擁有良好的層次結構及規范，目的是進一步改善樣式設計的可維護性。
2. 繼承與重用的優勢
使用CSS的優勢就在於其良好的重用特性，一段CSS設計代碼可以供多個區域同時使用。除了重用功能外，CSS還可以實現類似於面向對象程序設計中的繼承機制，通過繼承機制能夠進一步地完善網站的樣式結構。
3. 設計跨平台的代碼
CSS也有美中不足，由於不同品牌浏覽器及不同版本之間的渲染方式不同，各自對CSS的解析也存在著一定差異。針對這些原因，CSS設計也應當具有一定的跨平台兼容特性，編碼時應盡量減少生僻屬性的使用，如果想兼容舊版本的浏覽器，也應當注意留有一定的CSS hack代碼。
CSS hack可以簡單地翻譯為CSS黑客程序。這種類似於期盼浏覽器的編碼收到，可以有效的修補浏覽器的解析問題。
4. 具有良好可用性的CSS樣式設計
可用性的目標是使得交互產品（軟件、網站）對用戶的需求提供最大限度的滿足。具有良好可用性的CSS樣式設計的目的就是希望通過良好的設計，創造出更好的交互式網站，以便用戶使用。
5. 使用基於DOM的腳本語言來編寫交互
DOM的產生同樣是為了實現腳本語言的跨平台與跨浏覽器應用。就目前來說，大部分浏覽器都支持標准的DOM。使用符合DOM的腳本語言，基本上不再需要檢測浏覽器的不同版本而去編寫幾套不同的代碼，只要符合DOM的浏覽器，相同的代碼就能夠完成所有可支持的操作。目前的JavaScrit是符合DOM標准的腳本語言。
1.5 常見問題
1.5.1 使用Web標准後表格還有用嗎
1. 關於表格
使用Web標准後，並不是說排除表格的使用，只是使用表格作為網頁排版，布局頁面元素是不合理的，表格式用來顯示數據的。表格職能不在於進行網頁布局，布局任務應該交給CSS來處理。
2. 關於其他元素
按照使用經驗，把XHtml標准中的一些元素分為三大類。
輔助布局設計元素
指的是div、span等元素，他們的主要功能是用來布局整個頁面。
結構化元素或者信息元素
指的是table、ul、pre、code等元素，他們是一些信息顯示與控制方面的元素。
a、meta元件
使用它們可用來實現一些特殊功能。
1.5.2 可以繼續使用Html來設計網頁嗎
答案是肯定的。只所以推薦使用XHTML是因為HTML的設計形式已經不能滿足表現與內容分離的網站架構原則。如果繼續使用Html來構建網站，從最終目標上說是沒有差別的。
1.5.3 為什麼不直接使用到XML
XML是未來數據的描述格式，就目前而言，不適合直接應用XML來構建網站，因為在技術上難度較高。
1.5.4 什麼叫網站重構
網站重構可以理解為改變老式的Html表格布局方式，使用新的符合Web標准的網站結構及代碼編寫方法。更深一層的意義時，希望通過Web標准來提供一個加大網站效益的接口，這個效益可以簡單理解為兩個方面：可擴充性及可維護性。