CSS的歷史與工作原理

2022-02-20 21:42:33 字數 2229 閱讀 2775

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獲得了很多顯示功能。隨著這些功能的增加外來定義樣式的語言越來越沒有意義了。

2023年初,w3c內組織了專門管css的工作組,其負責人是克里斯·里雷。這個工作組開始討論第一版中沒有涉及到的問題,其結果是2023年5月出版的第二版要求。到2023年為止,第三版還未完備。

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

為什麼有些**開啟的時候會載入會很慢,而且是整個頁面同時顯示的,而有些**是從頂到下逐步顯示出來的?要搞懂這個可以先從下面這個常規流程開始:

js、css中如有重定義,後定義函式將覆蓋前定義函式。

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

css選擇器的查詢定位效率

瀏覽器的渲染模式和演算法

要進行渲染內容的大小

3. 什麼是css以及css的優點

什麼是cascadingstylesheets(層疊樣式表)?css是cascadingstylesheets(層疊樣式表)的簡稱。css 語言是一種標記語言,它不需要編譯,可以直接由瀏覽器解釋執行(屬於瀏覽器解釋型語言)。在標準網頁設計中css負責網頁內容 (xhtml)的表現。css檔案也可以說是乙個文字檔案,它包含了一些css標記,css檔案必須使用css為檔名字尾。可以通過簡單的更改 css檔案,改變網頁的整體表現形式,可以減少我們的工作量,所以她是每乙個網頁設計人員的必修課。css是由w3c的css工作組產生和維護的。

採用css+div進行網頁重構相對與傳統的table網頁布局而具有以下3個顯著優勢:

表現和內容相分離將設計部分剝離出來放在乙個獨立樣式檔案中,html檔案中只存放文字資訊。這樣的頁面對搜尋引擎更加友好。

提高頁面瀏覽速度對於同乙個頁面視覺效果,採用css+div重構的頁面容量要比table編碼的頁面檔案容量小得多,前者一般只有後者的1/2大小。瀏覽器就不用去編譯大量冗長的標籤。

易於維護和改版你只要簡單的修改幾個css檔案就可以重新設計整個**的頁面。

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

瀏覽器css匹配不是從左到右進行查詢,而是從右到左進行查詢。比如之前說的div#divboxpspan.red,瀏覽器的查詢順序如下:先查詢html中所有class=』red』的span元素,找到後,再查詢其父輩元素中是否有p元素,再判斷p的父元素中是否有id為 divbox的div元素,如果都存在則css匹配上。

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

5. 優化你的css

所謂高效的css就是讓瀏覽器在查詢style匹配的元素的時候盡量進行少的查詢,下面列出一些我們常見的寫css犯一些低效錯誤:

1. 不要在id選擇器前使用標籤名。一般寫法:div#divbox,更好寫法:#divbox。

解釋:因為id選擇器是唯一的,加上div反而增加不必要的css匹配。

2. 不要在class選擇器前使用標籤名。一般寫法:span.red,更好寫法:.red。

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

p .red

span .red

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

3. 盡量少使用層級關係。一般寫法:#divboxp.red,更好寫法:.red

4. 使用class代替層級關係。一般寫法:#divboxullia,更好寫法:.block

5. 在css渲染效率中id和class的效率是基本相當的。class最在第一次載入中被快取,在層疊中會有更加好的效果,在根部元素採用id會具有更加好(id有微妙的速度優勢)。

CSS的歷史與工作原理

1.瀏覽器的發展與css 網頁瀏覽器主要通過http協議連線網頁伺服器而取得網頁 http容許網頁瀏覽器送交資料到網頁伺服器並且獲取網頁。目前最常用的 http 是 http 1.1,這個協議在rfc2616中被完整定義。http 1.1 有其一套internet explorer並不完全支援的標準...

CSS工作原理

當乙個瀏覽器在顯示文件的時候,需要將文件內容和樣式內容結合到一起,以此在 處理文件的時候包含兩個階段 1 瀏覽器將html和css裝換為dom document object model dom在計算機內 存中表示文件,使得文件和css結合。2 瀏覽器顯示dom的內容。這也可解釋在編譯css採用外部...

16 1 1 Web服務的歷史和工作原理

internet 上最熱門的服務之一就是全球資訊網,它是在網際網路上以超文字為基礎形成的資訊網。使用者通過它可以查閱 internet 上的資訊資源,例如,平時上網使用瀏覽器訪問 資訊就是最常見的應用。web在 1989 年起源於歐洲的乙個國際核能研究院中,由於隨著研究的深入和發展,研究院裡的檔案數...