從事前端開發必須要了解的CSS原理

一、浏覽器的發展與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)。

<a href="http://s5.51cto.com/oss/201710/28/7bc89d549ba0d9040c844f637e1e6b20.jpg-wh_651x-s_1590317713.jpg" target="_blank"></a>

早期的網頁浏覽器隻支援簡易版本的HTML。專屬軟體的浏覽器的迅速發展導緻非标準的 HTML 代碼的産生。但随着 HTML 的成長，為了滿足設計師的要求，HTML 獲得了很多顯示功能。随着這些功能的增加外來定義樣式的語言越來越沒有意義了。

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

當時已經有過一些樣式表語言的建議了，但 CSS 是第一個含有“層疊”的主意的。在 CSS 中，一個檔案的樣式可以從其他的樣式表中繼承下來。讀者在有些地方可以使用他自己更喜歡的樣式，在其他地方則繼承，或“層疊”作者的樣式,這種層疊的方式使作者和讀者都可以靈活地加入自己的設計，混合各人的愛好。

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

二、浏覽器是如何渲染頁面和加載頁面

為什麼有些網站打開的時候會加載會很慢，而且是整個頁面同時顯示的，而有些網站是從頂到下逐漸顯示出來的?要搞懂這個可以先從下面這個正常流程開始：

浏覽器下載下傳的順序是從上到下，渲染的順序也是從上到下，下載下傳和渲染是同時進行的。

在渲染到頁面的某一部分時，其上面的所有部分都已經下載下傳完成(并不是說所有相關聯的元素都已經下載下傳完)。

如果遇到語義解釋性的标簽嵌入檔案(JS腳本，CSS樣式)，那麼此時IE的下載下傳過程會啟用單獨連接配接進行下載下傳。

并且在下載下傳後進行解析，解析過程中，停止頁面所有往下元素的下載下傳。

樣式表在下載下傳完成後，将和以前下載下傳的所有樣式表一起進行解析，解析完成後，将對此前所有元素(含以前已經渲染的)重新進行渲染。

JS、CSS中如有重定義，後定義函數将覆寫前定義函數。

(web前端學習交流群：328058344 禁止閑聊，非喜勿進!)

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

CSS 選擇器的查詢定位效率

浏覽器的渲染模式和算法

要進行渲染内容的大小

三、什麼是 CSS 以及 CSS 的優點

什麼是 CSS?

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

CSS 語言是一種标記語言，它不需要編譯，可以直接由浏覽器解釋執行(屬于浏覽器解釋型語言)。

在标準網頁設計中 CSS 負責網頁内容 (XHTML)的表現。

CSS 檔案也可以說是一個文本檔案，它包含了一些 CSS 标記，CSS 檔案必須使用 css 為檔案名字尾。

可以通過簡單的更改 CSS 檔案，改變網頁的整體表現形式，可以減少我們的工作量，是以它是每一個網頁設計人員的必修課。

CSS是由W3C的CSS工作組産生和維護的。

采用 CSS+DIV 進行網頁重構，相對與傳統的 TABLE 網頁布局而具有以下3個顯著優勢：

表現和内容相分離。将設計部分剝離出來放在一個獨立樣式檔案中，HTML檔案中隻存放文本資訊。這樣的頁面對搜尋引擎更加友好。

提高頁面浏覽速度。對于同一個頁面視覺效果，采用 CSS+DIV 重構的頁面容量要比 TABLE 編碼的頁面檔案容量小得多，前者一般隻有後者的1/2大小。浏覽器就不用去編譯大量冗長的标簽。

易于維護和改版。你隻要簡單的修改幾個 CSS 檔案就可以重新設計整個網站的頁面。

四、浏覽器對 CSS 的比對原理

浏覽器CSS比對不是從左到右進行查找，而是從右到左進行查找。比如之前說的 DIV#divBox p span.red{color:red;}，浏覽器的查找順序如下：先查找 html 中所有 class=’red’ 的 span 元素，找到後，再查找其父輩元素中是否有p元素，再判斷p的父元素中是否有 id 為 divBox 的 div 元素，如果都存在，則 CSS 比對上。

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

五、優化你的 CSS

所謂高效的 CSS 就是讓浏覽器在查找 style 比對的元素的時候盡量進行少的查找，下面列出一些我們常見的寫 CSS 犯一些低效錯誤：

1. 不要在ID選擇器前使用标簽名

一般寫法：DIV#divBox

更好寫法：#divBox

解釋：因為ID選擇器是唯一的，加上div反而增加不必要的 CSS 比對。

2. 不要在 class 選擇器前使用标簽名

一般寫法：span.red

更好寫法：.red

解釋：同第一條，但如果你定義了多個.red，而且在不同的元素下是樣式不一樣，則不能去掉，比如你css檔案中定義如下：

p.red{color:red;} 

span.red{color:#ff00ff} 

如果是這樣定義的就不要去掉，去掉後就會混淆，不過建議最好不要這樣寫

3. 盡量少使用層級關系

一般寫法：#divBoxp.red{color:red;}

更好寫法：.red{..}

4. 使用 class 代替層級關系

一般寫法：#divBox ul li a{display:block;}

更好寫法：.block{display:block;}

5. 在 CSS 渲染效率中 id 和 class 的效率是基本相當的

class 會在第一次載入中被緩存，在層疊中會有更加好的效果，在根部元素采用id會具有更加好(id有微妙的速度優勢)。

原文釋出時間為：2017-10-29 

本文作者:佚名

本文來自雲栖社群合作夥伴“51CTO”，了解相關資訊可以關注。