HTML與CSS
樣式錶的歷史科普
自從1990年代初HTML被髮明，
作爲HTML代碼輔助的樣式表，
就以各種形式出現；
最初，不同的瀏覽器結合了它們各自的樣式語言，
讀者可以使用這些樣式語言來調節網頁的顯示方式；
一開始樣式表是給讀者用的，
最初的HTML版本只含有很少的顯示屬性，
讀者來決定網頁應該怎樣被顯示。
但隨着HTML的成長、爲了滿足設計師的要求，
HTML獲得了很多特效顯示功能，
隨着這些功能的增加，
外來定義樣式的語言越來越沒有意義了。
1994年哈坤·利提出了CSS的最初的思路和建議，
即【Cascading Style Sheets】；
1995年伯特·波斯（Bert Bos）參與其中、
與哈坤合作設計CSS。
當時已經有過一些樣式表語言的思想，
但CSS是第一個含有“層疊”概念的；
在CSS中，
一個文件的樣式可以從其他的樣式表中繼承下來，
讀者在有些地方可以使用他自己更喜歡的樣式，
在其他地方則繼承或“層疊”作者的樣式,
這種層疊的方式使作者和讀者都可以靈活地加入自己的設計、
同時也可以保留或混合各自的偏好。
當時W3C剛剛建立、對CSS的發展很感興趣，
甚至爲此特地組織了一次討論會，
哈坤、波斯和其他一些人（比如微軟的托馬斯·雷爾登）
是這個項目的主要技術負責人。
1996年底12月CSS第一版本被出版。
1997年初，
W3C內組織了由克里斯·裏雷專門負責的CSS工作組，
開始討論第一版中沒有涉及到的問題，
其結果是1998年5月出版的第二版。
採用CSS+DIV進行網頁重構，
相對與傳統的TABLE網頁佈局而具有以下3個顯著優勢：
1.
表現和內容相分離，
將設計部分剝離出來放在一個獨立樣式文件中，
HTML文件中只存放文本信息，
頁面內容更易於被檢索（也即易於被搜索引擎抓取）；
2.
提高頁面瀏覽速度，
對於同一個頁面視覺效果，
採用CSS+DIV重構的頁面，
容量要比TABLE編碼的頁面文件容量小得多，
從而減輕了瀏覽器的編譯負荷；
3.
易於維護和改版，
你只要簡單的修改幾個CSS內的配置，
就可以重新設計整個網站的頁面。
附：一些通俗的概念解釋
【1】網址
現代網址通常指可供遠程訪問的網站地址，
但是最初的“網址”僅僅是指某臺交換機或服務器在網絡中的編號或名稱，
這個“網絡”甚至只是由兩臺各自具備獨立操作功能的電腦的互聯，
而現代則泛指一切具備遠程交互能力的計算或存儲網絡；
URL是指“統一資源定位符”，通常指向服務器的地址；
HTTP:則是支持http協議的網址；
FTP:是支持文檔傳輸協議的網址、GOPHER:針對gopher檢索、
HTTPS:則是增加了SSL加密的HTTP；
域名，
是由一串用點分隔的字符組成的Internet上某一臺計算機或計算機組的名稱，
用於在數據傳輸時標識計算機的電子方位
（有時也指地理位置，地理上的域名，指代有行政自主權的一個地方區域）。
也是一個IP地址上的“面具”。
【2】網頁
網頁是通過瀏覽器來閱讀的一個可視化的包含內容和數據等信息的頁面；
網頁通過瀏覽器或其他可視化工具將服務器數據轉化成可視化的控件。
【3】瀏覽器
將外部數據解析、在終端系統平臺上、用可視化界面來展示信息，
這樣一整套流程需要一個工具或軟件來實現，
通常以瀏覽閱讀爲主要功能的軟件稱爲“瀏覽器”；
如果是以修改源碼或編譯代碼爲主的軟件，
一般不會被稱爲“瀏覽器”。
【4】樣式表
通過獨立的樣式配置、來定義可視化效果的參數，
使瀏覽器可以更快獲取視圖和控件的配置，
簡化了服務器數據的複雜度、
減輕了瀏覽器對數據解析重構的負荷，
同時也提高了視圖和控件的配置代碼的重用性和規範化。
附：什麼是CascadingStyleSheets（層疊樣式表）？
CSS == CascadingStyleSheets
(層疊樣式表)
CSS 語言是一種標記語言，
它可以直接由瀏覽器解釋執行（屬於瀏覽器解釋型語言）。
在標準網頁設計中
CSS負責網頁內容的表現；
CSS文件也可以說是一個文本文件，
它包含了一些CSS標記，
CSS文件必須使用css爲文件名後綴；
可以通過簡單的更改CSS文件中的配置
來改變網頁的整體表現形式，
可以減少代碼量和工作量；
CSS標準是由W3C的CSS工作組制定和維護的。
附：常規的瀏覽器展示網頁的流程
1.
瀏覽器下載的順序是從上到下，
渲染的順序也是從上到下，
下載和渲染是同時進行的。
2.
在渲染到頁面的某一部分時，
其上面的所有部分都已經下載完成
（並不是說所有相關聯的元素都已經下載完）；
3.
如果遇到語義解釋性的標籤嵌入文件
（JS腳本，CSS樣式），
那麼此時瀏覽器的下載過程會啓用單獨連接進行下載；
4.
下載後對腳本和樣式進行解析，
解析過程中暫停其後的元素的下載；
5.
樣式表在下載完成後，
將調用之前下載的所有樣式表一起進行解析，
並在解析完成後
對此前所有元素（含以前已經渲染的）重新進行渲染；
6.
腳本和樣式中如有重定義，
其後定義的配置將覆蓋前定義配置。
渲染效率與下面三點有關：
1.css選擇器的查詢定位效率、
2.瀏覽器的渲染模式和算法、
3.要進行渲染內容的大小。
附：瀏覽器對CSS的匹配原理
瀏覽器CSS匹配不是從左到右進行查找，
而是從右到左進行查找；
比如
DIV#divBoxpspan.red{color:red;}，
瀏覽器的查找順序如下：
先查找html中所有class=’red’的span元素，
找到後，再查找其父輩元素中是否有p元素，
再判斷p的父元素中是否有id爲divBox的div元素，
如果都存在則根據CSS匹配。
瀏覽器從右到左進行查找的好處
是可以儘早過濾掉一些無關的樣式規則和元素。
firefox稱這種查找方式爲
keyselector（關鍵字查詢），
所謂的關鍵字就是樣式規則中最後(最右邊)的規則，
上面的key就是span.red。
附：CSS樣式表的使用方式
HTML頁面有三種使用CSS樣式表的方式：
1、
內聯樣式表：
樣式規定在單個的元素中，
寫在元素的style屬性裏；
2、
內部樣式表：
樣式定義在HTML頁面的頭元素中；
3、
外部樣式表：
將樣式定義在一個外部的CSS文件中，
然後由HTML頁面引用樣式表文件。
附：如何理解CSS樣式表的層疊性
CSS使用層疊（Cascade）的原則來考慮
繼承、層疊次序和優先級
等重要特徵，從而判斷相互衝突的規則中應依據哪一個規則。
繼承性：
許多CSS的樣式規則不但影響選擇器所定義的元素，
而且會被這些元素的後代繼承；
層疊性：
當一個Web頁面使用多個樣式表，
多個樣式表中的樣式可層疊爲一個；
在多個樣式表之間所定義的樣式沒有衝突的時候，
瀏覽器會顯示所有的樣式。
優先級：
當發生樣式定義衝突時，
瀏覽器首先會按照不同樣式規則的優先級來應用樣式；
同等優先級下，以最後定義的樣式爲準；
CSS樣式的優先級如下所示（其中數字3擁有最高的優先權）：
1、
瀏覽器缺省設置；
2、
外部樣式表（.css 文件）或者內部樣式表（位於<head>元素內部）；
3、
內聯樣式（作爲某個元素的style屬性的值）。
附：CSS選擇器中，元素選擇器和類選擇器的區別是什麼？
在 CSS 中，選擇器是一種模式，
用於選擇需要添加樣式的元素。
元素選擇器是最常見的CSS選擇器，
即，文檔的元素就是最基本的選擇器；
選擇器通常是某個HTML元素，
比如<p>、<h1>、<em>、<a>等，
甚至可以是<html>元素本身。
類選擇器用於將樣式規則與附帶class屬性的元素匹配，
其中該class屬性的值爲類選擇器中指定的值；
使用類選擇器時，首先需要定義樣式類，其語法爲：
.className { }
所有能夠附帶class屬性的元素都可以使用此樣式聲明；
只需要將class屬性的值設置爲“className”，
則可以將類選擇器的樣式與元素關聯。
在實際使用時如果需要爲某種元素定義樣式，
則往往使用元素選擇器；
如果要應用樣式而不考慮具體設計的元素，
最常用的方法就是使用類選擇器。