學(xué)習(xí)web前端，必須要掌握的CSS原理

從事Web前端開(kāi)發(fā)的人都與CSS打交道很多，有的人也許不知道CSS是怎么去工作的，寫(xiě)出來(lái)的CSS瀏覽器是怎么樣去解析的呢？當(dāng)這個(gè)成為我們提高CSS水平的一個(gè)瓶頸時(shí)，是否應(yīng)該多了解一下呢？

臺(tái)兒ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書(shū)銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書(shū)合作）期待與您的合作！

我還是要推薦下我自己創(chuàng)建的web前端資料分享群606721798，這是web前端學(xué)習(xí)交流的地方，不管你是小白還是大牛，小編都?xì)g迎，不定期分享干貨，包括我整理的一份適合零基礎(chǔ)學(xué)習(xí)web前端的資料和入門(mén)教程。

一、瀏覽器的發(fā)展與CSS

網(wǎng)頁(yè)瀏覽器主要通過(guò) HTTP 協(xié)議連接網(wǎng)頁(yè)服務(wù)器而取得網(wǎng)頁(yè)， HTTP 容許網(wǎng)頁(yè)瀏覽器送交資料到網(wǎng)頁(yè)服務(wù)器并且獲取網(wǎng)頁(yè)。目前最常用的 HTTP 是 HTTP/1.1，這個(gè)協(xié)議在 RFC2616 中被完整定義。HTTP/1.1 有其一套 Internet Explorer 并不完全支援的標(biāo)準(zhǔn)，然而許多其他當(dāng)代的網(wǎng)頁(yè)瀏覽器則完全支援這些標(biāo)準(zhǔn)。網(wǎng)頁(yè)的位置以 URL（統(tǒng)一資源定位符）指示，此乃網(wǎng)頁(yè)的地址；以 http: 開(kāi)首的便是通過(guò) HTTP協(xié)議登陸。很多瀏覽器同時(shí)支援其他類型的 URL 及協(xié)議，例如 ftp: 是 FTP（檔案?jìng)魉蛥f(xié)議）、gopher: 是 Gopher 及 https: 是 HTTPS（以SSL加密的HTTP）。

早期的網(wǎng)頁(yè)瀏覽器只支援簡(jiǎn)易版本的HTML。專屬軟件的瀏覽器的迅速發(fā)展導(dǎo)致非標(biāo)準(zhǔn)的 HTML 代碼的產(chǎn)生。但隨著 HTML 的成長(zhǎng)，為了滿足設(shè)計(jì)師的要求，HTML 獲得了很多顯示功能。隨著這些功能的增加外來(lái)定義樣式的語(yǔ)言越來(lái)越?jīng)]有意義了。

1994年哈坤·利提出了 CSS 的最初建議。伯特·波斯（BertBos）當(dāng)時(shí)正在設(shè)計(jì)一個(gè)叫做 Argo 的瀏覽器，他們決定一起合作設(shè)計(jì)CSS。

當(dāng)時(shí)已經(jīng)有過(guò)一些樣式表語(yǔ)言的建議了，但 CSS 是第一個(gè)含有“層疊”的主意的。在 CSS 中，一個(gè)文件的樣式可以從其他的樣式表中繼承下來(lái)。讀者在有些地方可以使用他自己更喜歡的樣式，在其他地方則繼承，或“層疊”作者的樣式,這種層疊的方式使作者和讀者都可以靈活地加入自己的設(shè)計(jì)，混合各人的愛(ài)好。

1997年初，W3C 內(nèi)組織了專門(mén)管 CSS 的工作組，其負(fù)責(zé)人是克里斯·里雷。這個(gè)工作組開(kāi)始討論第一版中沒(méi)有涉及到的問(wèn)題，其結(jié)果是1998年5月出版的第二版要求。到2007年為止，第三版還未完備。

二、瀏覽器是如何渲染頁(yè)面和加載頁(yè)面

為什么有些網(wǎng)站打開(kāi)的時(shí)候會(huì)加載會(huì)很慢，而且是整個(gè)頁(yè)面同時(shí)顯示的，而有些網(wǎng)站是從頂?shù)较轮鸩斤@示出來(lái)的？要搞懂這個(gè)可以先從下面這個(gè)常規(guī)流程開(kāi)始：

1. 瀏覽器下載的順序是從上到下，渲染的順序也是從上到下，下載和渲染是同時(shí)進(jìn)行的。

2. 在渲染到頁(yè)面的某一部分時(shí)，其上面的所有部分都已經(jīng)下載完成（并不是說(shuō)所有相關(guān)聯(lián)的元素都已經(jīng)下載完）。

