CSS介紹

層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML(標準通用標記語言的一個應用)
或XML(便準通用標記語言的一個子集)等檔案樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配
合各種指令碼語言動態的對網頁各元素進行格式化。CSS能夠對網頁中元素位置的排版進行畫素級精確控制，
支援幾乎所有的字型號樣式，擁有對網頁物件模型樣式編輯的能力。

CSS基礎語法

css語法說明

每個CSS樣式由兩部分組成，即選擇符和宣告，而聲名又分為屬性和屬性值兩部分；
屬性需放在花括號中，屬性與屬性值用冒號隔開，每條宣告用分號結束；
當一個聲名中有多個屬性和屬性值時，屬性和屬性不分先後順序；
在書寫樣式的過程中，空格、換行等操作不影響顯示；
例如：idv{width:200px; height:200px; background:red;}

樣式的建立和使用方法

內部樣式表、外部樣式表和內聯樣式表

內部樣式表(巢狀到頁面中)
語法：

<style type="text/css">
    css語句
</style>

注：使用style標記建立樣式時，最好將該標記寫在內；

外部樣式表
外部樣式表的兩種方式
a.外部樣式表的建立
b.外部樣式表的匯入

方法一:
語法:
說明：使用link元素匯入外部樣式表時，需要將該元素寫在文件頭部，即內；
rel：用於定義文件關聯，表示關聯樣式表； type：定義文件型別；

方法二：
語法：

說明：@和import之間沒有空格，url和小括號之間也沒有空格；括號內加雙引號，結尾必須以分號結束；

link和import的區別
(1)來源不同：link屬於html標籤，而@import完全是CSS提供的一種方式。link標籤除了可以載入CSS外，還可以做很多其他的事情，比如定義RSS，定義rel連線屬性，@import只能載入CSS；
(2)載入順序：當一個網頁在載入時(就是被瀏覽者瀏覽的時候)，link引入的CSS會與html內容同時被載入，而@import引用的CSS會等到html內容全部載入完成再載入；這就導致頁面在一開始載入時丟失樣式，內容混亂；
(3)相容性：@import時CSS2.1提出的，所以老的瀏覽器不支援，@import只在IE5以上版本的瀏覽器才能識別，而link標籤沒有這個問題；
(4)dom控制樣式：當使用JavaScript控制dom去改變樣式時，只能使用link標籤來引用CSS，因為@import不支援dom的樣式控制方法；

內聯樣式表(錶行間樣式，內行樣式，嵌入式樣式)
語法：<標籤 style="屬性:屬性值;屬性:屬性值;"></標籤>
例如：

樣式表的優先順序
內聯樣式表在頁面中優先順序高於內部樣式表和外部樣式表;外部樣式表和內部樣式表的優先順序取決於兩者在頁面中書寫的先後順序；

CSS選擇器(選擇符)

選擇符的定義：
選擇符表示要定義的物件，可以是元素本身，也可以是一類元素或者制定名稱的元素。
常用的選擇符有十多種型別，id選擇符，class選擇符，萬用字元，群組選擇符，包含選擇符，偽類選擇符，偽物件選擇符。

元素選擇符/型別選擇符/標籤選擇符(element選擇器)

語法：元素名稱{屬性:屬性值;}
型別選擇符是根據html語言中的標記來直接定義

說明：
a.元素選擇符就是以文件語言物件型別作為選擇符，即使用結構中元素名稱作為選擇符；例如body、div、p、img、strong、span等。
b.所有的頁面元素都可以作為選擇符；
用法：
(1)如果想改變某個元素的預設樣式時，可以使用型別選擇符；(如：改變一個p段落樣式)
(2)當想要統一文件某個元素的顯示效果時，可以使用型別選擇符；(改變文件所有p段落樣式)

id選擇器

語法：#id名{屬性:屬性值;}
說明：
(1)當我們使用id選擇符時，應該為每個元素定義一個id屬性；如：

class選擇器

語法：.class名{屬性:屬性值;}
說明：
當我們使用型別選擇符時，應該先為每一個元素定義一個類名稱，類選擇符的語法格式如：

群組選擇器

語法：選擇符1,選擇符2,選擇符3....{屬性:屬性值;}
說明：當有多個選擇符應用相同的樣式時，可以將選擇符用","分隔的方式，合併為一組
例項：.top,#nav,p{width:100px;}

包含選擇器

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

萬用字元

語法：{屬性:屬性值;}
說明：通配選擇符的寫法是"",其含義是所有元素
用法：常用來重置樣式

偽類選擇器

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

常用於超連結

轉載符的權重

css中用四位數表示權重，權重的表達法方式如：0,0,0,0
型別選擇符的權重為0001 a p div span form ... 1
class選擇符的權重為0010 .class 10
id選擇符的權重為0100 # 100
子選擇符的權重為0000
屬性選擇符的權重為0010
偽類選擇符的權重為0010
偽元素選擇符的權重為0010
包含選擇符的權重：為包含選擇符的權重之和
內聯樣式的權重為1000
繼承樣式的權重為1000
注：如果權重相同時，則執行後寫的樣式；

html與css的註釋

html的註釋
css的註釋/--註釋的內容--/