瀏覽器的組成：
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:輪廓樣式：
瀏覽器對父子選擇器的匹配規則：（演算法里面樹尋找規則：從右到左，從下到上）
作業：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/272771.html
標籤：Html/Css