.1 CSS的定義

CSS通常稱為CSS樣式表或層疊樣式表，主要用于設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形(寬高、邊框樣式、邊距等）以及版面的布局等 外觀顯示樣式。

CSS以HTML為基礎，提供豐富的功能，如字體、顏色、背景的控制及整體排版，而且還可以針對不同的瀏覽器設置不同的樣式。

CSS就是控制頁面布局和樣式

HTML和CSS的關系

HTML 結構層 負責從語義的角度搭建頁面的結構。

CSS樣式層 負責從審美的角度美化頁面

JavaScript 行為層 ?負責從交互的角度提升用戶體驗。

1.2 引入CSS的方式

1.2.1 行內樣式

? ?行內樣式，是通過在標簽中設置style屬性達到實現控制標簽的樣式的效果，style屬性中，可以設置多條的CSS樣式

1.2.2 內嵌樣式

? 內嵌樣式是在head標簽中添加style標簽，

1.2.3 外聯樣式

外聯樣式，通過link標簽收入css樣式文件

rel：指定當前HTML文件與CSS文件的關系是樣式表。href：指定外聯樣式表的路徑

2.CSS的注釋：

?CSS的注釋格式： /* 注釋內容*/

可以同時注釋多行語句比如：/* 注釋內容

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?多行注釋內容

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 多行注釋內容?*/

3.CSS選擇器

?所有標簽選擇器 ? ?* {}

?標簽選擇器 ?p {}div {}

?ID選擇器 ? #head {} #是ID選擇器的標識，是當前頁面中唯一值的標簽。在一個頁面中是唯一的值。

?類選擇器 ?.head {} 是對HTML標簽中的class屬性進行選擇，類選擇器的選擇符是 ? ?“.”標簽可以包含多個類選擇器，在class標簽中用空格隔開

選擇器和class選擇器的區別

1、相同的Class屬性值，可以在HTML中出現多次。ID屬性值在頁面中只能出現一次。

2、一個class的屬性可以有多個值，也就是說一個標簽可以有多個類

在確定當前頁面呢只出現一次的用ID選擇器，否則用類選擇器。

3.1通配符選擇器

通配符選擇器用“*”號表示，他是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素。其基本語法格式如下：

*{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

3.2 ?ID選擇器的命名規范

3.3 ?復合選擇器：標簽指定式選擇器

標簽指定式復合選擇器，要求必須是標簽開頭然后其他選擇器。

比如：h3.demo {} ,需要同時滿足既是標簽h3又擁有demo類才能被選擇到

3.4 ? 后代選擇器

后代選擇器用來選擇元素或元素組的后代，其寫法就是把外層標記寫在前面，內層標記寫在后面，中間用空格分隔。當標記發生嵌套時，內層標記就成為外層標記的后代。

3.5 ?并集選擇器標簽

語法：h1,h2,h3,{ color:red; }

3.6 子元素選擇器

? ? 是讓CSS選擇器智能選擇兒子輩的元素。

3.6 ?屬性選擇器：

? ? ? 使用的非常少 ?hi[ ]

3.7 偽類選擇器

：link ?偽類將應用于未被訪問過的鏈接。IE6不兼容，解決此問題，直接使用a標簽。

?:visited偽類將應用于已經被訪問過的鏈接

?:hover ?偽類將應用于有鼠標指針懸停于其上的元素。在IE6只能應用于a連接，IE7+所有元素都兼容。

?:active? 偽類將應用于被激活的元素，如被點擊的鏈接、被按下的按鈕等。

?:focus?偽類將應用于擁有鍵盤輸入焦點的元素。

順序問題：LoVeHAte原則。

3.8 ?偽元素選擇器

? ? ? ? 偽元素 是控制內容

? ? ? ?:first-line 偽元素

? ? ? ? :first-letter 偽元素

? ? ? ? 注釋：以上兩個偽元素只能用于塊級元素

? ? ? ?:first-child 偽元素，選擇屬于第一個子元素的元素。

? ? ? ? :before與:after偽元素，可以設置元素之前后之后的內容

4、CSS層疊性和繼承性

? 4.1、層疊性? ：所謂層疊性是指多種CSS樣式的疊加。

? 4.2、繼承性（子承父業）：CSS的繼承性是指，子容器的樣式會繼承父容器的樣式。但并不是所有的樣式都能繼承。只有部分樣式能繼承，比如：文字相關字體大小、顏色、字體樣式、行高、鼠標樣式等。盒子相關的樣式都不能繼承，比如：寬高、背景色、邊距、浮動、絕對定位等。

5 ?CSS的優先級：