一、來曆
我們知道，從HTML誕生開始，樣式就以各種各樣的形式存在并修飾網頁内容資訊。CSS未出現時，我們會用各種屬性來對HTML中的元素進行樣式修飾，随着HTML的快速發展，慢慢的出現了很多的弊端：1.相同的屬性設定，可能使用的是不同的屬性來完成的。2.相同的操作，要重複寫，可維護性和可重用性較低。而CSS的出現正是解決了這些弊端，并且使web程式設計變得更加高效和可重複。
CSS（Cascading Style Sheets）——層疊樣式表，為HTML标記語言提供了一種樣式描述，定義了其中元素的顯示方式，（css與HTML不能分家）
二、CSS語言特點
1、繼承性（有層級關系的元素）
大部分的CSS效果是可以直接繼承給子元素的
2、層疊性
可以為一個元素定義多個樣式規則，規則中的屬性不沖突時，可以同時都應用到目前元素上。
3、優先級
在層疊性基礎上，如果樣式聲明沖突的話。則按照預設的優先級去應用樣式
由低到高：浏覽器的預設設定——樣式表（後定義着優先）——内斂方式
4、！important原則
顯示調整樣式屬性優先級
樣式屬性：值 ！important； （！important加在誰的後面，就以誰為主）
5、多頁面應用
CSS樣式表可以單獨存放在一個CSS檔案中，這樣我們就可以在多個頁面中使用同一個CSS樣式表。CSS樣式表理論上不屬于任何頁面檔案，在任何頁面檔案中都可以将其引用。這樣就可以實作多個頁面風格的統一。
三、CSS文法規範
1、使用css樣式表方式
内斂方式——又稱行内樣式、内聯樣式
特點：将CSS内容定義在HTML标記中
文法：<ANY style=“樣式聲明1；樣式聲明2；。 … …”>
樣式聲明：
1》由樣式屬性名 以及 值來組成
2》屬性名 與 值 之間使用 ：做連結
3》多個樣式聲明之間用 ； 做分隔 （最後一個可以不用）
常用的樣式屬性和值
1》設定文本顔色的屬性和值
屬性：color
值：合法的顔色值（英文）
Ex：color：red
2》設定背景顔色的屬性和值
屬性：backGround
值：合法的顔色值（英文）
3》設定文字大小的屬性和值
屬性：font—size
值：以px或pt為機關的數值
Ex ：color：red
内部樣式表——在網頁中的一個獨立的地方聲明 網頁要用到的所有的樣式
文法：
<head>
<style>
/* 注釋*/
樣式規則一
樣式規則二
樣式規則。。。
</style>
</head>
樣式聲明：明确樣式規則裡面内容是什麼。
選擇器：規範了頁面中那些元素能夠使用聲明好的樣式，其實就是為了比對頁面中的元素。
樣式規則：由 選擇器 和 樣式聲明 組成。（說明可以試用在誰的身上）
樣式規則文法：
選擇器{
樣式聲明1；
樣式聲明2；
}
例如：
Div{
Color:red;
Background:yellow;
Font-size:16px;
}
外部樣式表——在獨立于任何網頁的位置處，聲明一個樣式表檔案（.css),在檔案中聲明樣式，在使用的網頁中進行引入。
使用步驟：
1.建立樣式表檔案，并編寫樣式
在xxx.css 檔案中編寫樣式規則
2.在使用的網頁上對樣式表檔案進行引入
<head>
<link rel="stylesheet" href="xxx.css" target="_blank" rel="external nofollow" />
</head>
2、CSS選擇器
選擇器作用：
規範了頁面中那些元素能夠使用聲明好的樣式，其實就是為了比對頁面中的元素。
選擇器類型：
通用選擇器
作用：可以與頁面上的任意元素相比對
文法：*{樣式聲明}
ex：
*{
font-size：12px；
color：red；
}
元素選擇器
作用：設定頁面上某種元素的預設樣式
文法：标記{樣式聲明}
ex：
H3{color：red；}
類選擇器
作用：定義頁面上某個或某些元素的樣式
特點：通過元素的class屬性進行引用的選擇器
文法：
. 類名{樣式聲明}
注意： 點不能省。類名不能以數字開頭。由英文，-，_來組成
引用：＜ANY class=“類名”>
特殊用法：
1.分類選擇器的定義方式，類選擇器和元素選擇器結合使用
文法：元素選擇器 . 類選擇器{}
ex：div.text{} 定義class為text的div元素的樣式。
2.多類選擇器的引用方式
讓元素應用多個類選擇器
文法：
id選擇器
作用：與id屬性聯用，為了設定指定id元素的樣式（專屬定制）
文法：#ID值{…}
群組選擇器
作用：将多個選擇器放在一起進行樣式的聲明定義
文法：選擇器1，選擇器2，選擇器3，…{…}
後代選擇器
作用:通過元素的後代關系比對元素
文法: 選擇器1 選擇器2{}
子代選擇器
作用:通過元素的子代(一層的層級關系)關系比對元素
文法:選擇器1>選擇器2{}
僞類選擇器
作用:為了比對元素不同的狀态的選擇器
文法: 所有的僞類都是以 : 為開始的
選擇器 : 僞類選擇器{…}
| 僞類 | 标記 | 說明 | 舉例 |
|---|---|---|---|
| 連結僞類 | : link | 比對元素尚未被通路時候的狀态 | a : link |
| 連結僞類 | : visited | 比對元素通路過的狀态 | a:visited |
| 動态僞類 | : hover | 比對滑鼠懸停在元素上時的效果 | |
| 動态僞類 | : active | 比對元素被激活時的狀态 | |
| 動态僞類 | :focus | 比對元素擷取焦點時的狀态 |
選擇器級别
沒有自定義的樣式看繼承，有自定義的直接看自定義 群組選擇器的權值不累加
![CSS的僞元素和僞類的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)