《CSS網站佈局實錄》學習筆記（一）

今天開始，認真學習前端技術，哈哈哈~~~加油~~~

推薦這本《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部分：

1 [html] 2 
3 /* 表示頁面中定義了一個div，並使用content這個class名稱 */
4 <div class="content">....</div>

　　CSS部分：

 1 [CSS]  2 
 3 .content {
 4  float: right; /* 表示div浮動在當前位置的右側 */
 5  margin: 10px 20px 10px 10px; /* 設置外邊距屬性 */
 6  text-align: center; /* div裏的文字居中顯示 */
 7  line-height: 160%; /* div中的文字行高爲原高的160% */
 8  width: 50%; /* 表示這個div的寬度爲所處的上一層位置的50% */
 9  background-color: blue; /* 表示div的背景色爲藍色 */
10 }

　　.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標準來提供一個加大網站效益的接口，這個效益能夠簡單理解爲兩個方面：可擴充性及可維護性。

 

未完待續.......