CSS

1. 什麼是css？

Cascading Style Sheets  樣式表或者是層疊樣式表

2. css的作用

從審美的角度，對html頁面進行美化！

3. *書寫css程式碼的語法規則

CSS程式碼是由選擇器和｛宣告｝組成

1. ｛｝裡面是由一條一條宣告語句組成
2. 每一條語句的末尾有一個英文的分號; 最後一條語句的末尾分號可有可無
3. 每一條語句是由“屬性：值” 組成
4. 語句中的屬性值不需要加引號
5. 如果屬性的值是數字通常都需加單位px——畫素單位

4. *快速入門

5. css程式碼的書寫方式

所謂的書寫方式指的就是css程式碼在那裡寫

CSS程式碼的書寫方式：嵌入式（內嵌式） 外鏈式 行內式

5.1 嵌入式

指的是將css程式碼直接嵌入在html檔案的style標籤中

注意：在style標籤裡面只能使用css程式碼的書寫規則

5.2 外鏈式

單獨寫一個以.css為副檔名的檔案，這個檔案中就可以直接書寫css程式碼，需要將這個css檔案引入到需要的

html檔案中，要通過html中的<link/>標籤實現。

5.3 行內式

就是將css程式碼寫在html標籤中的style屬性中。

<p sytle="屬性：值;"><p/>

6. 註釋

格式： /*註釋的內容*/

注意 千萬不要在css程式碼裡面使用html的註釋。

7. 選擇器

7.1 什麼是選擇器

選擇器是通過一定的語法規則選取到相應的html標記，然後給這個相應的html標記設定樣式

7.2 基本選擇器

7.2.1 通用選擇器

7.2.2 標籤選擇器

7.2.3 類選擇器

7.2.4 id選擇器

7.3 複合選擇器

7.3.1 多元素選擇器

7.3.2 後代元素選擇器

7.3.3 子元素選擇器

7.3.4 相鄰元素選擇器

7.4 偽類選擇器

7.4.1 錨偽類選擇器

7.4.2 對超級連結的美化

還可以使用下圖方式，效果一樣

<style type="css/text">
    a{
       text-decoration:none;
       color:#0f0;
}
    a:hover{
       text-decoration:underline;
       color:#f00;
}
</style>
 

列表屬性加上偽類選擇器案例：

7.5 屬性選擇器

8.尺寸樣式屬性

9. 文字與字型屬性

9.1 文字屬性

9.2 字型屬性

10 列表樣式屬性

11.塊級元素和行內元素

12.繼承性

所謂的繼承性指的不是給自身設定樣式，它身上的樣式是繼承來的。

12.1祖先元素的身上的樣式會被後代繼承

下圖我們是給body設定的顏色，但是h2繼承了body的顏色

12.2就近原則

下圖中我們給div標籤設定了顏色，但是h2會就近選擇來繼承

12.3 並不是所有的屬性都能夠被繼承

在CSS中有以下屬性可以被繼承：

文字 字型 列表 能夠被繼承！

一般情況下我們會給body設定以下樣式：

字型大小 字型 顏色

body{
font-size:xxx;
font-family:xxx;
color:xxx;
}

有一個標籤非常特殊 a標籤 這個標籤的樣式不能繼承其父級元素，它只能自己設定。

13 選擇器的優先順序

選擇器的優先順序指的是屬性設定當前元素的身上

13.1 單個選擇器之間的優先順序

13.2 多個選擇器之間的優先順序

如果多個選擇器之間的個數相同時 要觀察CSS程式碼的書寫順序。誰寫在後面就聽誰的。