　　好程式設計師web 前端培訓分享 HTMLCSS 學習之 CSS 基礎， CSS(cascading style sheet) 漢譯為層疊樣式表 , 是用於控制網頁樣式
WEB 標準中的表現標準語言 , 在網頁中主要對網頁資訊的顯示進行控制。
目前推薦遵循的是W3C 釋出的 CSS3.0 版本；
用來表現HTML 或者 XHTML 等樣式檔案的計算機語言。
1998 年 5 月 21 日由 w3C 正式推出的 css2.0

　　 HTML + CSS ，彌補html 語言的不足
縮減頁面程式碼，提高訪問速度;
程式碼減少，頁面檔案就會小，佔用網路頻寬就少，客戶端開啟速度就快，使用者體驗就會更好
結構清晰，有利於seo 最佳化
有利於搜尋引擎最佳化
縮短改版時間
對網站的重構有很好的支援

　　 CSS 語法， CSS 語法由兩部分組成：選擇符、宣告。
宣告包括：屬性和屬性值
選擇符 { 屬性 : 屬性值 ; 屬性 : 屬性值 }
選擇符說明：CSS 選擇符（選擇器）
選擇符表示要定義樣式的物件( 標籤名字 ) ，可以是元素本身，也可以是一類元素或者制定名稱的元素 , 簡單來說就是給對應的元素起個名稱。
1 ）每個 CSS 樣式由兩部分組成，即選擇符和宣告，宣告又分為屬性和屬性值；
2 ）屬性必須放在花括號中，屬性與屬性值用冒號連線。
3 ）每條宣告用分號結束。
4 ）當一個屬性有多個屬性值的時候，屬性值與屬性值不分先後順序 , 用空格隔開。
5 ）在書寫樣式過程中，空格、換行等操作不影響屬性顯示。

CSS樣式表

1:內部樣式表

語法：
<style type="text/css">
css語句
</style>
注：使用style標記建立樣式時，最好將該標記寫在<head></head>;

2:外部樣式

(1) 語法： <link rel="stylesheet" type="text/css" href="目標檔案的路徑及檔名全稱" />
說明： 使用link元素匯入外部樣式表時，需將該元素寫在文件頭部，即<head>與</head>之間。
rel：用於定義文件關聯，表示關聯樣式表；
type：定義文件型別；
(2)、匯入外部樣式表
<style type="text/css">
@import url("目標檔案的路徑及檔名全稱");
</style>
說明：@和import之間沒有空格 url和小括號之間也沒有空格；括號內部加引號，必須結尾以分號結束；

link @import區別

差別1： 老祖宗的差別：link屬於XHTML標籤，而@import完全是CSS提供的一種方式。 link標籤除了可以載入CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連線屬性等，@import就只能載入CSS。
差別2： 載入順序的差別：當一個頁面被載入的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被載入，而@import引用的CSS 會等到頁面全部被下載完再被載入。所以有時候瀏覽@import載入CSS的頁面時開始會沒有樣式。
差別3： 相容性的差別。：@import是CSS2.1提出的，所以老的瀏覽器不支援，@import只在IE5以上的才能識別，而link標籤無此問題。
差別4： 使用dom控制樣式時的差別：當使用javascript控制dom去改變樣式的時候，只能使用link標籤，因為@import不是dom可以控制的.

3:內聯樣式表

<標籤 style="屬性1:值1;屬性2:值2; ……"></標籤>

CSS樣式表的權重關係

1）內聯樣式表的優先順序別最高
2）內部樣式表與外部樣式表的優先順序和書寫的順序有關，後書寫的優先順序別高。
3）同在一個樣式表中的優先順序和書寫的順序也有關，後書寫的優先順序別高。(被覆蓋的只是相同屬性的樣式)

CSS選擇符

CSS基本選擇符：

型別選擇符、id選擇符、class選擇符(類選擇符)
Css選擇符分類 ：

型別選擇符（標記選擇器）
類選擇符（class選擇符）
ID選擇符（id選擇器）
偽類選擇器
萬用字元（*）設定全域性屬性
群組選擇符（集合選擇器）
包含選擇符（後代選擇器）
屬性選擇符
偽物件選擇符

