１.1  選擇器：選擇頁面上的某一個元素。

1.0標籤選擇器：

2.0類選擇器： .類名

3.0id選擇器:   #id名

4.0使用類選擇器和id選擇器的注意點：

類名和id名的命名規則**

１.2  字型樣式相關的屬性：

Font:Font-style font-weight font-size font-family;

二.  其它選擇器：

１   萬用字元：

作用：用於作用於頁面上所有的標籤.

程式碼：

<style>

      * {

            屬性名1：屬性值1;

            屬性名2：屬性值2;

            .......

}

</style>

注意：萬用字元在進行選擇的時候，會去遍歷頁面上所有的標籤，並且給這些標籤設定對應的屬性。

缺點：效能太低。一般情況不建議使用。

基礎班中有很長一段時間用這個屬性來做css的reset.

２   後代選擇器：

作用：選擇一個標籤中所有後代標籤裡滿足條件的標籤。

程式碼：

 選擇器 選擇器 選擇器｛

     屬性名1：屬性值1;

            屬性名2：屬性值2;

            .......

｝

解讀：去.father下面找.son元素，再找.son下面所有的p標籤。

３   子元素選擇器

作用：得到 當前標籤中的直接子元素（直接放在標籤下面沒有經過任何標籤的巢狀）

程式碼：

選擇器>選擇器｛

     屬性名1：屬性值1;

            屬性名2：屬性值2;

            .......
｝

具體程式碼：

注意：上面的程式碼中只有與羊相關的標籤才會變色。

４   並集選擇器：

作用：將兩種型別的元素全部選擇出來。

程式碼：

選擇器 ，選擇器｛

屬性名1：屬性值1;

            屬性名2：屬性值2;

            .......

｝

具體程式碼：

==》

.son p {

     Color: red;

}

.mao p {
     color: red;

}

５   交集選擇器：

作用：從兩個集合中選擇中它們相同部分：

程式碼：

選擇器選擇器 {
            屬性名1：屬性值1;

            屬性名2：屬性值2;

            .......

}

注意：兩個選擇器之間是沒有空格的。

P標籤中不能放div。

三.  Css的三大特性

１   繼承

作用：給父元素設定一個屬性，然後子元素可以使用

應用：如果頁面上有很多的檔案都是紅色，並且大小都是20px，那麼這個時候給每個元素單獨設定會很麻煩，所以可以考慮繼承。

注意：將來在寫程式碼的時候，我們的css初始化，與頁面文字的整體顏色一般會先設定。

什麼樣的屬性才可以繼承呢？

凡是以line-,text-,font-開頭的屬性都是可以繼承。

２   層疊

是頁面處理衝突屬性的一個能力。

如果多個選擇器為同一個元素設定了不同的屬性它們會同時作用於這個元素。

如果多個選擇器為同一個元素調協了相同的屬性它們會發生層疊。

層疊的最終結果跟優先順序有關係。

３   優先順序

優先順序從大到小

！important>Id>類>標籤>萬用字元>繼承>瀏覽器預設

權重：

４   ！Important:最高階。

作用：將對應選擇器的優先順序設定為最高階。

注意：！Important屬性是不能繼承的

５   如果選擇器混合作用，那麼如何確定我們的優先順序？

通過權重來進行比較。

如何計算權重：

數標籤：

先數id,如果id相等再數類如果id不相等id多的選擇器權重高，權重越高，優先順序越高。如果id選擇器數量相同，再數類選擇器，最後數標籤。

注意：比較權重的時候一定要注意：我們的選擇器一定要命中對應的標籤才可能讓標籤擁有對應的屬性。

四.  層疊，優先以及權重之間的關係

層疊是css的一特性，如果兩個相同的屬性作用於同一標籤，它們會發生層疊。如果多個複合選擇器，同時作用於我們的同一標籤，優先順序就不好計算了，就要計算權重，通過比較權重，來先出優先順序最高的選擇器。

層疊是優先順序的一種表現。

權重是優先順序的計演算法則。

五.  背景：

１   Background-color:背景顏色;

作用：設定背景顏色。

２   Background-image:背景圖片

作用：設定背景圖片，預設情況下是平鋪（如果圖片不能佔滿整個容器，所以會讓圖片鋪滿整個容器）

３   Background-repeat:是否平鋪

作用：設定背景圖片是否平鋪。

取值：（no-repeat,repeat-x,repeat-y）

No-repeat:不重複。

Repeat-x:在x軸方向平鋪

Repest-y:在y軸方向平鋪

４   Background-position:背景圖片的位置。

取值：

４.1  方位名詞：

top :上   bottom:下  left:左 right: 右   center:中

兩類：

水平方向：left：左  center:中   right: 右

垂直方向：top:  上  center: 中  bottom:下

４.2  具體的畫素：

兩個方向：水平方向，垂直方向

５   連寫方式：

background:basckground-color background-image background-repeat background-postion;

六.  元素的顯示方式：

１   塊級元素：

特點：單獨佔一行，可以給這個元素設定寬高。

display(顯示方式):block;

所屬標籤：div,p,h1,ul,li,ol,dl

２   行內元素：

特點：可以多個標籤放在同一行，但是給標籤設定寬高沒有作用。

display(顯示方式):inline;

所屬標籤：

span,b,u,i,s,ins,del,strong,em

３   行內塊級元素：

特點：可以多個標籤放在同一行，並且可以標籤設定寬高。

display(顯示方式):inline-block;

img

４   元素顯示方式的轉換：

只需要修改display屬性就可以了。