css 漫談 原理與經驗之分享

2022-03-16 06:57:33 字數 2910 閱讀 3214

中山裝修網

要說css會的人很多,因為簡單方便。只要你熟悉一些基本的屬性基本上布局乙個頁面是沒有太大的困難的。不過很多人用了很久的css卻從來也不知道css是怎麼去工作的,寫出來的css瀏覽器是怎麼樣去解析的呢?所以往往在一定階段之後,就變成了進一步提高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)。

早期的網頁瀏覽器只支援簡易版本的html。專屬軟體的瀏覽器的迅速發展導致非標準的html**的產生。

但隨著html的成長,為了滿足設計師的要求,html獲得了很多顯示功能。隨著這些功能的增加外來定義樣式的語言越來越沒有意義了。

2023年哈坤·利提出了css的最初建議。伯特·波斯(bertbos)當時正在設計乙個叫做argo的瀏覽器,他們決定一起合作設計css。

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

二、瀏覽器是如何渲染頁面和載入頁面

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

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

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

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

3.要進行渲染內容的大小

三、什麼是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檔案就可以重新設計整個**的頁面。

四、瀏覽器對css的匹配原理

瀏覽器css匹配不是從左到右進行查詢,而是從右到左進行查詢。比如之前說的div#divboxpspan.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檔案中定義如下:

1. p.red

2. span.red

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

3.盡量少使用層級關係

一般寫法:#divboxp.red

更好寫法:.red

4.使用class代替層級關係

一般寫法:#divboxullia

更好寫法:.block

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

class最在第一次載入中被快取,在層疊中會有更加好的效果,在根部元素採用id會具有更加好(id有微妙的速度優勢)。

後記:

主要總結了一些css的經驗之談,對於硬體平台和瀏覽器快速發展的今天,更多的人會將精力投入到「實現」這一目標上,而忽略了「原理」這一根本。web從開始至今已經發生了根本性的變化,不可能用以前的目光來衡量,但是在所有的變化中都離不開它的內在:頁面渲染。所有變化幾乎都是圍繞這個而產生的。所以可能花費一點時間去了解一下也許能有所幫助,至少知道你寫出的樣式表的瓶頸是否是本文中所列出的。

CSS常用框架經驗分享

css常用框架經驗分享 css框架是一系列 css 檔案的集合體,包含了基本的元素重置,頁面排版 網格布局表單樣式 通用規則等 塊,用於簡化web前端開發的工作,提高工作效率。比如 yui,blueprint,bootstrap,elastic css 或許是因為這點現在好多人都用css 框架進行快...

學習前端css經驗分享

自己學習前端大概半個月了,零零散散,但相對與平時也是很不錯的一段學習時間。在寫正式部落格之前,做一下推廣,我廠的前端工程師,開發工具現在都是這樣的sublime webstorm clam yo glup,好,就這樣,具體作用,大家可以自行學習下,如有機會,下次會把自己的使用心得記錄下,下面進入正題...

求職策略與經驗分享

基本上每年的9 11月份是找工作的高峰期。不過,最近便常會有我的師弟師妹們聯絡我,讓我給他們分享一下當初找工作時候的一些心得體會。希望通過本場chat,分享一下當初自己找工作時候的策略與經驗,讓更多的師弟師妹們受益,少走些彎路,多拿些理想的offer。主要內容包括 找工作時常用的就業 總結。簡歷製作...