型別選擇符

型別選擇符是根據html語言中的標記來直接定義
語法： 標籤名稱 {屬性：屬性值；}
a)型別選擇符就是以文件物件html中的標籤作為選擇符，即使用結構中元素名稱作為選擇符。例如body、div、p,img,em,strong,span......等。
b)所有的頁面元素都可以作為選擇符;
用法：
（1）如果想改變某個元素的預設樣式時，可以使用型別選擇符；（如：改變一個p段落樣式）
（2）當統一文件某個元素的顯示效果時，可以使用型別選擇符；（如：改變文件所有p段落樣式）

類（class）選擇符

語法： .class名{屬性：屬性值;}

用法： class選擇符更適合定義一類樣式；
(1)當我們使用類選擇符時，應先為每個元素定義一個類名稱，
(2)類選擇符的語法格式：
如：<div></div>
.top{屬性:屬性值;}

ID選擇符

語法： <標籤 id=“名”></標籤>
#id名{屬性：屬性值;}
（1）可以給每個元素使用id選擇符，但id是元素的唯一識別符號，不可出現重複的id名；
如：<div id="top"></div>
（2）id選擇符的語法格式是“#”加上自定義的id名
如：#box{width:300px; height:300px;}
（3）起名時要取英文名，不能用關鍵字：(所有的標記和屬性都是關鍵字)
如：div標記
（4）一個id名稱只能在文件中出現一次，因為id是唯一的
（5）最大的用處：建立網頁的外圍結構。(唯一性、起名字不能使用關鍵字)

偽類選擇器

a:link {color: red;} /* 未訪問的連結狀態 */
a:visited {color: green;} /* 已訪問的連結狀態 */
a:hover {color: blue;} /* 滑鼠滑過連結狀態 */
a:active {color: yellow;} /* 滑鼠按下去時的狀態 /
說明：
1）當這4個超連結偽類選擇符聯合使用時，應注意他們的順序，正常順序為：
a，a:link,a:visited,a:hover,a:active,錯誤的順序有時會使超連結的樣式失效；
2）為了簡化程式碼，可以把偽類選擇符中相同的宣告提出來放在a選擇符中；
例如：a{color:red;} a:hover{color:green;}
表示超連結的三種狀態都相同，只有滑鼠劃過變化顏色

萬用字元

語法：*{屬性：屬性值;}
說明：通配選擇符的寫法是“*”，其含義就是所有標籤；
表示該樣式適用所有網頁元素；
用法：常用來重置樣式。
例：*{margin:0;padding:0;}

群組選擇符

語法：選擇符1，……，選擇符5 {屬性：屬性值;}

說明：當有多個選擇符應用相同的樣式時，可以將選擇符用“，”分隔的方式，合併為一組。

例項：.top, #nav, p{width:100px;}

包含選擇器（後代選擇器）

語法：選擇符1(父) 選擇符2（後代）{屬性：屬性值;}
選擇符父級選擇符子級{屬性：屬性值;}
說明：選擇符1和選擇符2用空格隔開，含義就是選擇符1中包含的所有選擇符2;
例項： div ul li{height:200px;}

選擇符權重

css中用四位數字表示權重，
權重的表達方式如：0，0，0，0；
權重規則：HTML標籤(型別選擇符)的權重是1，class的權重是10，id的權重是100。
型別選擇符的權重為0001
class選擇符的權重為0010
id選擇符的權重為0100
屬性選擇符的權重為0010
偽類選擇符的權重為0010
偽元素（物件）選擇符的權重為0001
包含選擇符的權重：為包含選擇符的權重之和
內聯樣式的權重為1000
繼承樣式的權重為0000
群組集合選擇符權重為他本身
注：如果權重相同時，則執行後寫的樣式；

css層疊性

css層疊指的是樣式的優先順序，當產生衝突時以優先順序高的為準。
1. 開發者樣式>讀者樣式>瀏覽器樣式（除非使用!important標記）
2. id選擇符>（偽）類選擇符>元素選擇符
3. 權重相同時取後面定義的樣式

好程式設計師web前端培訓分享HTMLCSS學習之CSS基礎