1. 瀏覽器的發(fā)展與CSS網(wǎng)頁瀏覽器主要通過HTTP協(xié)議連接網(wǎng)頁服務器而取得網(wǎng)頁，HTTP容許網(wǎng)頁瀏覽器送交資料到網(wǎng)頁服務器并且獲取網(wǎng)頁。目前最常用的 HTTP 是 HTTP/1.1，這個協(xié)議在RFC2616中被完整定義。HTTP/1.1 有其一套Internet Explorer并不完全支援的標準，然而許多其他當代的網(wǎng)頁瀏覽器則完全支援這些標準。網(wǎng)頁的位置以URL（統(tǒng)一資源定位符）指示，此乃網(wǎng)頁的地址；以http:開首的便是通過 HTTP協(xié)議登陸。很多瀏覽器同時支援其他類型的URL及協(xié)議，例如ftp:是FTP（檔案傳送協(xié)議）、gopher:是Gopher及https:是 HTTPS（以SSL加密的HTTP）。早期的網(wǎng)頁瀏覽器只支援簡易版本的HTML。專屬軟件的瀏覽器的迅速發(fā)展導致非標準的HTML代碼的產(chǎn)生。但隨著HTML的成長，為了滿足設計師的要求，HTML獲得了很多顯示功能。隨著這些功能的增加外來定義樣式的語言越來越?jīng)]有意義了。1994年哈坤·利提出了CSS的最初建議。伯特·波斯（BertBos）當時正在設計一個叫做Argo的瀏覽器，他們決定一起合作設計CSS。當時已經(jīng)有過一些樣式表語言的建議了，但CSS是第一個含有“層疊”的主意的。在CSS中，一個文件的樣式可以從其他的樣式表中繼承下來。讀者在有些地方可以使用他自己更喜歡的樣式，在其他地方則繼承，或“層疊”作者的樣式，這種層疊的方式使作者和讀者都可以靈活地加入自己的設計，混合各人的愛好。1997年初，W3C內(nèi)組織了專門管CSS的工作組，其負責人是克里斯·里雷。這個工作組開始討論第一版中沒有涉及到的問題，其結(jié)果是1998年5月出版的第二版要求。到2007年為止，第三版還未完備。2. 瀏覽器是如何渲染頁面和加載頁面為什么有些網(wǎng)站打開的時候會加載會很慢，而且是整個頁面同時顯示的，而有些網(wǎng)站是從頂?shù)较轮鸩斤@示出來的？要搞懂這個可以先從下面這個常規(guī)流程開始：瀏覽器下載的順序是從上到下，渲染的順序也是從上到下，下載和渲染是同時進行的。在渲染到頁面的某一部分時，其上面的所有部分都已經(jīng)下載完成（并不是說所有相關聯(lián)的元素都已經(jīng)下載完）。如果遇到語義解釋性的標簽嵌入文件（JS腳本，CSS樣式），那么此時IE的下載過程會啟用單獨連接進行下載。并且在下載后進行解析，解析過程中，停止頁面所有往下元素的下載。樣式表在下載完成后，將和以前下載的所有樣式表一起進行解析，解析完成后，將對此前所有元素（含以前已經(jīng)渲染的）重新進行渲染。JS、CSS中如有重定義，后定義函數(shù)將覆蓋前定義函數(shù)。這里關鍵的是第2-5這三點。渲染效率與下面三點有關：css選擇器的查詢定位效率瀏覽器的渲染模式和算法要進行渲染內(nèi)容的大小3. 什么是CSS以及CSS的優(yōu)點什么是CascadingStyleSheets（層疊樣式表）？CSS是CascadingStyleSheets(層疊樣式表)的簡稱。CSS 語言是一種標記語言，它不需要編譯，可以直接由瀏覽器解釋執(zhí)行（屬于瀏覽器解釋型語言）。在標準網(wǎng)頁設計中CSS負責網(wǎng)頁內(nèi)容 (XHTML)的表現(xiàn)。CSS文件也可以說是一個文本文件，它包含了一些CSS標記，CSS文件必須使用css為文件名后綴。可以通過簡單的更改 CSS文件，改變網(wǎng)頁的整體表現(xiàn)形式，可以減少我們的工作量，所以她是每一個網(wǎng)頁設計人員的必修課。CSS是由W3C的CSS工作組產(chǎn)生和維護的。采用CSS+DIV進行網(wǎng)頁重構相對與傳統(tǒng)的TABLE網(wǎng)頁布局而具有以下3個顯著優(yōu)勢：表現(xiàn)和內(nèi)容相分離將設計部分剝離出來放在一個獨立樣式文件中，HTML文件中只存放文本信息。這樣的頁面對搜索引擎更加友好。提高頁面瀏覽速度對于同一個頁面視覺效果，采用CSS+DIV重構的頁面容量要比TABLE編碼的頁面文件容量小得多，前者一般只有后者的1/2大小。瀏覽器就不用去編譯大量冗長的標簽。易于維護和改版你只要簡單的修改幾個CSS文件就可以重新設計整個網(wǎng)站的頁面。4. 瀏覽器對CSS的匹配原理瀏覽器CSS匹配不是從左到右進行查找，而是從右到左進行查找。比如之前說的DIV#divBoxpspan.red{color:red;}，瀏覽器的查找順序如下：先查找html中所有class=’red’的span元素，找到后，再查找其父輩元素中是否有p元素，再判斷p的父元素中是否有id為 divBox的div元素，如果都存在則CSS匹配上。瀏覽器從右到左進行查找的好處是為了盡早過濾掉一些無關的樣式規(guī)則和元素。firefox稱這種查找方式為keyselector(關鍵字查詢)，所謂的關鍵字就是樣式規(guī)則中最后(最右邊)的規(guī)則，上面的key就是span.red。5. 優(yōu)化你的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代替層級關系。一般寫法：#divBoxullia{display:block;}，更好寫法：.block{display:block;}5. 在css渲染效率中id和class的效率是基本相當?shù)摹lass最在第一次載入中被緩存，在層疊中會有更加好的效果，在根部元素采用id會具有更加好（id有微妙的速度優(yōu)勢）。

轉(zhuǎn)載于:https://www.cnblogs.com/lechie/archive/2012/03/12/2391686.html

總結(jié)

以上是生活随笔為你收集整理的CSS的历史与工作原理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。