天天看點

CSS(Cascading Style Sheets)層疊樣式表

1.CSS代碼的位置

三種樣式表的優先級由高到低排列如下:

内聯樣式表>内部樣式表> 外部樣式表

補充規則:優先級相同的情況下,後定義的屬性會覆寫先前定義的。

其他進階規則:CSS中的important!是比較實用的技巧。

1.1 内聯樣式表:HTML标簽内

CSS(Cascading Style Sheets)層疊樣式表

1.2内部樣式表:在head标簽内,title标簽後面

如上圖所示

注釋标簽 則是避免不支援CSS的浏覽器将CSS内容作為網頁正文顯示在頁面上。

在CSS中,注釋以“/”開始,以“/”結束

1.3外部樣式表:獨立的CSS檔案中

使用link标簽引入到目前文檔中

2.CSS基本文法

CSS(Cascading Style Sheets)層疊樣式表

3.css選擇器

(1) id選擇器 #

(2) 類class選擇器 .

(3)選擇器分組:不同的元素使用相同的樣式時,可以使用“,”逗号隔開,表示并列關系。

(4)派生選擇器:使用“父元素 子元素”的格式定位到父元素下面的子元素(用空格隔開)

(5)id選擇器結合派生選擇器:“#id名 子元素”定位到此id下面的子元素。

(6)類選擇器結合派生選擇器:“.class名 子元素”定位到此class下面的子元素。

(7)元素也可以給予他們的類而被選擇

CSS(Cascading Style Sheets)層疊樣式表
CSS(Cascading Style Sheets)層疊樣式表

4.css框模型

CSS(Cascading Style Sheets)層疊樣式表

行框:前後不換行,不能指定寬度(a,span,strong等标簽),通過display:inline指定

CSS(Cascading Style Sheets)層疊樣式表

塊框:前後換行(div,table,p,h1~h6等标簽)通過display:block指定

CSS(Cascading Style Sheets)層疊樣式表

5.

CSS(Cascading Style Sheets)層疊樣式表
CSS(Cascading Style Sheets)層疊樣式表
CSS(Cascading Style Sheets)層疊樣式表