CSS基礎(chǔ)

　　CSS(cascading style sheet) 漢譯為層疊樣式表,是用于控制網(wǎng)頁(yè)樣式

　　WEB標(biāo)準(zhǔn)中的表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言,在網(wǎng)頁(yè)中主要對(duì)網(wǎng)頁(yè)信息的顯示進(jìn)行控制。

　　目前推薦遵循的是W3C發(fā)布的CSS3.0版本;

　　用來(lái)表現(xiàn)HTML或者XHTML等樣式文件的計(jì)算機(jī)語(yǔ)言。

　　1998年5月21日由w3C正式推出的css2.0

　　HTML + CSS

　　彌補(bǔ)html語(yǔ)言的不足

　　縮減頁(yè)面代碼，提高訪問(wèn)速度;

　　代碼減少，頁(yè)面文件就會(huì)小，占用網(wǎng)絡(luò)帶寬就少，客戶端打開(kāi)速度就快，用戶體驗(yàn)就會(huì)更好

　　結(jié)構(gòu)清晰，有利于seo優(yōu)化

　　有利于搜索引擎優(yōu)化

　　縮短改版時(shí)間

　　對(duì)網(wǎng)站的重構(gòu)有很好的支持

　　CSS語(yǔ)法

　　CSS語(yǔ)法由兩部分組成：選擇符、聲明。

　　聲明包括：屬性和屬性值

　　選擇符 {屬性: 屬性值 ;屬性:屬性值}

　　選擇符說(shuō)明：CSS選擇符(選擇器)

　　選擇符表示要定義樣式的對(duì)象(標(biāo)簽名字)，可以是元素本身，也可以是一類(lèi)元素或者制定名稱(chēng)的元素,簡(jiǎn)單來(lái)說(shuō)就是給對(duì)應(yīng)的元素起個(gè)名稱(chēng)。

　　1)每個(gè)CSS樣式由兩部分組成，即選擇符和聲明，聲明又分為屬性和屬性值;

　　2)屬性必須放在花括號(hào)中，屬性與屬性值用冒號(hào)連接。

　　3)每條聲明用分號(hào)結(jié)束。

　　4)當(dāng)一個(gè)屬性有多個(gè)屬性值的時(shí)候，屬性值與屬性值不分先后順序,用空格隔開(kāi)。

　　5)在書(shū)寫(xiě)樣式過(guò)程中，空格、換行等操作不影響屬性顯示。

　　CSS樣式表

　　1:內(nèi)部樣式表

　　語(yǔ)法：

　　2:外部樣式

　　link @import區(qū)別

　　差別1：老祖宗的差別：link屬于XHTML標(biāo)簽，而@import完全是CSS提供的一種方式。 link標(biāo)簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS。

　　差別2：加載順序的差別：當(dāng)一個(gè)頁(yè)面被加載的時(shí)候(就是被瀏覽者瀏覽的時(shí)候)，link引用的CSS會(huì)同時(shí)被加載，而@import引用的CSS 會(huì)等到頁(yè)面全部被下載完再被加載。所以有時(shí)候?yàn)g覽@import加載CSS的頁(yè)面時(shí)開(kāi)始會(huì)沒(méi)有樣式。

　　差別3：兼容性的差別。：@import是CSS2.1提出的，所以老的瀏覽器不支持，@import只在IE5以上的才能識(shí)別，而link標(biāo)簽無(wú)此問(wèn)題。

　　差別4：使用dom控制樣式時(shí)的差別：當(dāng)使用javascript控制dom去改變樣式的時(shí)候，只能使用link標(biāo)簽，因?yàn)锧import不是dom可以控制的.

　　3:內(nèi)聯(lián)樣式表

　　CSS樣式表的權(quán)重關(guān)系

　　1)內(nèi)聯(lián)樣式表的優(yōu)先級(jí)別最高

　　2)內(nèi)部樣式表與外部樣式表的優(yōu)先級(jí)和書(shū)寫(xiě)的順序有關(guān)，后書(shū)寫(xiě)的優(yōu)先級(jí)別高。

　　3)同在一個(gè)樣式表中的優(yōu)先級(jí)和書(shū)寫(xiě)的順序也有關(guān)，后書(shū)寫(xiě)的優(yōu)先級(jí)別高。(被覆蓋的只是相同屬性的樣式)

　　CSS選擇符

　　CSS基本選擇符：

　　類(lèi)型選擇符、id選擇符、class選擇符(類(lèi)選擇符)

　　Css選擇符分類(lèi)：

　　類(lèi)型選擇符(標(biāo)記選擇器)

　　類(lèi)選擇符 (class選擇符)

　　ID選擇符 (id選擇器)

　　偽類(lèi)選擇器

　　通配符(*)設(shè)置全局屬性

　　群組選擇符(集合選擇器)

　　包含選擇符(后代選擇器)

　　屬性選擇符

　　偽對(duì)象選擇符

　　類(lèi)型選擇符

　　類(lèi)型選擇符是根據(jù)html語(yǔ)言中的標(biāo)記來(lái)直接定義

　　語(yǔ)法：標(biāo)簽名稱(chēng) {屬性：屬性值;}

