瀏覽器+css基礎+選擇器+權重+匹配規則

瀏覽器的組成：

shell+內核

shell：用戶能看獲得的界面就叫shell

內核：渲染rendering引擎和js引擎

如今主流擁有本身開發內核的瀏覽器：opera如今屬於360和崑崙萬維

 

 CSS（cascading style sheet)層疊樣式表

內聯樣式寫法：

 

 內部樣式表:

 

 外部樣式表：

 

 

 href:typertext reference：針對外部的引用

src:source:加載資源

 

這三種方式有權重的問題：分別是內聯樣式的優先級>內部樣式的優先級>外部樣式的優先級

 

在輸入網址的那一刻，瀏覽器就在尋找相應的目的地下載相應的東西，加載的是html，css，javascript，圖片

流程圖：

能夠看到瀏覽器會在加載的時候分別進行html下載和css樣式的下載，

html會先造成dom樹，而css會造成css規則樹，當dom樹和css規則樹合併的時候就會造成渲染樹；

渲染樹進行佈局，當進行頁面動態交互就會重寫渲染樹，渲染樹在從新佈局

 

id選擇器和類選擇器就不講了，基本都會

 通配符選擇器：適用於全部的標籤：這其實不是很好 由於咱們有時候須要p和h標籤的外邊距，這樣寫了就表示全部標籤的外邊距都沒了，因此在定義的時候須要謹慎

 

 屬性選擇器：[標籤裏面的屬性]

 

 

 !import:在css樣式裏面權重是最高的

 

 class類選擇器和屬性選擇器是同級的，誰在後面引用誰

正常選擇器的權重比較：

 

 

 派生選擇器： 類與標籤，類與類，標籤與標籤，id和標籤，id和類，id不能和id

 

 

 在企業裏面不推薦這樣寫：由於id原本就惟一了，這樣寫渲染是沒問題的，可是沒什麼意義

 

 

 權重：*通配符的權重爲0，標籤/僞元素的權重爲1，class/屬性/僞類的權重值爲10，id 的權重值是100，

內聯樣式的權重值是1000，!import的權重爲正無窮

 

並列選擇器：

 

 

 

一個簡單的樣式案例：

 

 

 

 

 

 

 

今天學習第一個屬性：outline:輪廓

聚焦的時候就不會有藍色的輪廓了

 

 

 設置outline的屬性：

outline-color：輪廓顏色， 

outline-width:輪廓寬度：單位是px

去除輪廓：outline：none 如今企業開發只須要這個去除輪廓

outline-style:輪廓樣式：

 

瀏覽器對父子選擇器的匹配規則：（算法裏面樹尋找規則：從右到左，從下到上）

 

 

做業：