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:內部樣式表

　　語法：

　　2:外部樣式

　　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:內聯樣式表

　　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)類選擇符的語法格式：

　　如：

　　ID選擇符

　　(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層疊指的是樣式的優先級，當產生沖突時以優先級高的為準。