百度前端技術學院 第三天(下)

2021-09-11 08:42:55 字數 1526 閱讀 5932

1、css介紹

層疊樣式表,用於表示頁面的樣式

2、css實際上如何工作?

1、瀏覽器將html和css轉化成dom(文件物件模型)。dom在計算機中表示文件,它把文件內容和其樣式結合在一起

2、瀏覽器顯示dom的內容

3、什麼是dom?

dom是一種樹形結構,標記語言中的每個元素,屬性,文字片段都變成為乙個dom節點,這些節點由它們與其它dom節點的關係來定義,有些元素是某些子節點的父節點,且這些子節點有兄弟節點,dom是css與文件內容的相遇之處。

4、css三種引用方式,這裡不再多介紹,之前文章有介紹過

5、從基本的層次看,css是由兩塊內容組合而成的

1、屬性(property),值(value)

6、css宣告塊:宣告塊裡的每乙個宣告必須用半形分號(;)分隔,否則**會不生效(至少不會按預期結果生效)。宣告塊裡的最後乙個宣告結束的地方,不需要加分號,但是最後加分號是個好習慣,因為可以防止在後續增加宣告時忘記加分號。

7、通過在每個宣告塊前加上選擇器(selector)來完成這一動作,選擇器是一種模式,它能在頁面上匹配一些元素這將使相關的宣告僅被應用到被選擇的元素上。選擇器加上宣告塊被稱為規則集(ruleset),通常簡稱規則rule)。

8、該@-規則向當前 css 匯入其它 css 檔案

@import 'custom.css';
9、巢狀語句

巢狀語句是@-規則中的一種,它的語法是 css 規則的巢狀塊,只有在特定條件匹配時才會應用到文件上。特定條件如下:

@media (min-width: 801px) 

}

表示巢狀語句只有在頁面寬度超過801畫素時才會應用

10、css中的注釋以/*開始並以*/結束。   注釋

11、簡寫屬性:fontbackgroundpaddingborder,和margin被稱為簡寫屬性

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
12、選擇器分類:

a b   匹配a後面的子代b

a>b   匹配a下面的直接子元素b

a+b  匹配a相鄰的b,ab有相同的父結點,並且b緊跟在a的後面

a~b  匹配a相鄰的b,ab有相同的父節點,b在a之後,但不一定是緊挨著a

百度前端技術學院第三天 (給簡歷加點顏色)

1 什麼是css,css是如何工作的?css 層疊樣式表 cascading style sheet 是決定了如何顯示html元素的,如html內容的字型大小顏色等 css的工作原理是 瀏覽器將css的規則應用在html,前置條件是html中已經引用了css檔案 a.瀏覽器載入html b.瀏覽器解...

百度前端學院第三天 CSS基本

color red 設定顏色 font family sans serif 設定字型樣式 font style italic 設定字型風格 normal 預設值。瀏覽器顯示乙個標準的字型樣式。italic 瀏覽器會顯示乙個斜體的字型樣式。oblique 瀏覽器會顯示乙個傾斜的字型樣式。inherit...

百度前端技術學院 第一 二天整理

1 html是什麼,html5是什麼 html全名為hyper text markup language 超文字標記語言,html5表示他的第五代,是最新的html標準,擁有更豐富的語義 圖形以及多 元素等內容。2 html元素標籤 屬性都是什麼概念 html元素標籤是指文字下的被瀏覽器解析的東西,...