一、CSS的定義方式

1.內部樣式：<style></style>

2.行間樣式：<div style="width:100px;height:100px;">

3.外部樣式：<link rel="stylesheet" type="text/css" href="地址" >

注：瀏覽器非同步載入html、css、js檔案

二、CSS選擇器

1.常用選擇器：類選擇器、id選擇器、標籤選擇器、萬用字元選擇器

/*類選擇器*/
/*假設頁面有一個或多個同類名元素，且該類元素有一些共同的樣式特性。當然通常我們的設計邏輯是有這樣一些共同特性元素的需求，預先設計編寫一組樣式表，用來描述具備特定需求的元素。*/
/*假設有需求是有一些元素的寬高為100px,內邊距和外邊距為0，文字內容，文字溢位部分被剪下*/
.exa{
    width: 100px;
    height: 100px;
    margin:0 auto;
    padding: 0 auto;
    text-align
 
: center;
    line-height: 100px;
    overflow: hidden;
}

標籤選擇器與類選擇器的使用邏輯非常相似，就是用來描述頁面同一類標籤的元素的樣式。類選擇器使用程式設計師自己在元素屬性上定義的class屬性值來選定（.類名），點加類名的方式來設定。而標籤選擇器直接使用標籤名即可。

id選擇器就是使用元素上定義的id屬性值來設定，在di屬性值前面加上井號“#”就可以實現，設定的特定的一個元素的樣式。實際開發中並不建議使用id選擇器來設定樣式表，根據專案和開發手冊要求來定。

萬用字元使用的應該是最少的一種，出現在常用名單裡的原因是我們每個樣式表的第一行都是用星號“*”,即萬用字元來去除元素原本的預設樣式，如元素的預設邊距、列表標籤的預設序列號、超連結元素的預設字型顏色和下劃線、統一全域性字型大小和字型及顏色等一系列應用。

2.父子選擇器/派生選擇器

基於標籤選擇器、類選擇器、id選擇器的父子關係進行篩選需要匹配的元素，每級條件用空格間隔。

/*比如有需求是：找到頁面中id為“showcase”的div下，所有有序列表的列表項內的img元素中，設定樣式為寬300px，高200px，內外邊距為0畫素,超出部分隱藏*/
div #showcase ul li img{
    margin: 0 auto;
    padding: 0 auto;
    width: 100px;
    height: 100px;
    overflow: hidden;
}

3並列選擇器

這個選擇器也是基於標籤選擇器、類選擇器、id選擇器來實現的，通過基礎選擇器組合，有別於父子選擇器的是並列選擇器的每個基礎選擇器之間不加空格。

/*例如有需求是：有一類元素是div並且都有類名是showcase和primary的樣式是，寬高249px；內外邊距為0，邊框1畫素藍色*/
div.showcase.primary{
    width: 249px;
    height: 249px;
    padding: 0 auto;
    margin: 0 auto;
    border: 1px solid blue;
}

4.直接子元素選擇器

是在父子選擇器的基礎上演變而來的一個選擇器，比如要找到一個div元素下的子元素em，但是在其他子元素下面還有em，所以就不能使用div em的父子選擇器來實現了，這時候就可以採用直接子元素選擇器div > em，在父子選擇器的基礎上新增一個大於號，中間可以加空格也可以不加空格。這樣就是可以實現匹配一個元素下的子元素，而不會影響到其他後代元素。

5屬性選擇器

 在通常的情況下我們使用類名作為選擇器或者id選擇器其本質都是屬性選擇器，所謂的屬性選擇器就是使用元素的屬性和屬性值作為匹配條件。

語法：[屬性值=屬性值]

屬性值的型別與元素上的一致，不需要發生改變。

/*比如有需求是找到img元素的圖片名稱是figure的元素，並設定寬300px，高250px，超出部分隱藏*/
img[src*="figure"]{
    width: 300px;
    height: 250px;
    overflow: hidden;
}

注意留意中間出現的一個符號“*”，在屬性選擇器中還存在^、$、~、|四個特殊的符號。

星號（*）表示在屬性值中出現了指定的字串。

（^）表示在屬性值內有以指定字串開頭的屬性值。

（$）表示在屬性值內有以指定字串結尾的屬性值。

（~）表示在屬性值內有指定的屬性值。

（|）表示在屬性值整個以指定的字串開頭。

[class="aaa bbb ccc"]{...}
/*(^)匹配屬性值內有指定的字元開頭的屬性*/
[class^="a"]{...}
[class^="b"]{...}
[class^="c"]{...}
/*(|)匹配屬性值以指定的字串開頭*/
[class|="a"]{...}
[class|="aa"]{...}
[class|="aaa b"]{...}
...

6.分組選擇器

分組選擇器就是同時有多個選擇器同時匹配一個樣式列表，使用逗號間隔。

.exa,div #showcase ul li img,div.showcase.primary,img[src*="figure"]{...}

7.偽類選擇器

通過指定偽類設定元素樣式，偽類即為不需設定就存在的類，css語法自有的類。在一定程度上解決了行為特性的需求。

 三、偽元素

1.在一個標籤內，內容前後隱式的存在邏輯上的兩個元素，內容的邏輯前是：before，內容的邏輯後是：after

2.在css中選取偽元素的語法：標籤名::before/after

3.偽元素中的content樣式屬性可以設定偽元素的內容，這個樣式只存在偽元素中，必須寫content才能生效（content:"";）

4.偽元素是行級元素

偽元素是由HTML語法給每一個標籤內建的虛擬但真實存在的元素，這裡的屬性其實質是虛擬標籤的class值

四、css樣式權重

!important        infinity     正無窮     寫在樣式後面

行間樣式          1000

id                      100

class|屬性|偽類  10

標籤 | 偽元素      1

萬用字元                0

注：計算機的：正無窮+1 > 正無窮

權重數值採用的256進位制計算。

css複合樣式的權重採用權重值相加，誰的權重值的和大使用誰。