　　a)類(lèi)型選擇符就是以文檔對(duì)象html中的標(biāo)簽作為選擇符，即使用結(jié)構(gòu)中元素名稱(chēng)作為選擇符。例如body、div、p,img,em,strong,span......等。

　　b)所有的頁(yè)面元素都可以作為選擇符;

　　用法：

　　(1)如果想改變某個(gè)元素的默認(rèn)樣式時(shí)，可以使用類(lèi)型選擇符;(如：改變一個(gè)p段落樣式)

　　(2)當(dāng)統(tǒng)一文檔某個(gè)元素的顯示效果時(shí)，可以使用類(lèi)型選擇符;(如：改變文檔所有p段落樣式)

　　類(lèi)(class)選擇符

　　語(yǔ)法 ： .class名{屬性：屬性值;}

　　用法：class選擇符更適合定義一類(lèi)樣式;

　　(1)當(dāng)我們使用類(lèi)選擇符時(shí)，應(yīng)先為每個(gè)元素定義一個(gè)類(lèi)名稱(chēng)，

　　(2)類(lèi)選擇符的語(yǔ)法格式：

　　如：

　　ID選擇符

　　(3)起名時(shí)要取英文名，不能用關(guān)鍵字：(所有的標(biāo)記和屬性都是關(guān)鍵字)

　　如：div標(biāo)記

　　(4)一個(gè)id名稱(chēng)只能在文檔中出現(xiàn)一次，因?yàn)閕d是唯一的

　　(5)最大的用處：創(chuàng)建網(wǎng)頁(yè)的外圍結(jié)構(gòu)。(唯一性、起名字不能使用關(guān)鍵字)

　　偽類(lèi)選擇器

　　a:link {color: red;} /* 未訪問(wèn)的鏈接狀態(tài) */

　　a:visited {color: green;} /* 已訪問(wèn)的鏈接狀態(tài) */

　　a:hover {color: blue;} /* 鼠標(biāo)滑過(guò)鏈接狀態(tài) */

　　a:active {color: yellow;} /* 鼠標(biāo)按下去時(shí)的狀態(tài) /

　　說(shuō)明：

　　1)當(dāng)這4個(gè)超鏈接偽類(lèi)選擇符聯(lián)合使用時(shí)，應(yīng)注意他們的順序，正常順序?yàn)椋?/p>

　　a，a:link,a:visited,a:hover,a:active,錯(cuò)誤的順序有時(shí)會(huì)使超鏈接的樣式失效;

　　2)為了簡(jiǎn)化代碼，可以把偽類(lèi)選擇符中相同 的聲明提出來(lái)放在a選擇符中;

　　例如：a{color:red;} a:hover{color:green;}

　　表示超鏈接的三種狀態(tài)都相同，只有鼠標(biāo)劃過(guò)變化顏色

　　通配符

　　語(yǔ)法：*{屬性：屬性值;}

　　說(shuō)明：通配選擇符的寫(xiě)法是“*”，其含義就是所有標(biāo)簽;

　　表示該樣式適用所有網(wǎng)頁(yè)元素;

　　用法：常用來(lái)重置樣式。

　　例：*{margin:0;padding:0;}

　　群組選擇符

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

　　說(shuō)明：當(dāng)有多個(gè)選擇符應(yīng)用相同的樣式時(shí)，可以將選擇符用“，”分隔的方式，合并為一組。

　　實(shí)例：.top, #nav, p{width:100px;}

　　包含選擇器(后代選擇器)

　　語(yǔ)法：選擇符1(父) 選擇符2(后代){屬性：屬性值;}

　　選擇符父級(jí) 選擇符子級(jí){屬性：屬性值;}

　　說(shuō)明：選擇符1和選擇符2用空格隔開(kāi)，含義就是選擇符1中包含的所有選擇符2;

　　實(shí)例： div ul li{height:200px;}

　　選擇符權(quán)重

　　css中用四位數(shù)字表示權(quán)重，

　　權(quán)重的表達(dá)方式如：0，0，0，0;

　　權(quán)重規(guī)則：HTML標(biāo)簽(類(lèi)型選擇符)的權(quán)重是1，class的權(quán)重是10，id的權(quán)重是100。

　　類(lèi)型選擇符的權(quán)重為0001

　　class選擇符的權(quán)重為0010

　　id選擇符的權(quán)重為0100

　　屬性選擇符的權(quán)重為0010

　　偽類(lèi)選擇符的權(quán)重為0010

　　偽元素(對(duì)象)選擇符的權(quán)重為0001

　　包含選擇符的權(quán)重：為包含選擇符的權(quán)重之和

　　內(nèi)聯(lián)樣式的權(quán)重為1000

　　繼承樣式的權(quán)重為0000

　　群組集合選擇符權(quán)重為他本身

　　注：如果權(quán)重相同時(shí)，則執(zhí)行后寫(xiě)的樣式;

　　css層疊性

　　css層疊指的是樣式的優(yōu)先級(jí)，當(dāng)產(chǎn)生沖突時(shí)以?xún)?yōu)先級(jí)高的為準(zhǔn)。