零基礎學習前端開發不可不知的CSS原理

從事Web前端開發的人都與CSS打交道不少，有的人也許不知道CSS是怎麼去工做的，寫出來的CSS瀏覽器是怎麼樣去解析的呢？學習前端開發必不可少必定要先了解CSS的原理的。

1.瀏覽器的發展與CSS

網頁瀏覽器主要經過 HTTP 協議鏈接網頁服務器而取得網頁， HTTP 允許網頁瀏覽器送交資料到網頁服務器而且獲取網頁。目前最經常使用的 HTTP 是 HTTP/1.1，這個協議在 RFC2616 中被完整定義。HTTP/1.1 有其一套 Internet Explorer 並不徹底支援的標準，然而許多其餘當代的網頁瀏覽器則徹底支援這些標準。網頁的位置以 URL（統一資源定位符）指示，此乃網頁的地址；以 http: 開首的即是經過 HTTP協議登錄。不少瀏覽器同時支援其餘類型的 URL 及協議，例如 ftp: 是 FTP（檔案傳送協議）、gopher: 是 Gopher 及 https: 是 HTTPS（以SSL加密的HTTP）。

早期的網頁瀏覽器只支援簡易版本的HTML。專屬軟件的瀏覽器的迅速發展致使非標準的 HTML 代碼的產生。但隨着 HTML 的成長，爲了知足設計師的要求，HTML 得到了不少顯示功能。隨着這些功能的增長外來定義樣式的語言愈來愈沒有意義了。

1994年哈坤·利提出了 CSS 的最初建議。伯特·波斯（BertBos）當時正在設計一個叫作 Argo 的瀏覽器，他們決定一塊兒合做設計CSS。

當時已經有過一些樣式表語言的建議了，但 CSS 是第一個含有「層疊」的主意的。在 CSS 中，一個文件的樣式能夠從其餘的樣式表中繼承下來。讀者在有些地方可使用他本身更喜歡的樣式，在其餘地方則繼承，或「層疊」做者的樣式,這種層疊的方式使做者和讀者均可以靈活地加入本身的設計，混合各人的愛好。

1997年初，W3C 內組織了專門管 CSS 的工做組，其負責人是克里斯·裏雷。這個工做組開始討論初版中沒有涉及到的問題，其結果是1998年5月出版的第二版要求。到2007年爲止，第三版還未完備。

2.瀏覽器是如何渲染頁面和加載頁面的

爲何有些網站打開的時候會加載會很慢，並且是整個頁面同時顯示的，而有些網站是從頂到下逐步顯示出來的？要搞懂這個能夠先從下面這個常規流程開始：

1. 瀏覽器下載的順序是從上到下，渲染的順序也是從上到下，下載和渲染是同時進行的。
2. 在渲染到頁面的某一部分時，其上面的全部部分都已經下載完成（並非說全部相關聯的元素都已經下載完）。
3. 若是遇到語義解釋性的標籤嵌入文件（JS腳本，CSS樣式），那麼此時IE的下載過程會啓用單獨鏈接進行下載。
4. 而且在下載後進行解析，解析過程當中，中止頁面全部往下元素的下載。
5. 樣式表在下載完成後，將和之前下載的全部樣式表一塊兒進行解析，解析完成後，將對此前全部元素（含之前已經渲染的）從新進行渲染。
6. JS、CSS中若有重定義，後定義函數將覆蓋前定義函數。

這裏關鍵的是第2-5這三點。渲染效率與下面三點有關：

1. CSS 選擇器的查詢定位效率
2. 瀏覽器的渲染模式和算法
3. 要進行渲染內容的大小

3.什麼是CSS以及CSS的優勢

什麼是 CSS？

· CSS 是 Cascading Style Sheets(層疊樣式表)的簡稱。

· CSS 語言是一種標記語言，它不須要編譯，能夠直接由瀏覽器解釋執行(屬於瀏覽器解釋型語言)。

· 在標準網頁設計中 CSS 負責網頁內容 (XHTML)的表現。

· CSS 文件也能夠說是一個文本文件，它包含了一些 CSS 標記，CSS 文件必須使用 css 爲文件名後綴。

· 能夠經過簡單的更改 CSS 文件，改變網頁的總體表現形式，能夠減小咱們的工做量，因此它是每個網頁設計人員的必修課。

· CSS是由W3C的CSS工做組產生和維護的。

採用 CSS+DIV 進行網頁重構，相對與傳統的 TABLE 網頁佈局而具備如下3個顯著優點：

1. 表現和內容相分離。將設計部分剝離出來放在一個獨立樣式文件中
2. 提升頁面瀏覽速度。對於同一個頁面視覺效果，採用 CSS+DIV 重構的頁面容量要比 TABLE 編碼的頁面文件容量小得多，前者通常只有後者的1/2大小。瀏覽器就不用去編譯大量冗長的標籤。
3. 易於維護和改版。你只要簡單的修改幾個 CSS 文件就能夠從新設計整個網站的頁面。

4.瀏覽器對CSS的匹配原理

瀏覽器CSS匹配不是從左到右進行查找，而是從右到左進行查找。好比以前說的 DIV#divBox p span.red{color:red;}，瀏覽器的查找順序以下：先查找 html 中全部 class=’red’ 的 span 元素，找到後，再查找其父輩元素中是否有p元素，再判斷p的父元素中是否有 id 爲 divBox 的 div 元素，若是都存在，則 CSS 匹配上。

瀏覽器從右到左進行查找的好處是爲了儘早過濾掉一些無關的樣式規則和元素。Firefox 稱這種查找方式爲 keyselector(關鍵字查詢)，所謂的關鍵字就是樣式規則中最後(最右邊)的規則，上面的 key 就是 span.red。