3. 如果遇到語(yǔ)義解釋性的標(biāo)簽嵌入文件（JS腳本，CSS樣式），那么此時(shí)IE的下載過(guò)程會(huì)啟用單獨(dú)連接進(jìn)行下載。

4. 并且在下載后進(jìn)行解析，解析過(guò)程中，停止頁(yè)面所有往下元素的下載。

5. 樣式表在下載完成后，將和以前下載的所有樣式表一起進(jìn)行解析，解析完成后，將對(duì)此前所有元素（含以前已經(jīng)渲染的）重新進(jìn)行渲染。

6. JS、CSS中如有重定義，后定義函數(shù)將覆蓋前定義函數(shù)。

這里關(guān)鍵的是第2-5這三點(diǎn)。渲染效率與下面三點(diǎn)有關(guān)：

1. CSS 選擇器的查詢定位效率

2. 瀏覽器的渲染模式和算法

3. 要進(jìn)行渲染內(nèi)容的大小

三、什么是 CSS 以及 CSS 的優(yōu)點(diǎn)

什么是 CSS？

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

• CSS 語(yǔ)言是一種標(biāo)記語(yǔ)言，它不需要編譯，可以直接由瀏覽器解釋執(zhí)行(屬于瀏覽器解釋型語(yǔ)言)。

• 在標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)中 CSS 負(fù)責(zé)網(wǎng)頁(yè)內(nèi)容 (XHTML)的表現(xiàn)。

• CSS 文件也可以說(shuō)是一個(gè)文本文件，它包含了一些 CSS 標(biāo)記，CSS 文件必須使用 css 為文件名后綴。

• 可以通過(guò)簡(jiǎn)單的更改 CSS 文件，改變網(wǎng)頁(yè)的整體表現(xiàn)形式，可以減少我們的工作量，所以它是每一個(gè)網(wǎng)頁(yè)設(shè)計(jì)人員的必修課。

• CSS是由W3C的CSS工作組產(chǎn)生和維護(hù)的。

采用 CSS+DIV 進(jìn)行網(wǎng)頁(yè)重構(gòu)，相對(duì)與傳統(tǒng)的 TABLE 網(wǎng)頁(yè)布局而具有以下3個(gè)顯著優(yōu)勢(shì)：

1. 表現(xiàn)和內(nèi)容相分離。將設(shè)計(jì)部分剝離出來(lái)放在一個(gè)獨(dú)立樣式文件中，HTML文件中只存放文本信息。這樣的頁(yè)面對(duì)搜索引擎更加友好。

2. 提高頁(yè)面瀏覽速度。對(duì)于同一個(gè)頁(yè)面視覺(jué)效果，采用 CSS+DIV 重構(gòu)的頁(yè)面容量要比 TABLE 編碼的頁(yè)面文件容量小得多，前者一般只有后者的1/2大小。瀏覽器就不用去編譯大量冗長(zhǎng)的標(biāo)簽。

3. 易于維護(hù)和改版。你只要簡(jiǎn)單的修改幾個(gè) CSS 文件就可以重新設(shè)計(jì)整個(gè)網(wǎng)站的頁(yè)面。

四、瀏覽器對(duì) CSS 的匹配原理

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

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

五、優(yōu)化你的 CSS

所謂高效的 CSS 就是讓瀏覽器在查找 style 匹配的元素的時(shí)候盡量進(jìn)行少的查找，下面列出一些我們常見(jiàn)的寫(xiě) CSS 犯一些低效錯(cuò)誤：

1、不要在ID選擇器前使用標(biāo)簽名

一般寫(xiě)法：DIV#divBox

更好寫(xiě)法：#divBox

解釋：因?yàn)镮D選擇器是唯一的，加上div反而增加不必要的 CSS 匹配。

2、不要在 class 選擇器前使用標(biāo)簽名

一般寫(xiě)法：span.red

更好寫(xiě)法：.red

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

　　p.red{color:red;}

　　span.red{color:#ff00ff}

如果是這樣定義的就不要去掉，去掉后就會(huì)混淆，不過(guò)建議最好不要這樣寫(xiě)

3、盡量少使用層級(jí)關(guān)系

一般寫(xiě)法：#divBoxp.red{color:red;}

更好寫(xiě)法：.red{..}

4、使用 class 代替層級(jí)關(guān)系

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

更好寫(xiě)法：.block{display:block;}

5、在 CSS 渲染效率中 id 和 class 的效率是基本相當(dāng)?shù)?/p>

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

網(wǎng)站題目：學(xué)習(xí)web前端，必須要掌握的CSS原理
網(wǎng)站網(wǎng)址：http://muchs.cn/article10/jpehgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、全網(wǎng)營(yíng)銷推廣、自適應(yīng)網(wǎng)站、動(dòng)態(tài)網(wǎng)站、App開(kāi)發(fā)、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)