上一章里我們已經(jīng)提到樣式表的層疊順序，這里我們討論插入樣式表的這幾種方法的疊加，假如在同一個(gè)選擇器上使用幾個(gè)不同的樣式表時(shí)，這個(gè)屬性值將會(huì)疊加幾個(gè)樣式表，碰到?jīng)_突的地方會(huì)以最后定義的為準(zhǔn)。例如，我們首先鏈入一個(gè)外部樣式表，其中定義了h3選擇符的color 、text-alig和font-size屬性：
h3
{
color: red;
text-align: left;
font-size: 8pt
}
（標(biāo)題3的文字顏色為紅色；向左對(duì)齊；文字尺寸為8號(hào)字）
然后在內(nèi)部樣式表里也定義了h3選擇符的text-align和font-size屬性：
h3
{
text-align: right;
font-size: 20pt
}
（標(biāo)題3文字向右對(duì)齊；尺寸為20號(hào)字）
那么這個(gè)頁(yè)面疊加后的樣式就是：
color: red;
text-align: right;
font-size: 20pt
（文字顏色為紅色；向右對(duì)齊；尺寸為20號(hào)字）
字體顏色從外部樣式表里保留下來(lái)，而對(duì)齊方式和字體尺寸都有定義時(shí)，按照后定義的優(yōu)先而依照內(nèi)部樣式表。
注重：依照后定義的優(yōu)先，所以?xún)?yōu)先級(jí)最高的是內(nèi)嵌樣式，內(nèi)部樣式表高于導(dǎo)入外部樣式表，鏈入的外部樣式表和內(nèi)部樣式表之間是最后定義的優(yōu)先級(jí)高。

五、簡(jiǎn)單介紹CSS結(jié)合JS的運(yùn)用（針對(duì)事件動(dòng)作）

利用CSS配合Javascript的可以做很多更酷的動(dòng)態(tài)頁(yè)面效果，在本教程的最后給大家簡(jiǎn)單介紹一下CSS配合JS的應(yīng)用。首先，我們要搞清楚事件和動(dòng)作的概念。在客戶(hù)端腳本中，JavaScript 通過(guò)對(duì)事件進(jìn)行響應(yīng)來(lái)獲得與用戶(hù)的交互。例如，當(dāng)用戶(hù)單擊一個(gè)按鈕或者在某段文字上移動(dòng)鼠標(biāo)時(shí)，就觸發(fā)了一個(gè)單擊事件或鼠標(biāo)移動(dòng)事件，通過(guò)對(duì)這些事件的響應(yīng)，可以完成特定的功能（例如，單擊按鈕彈出對(duì)話(huà)框，鼠標(biāo)移動(dòng)到文本上后文本變色等）。

下面介紹幾種常見(jiàn)的事件（還用更多事件，請(qǐng)查閱相關(guān)資料）：

onClick：鼠標(biāo)單擊事件。（是指鼠標(biāo)按下，然后松開(kāi)時(shí)產(chǎn)生。）

onDblClick：鼠標(biāo)雙擊事件。（是指鼠標(biāo)快速按下，松開(kāi)，并再次按下時(shí)產(chǎn)生。）

onMouseDown：鼠標(biāo)按下事件。（鼠標(biāo)按下時(shí)即產(chǎn)生。）

onMouseUp：鼠標(biāo)釋放事件。（是指鼠標(biāo)從按下的狀態(tài)到彈起。）

onMouseMove：鼠標(biāo)移動(dòng)事件。（是指在特定元素上移動(dòng)鼠標(biāo)。）

onMouseOver：鼠標(biāo)經(jīng)過(guò)事件。（是指，當(dāng)指針從外界往元素上移動(dòng)時(shí)產(chǎn)生。）

onMouseOut：鼠標(biāo)離開(kāi)事件。（是指鼠標(biāo)從特定元素上離開(kāi)時(shí)產(chǎn)生。）

onLoad：載入事件。（當(dāng)圖象或頁(yè)面結(jié)束載入時(shí)產(chǎn)生。）

onUnload：卸載事件。（當(dāng)訪(fǎng)問(wèn)者離開(kāi)頁(yè)面時(shí)產(chǎn)生。）

onScroll：滾動(dòng)條滾動(dòng)事件。（當(dāng)訪(fǎng)問(wèn)者使用卷軸上移或下移時(shí)產(chǎn)生。）

有了事件以后，我們就為事件加上動(dòng)作。這里只說(shuō)改變當(dāng)前元素自定義樣式的動(dòng)作，我們可以用這個(gè)方法先設(shè)定好兩個(gè)自定義的CSS樣式，對(duì)象原先調(diào)用第一種樣式，當(dāng)產(chǎn)生鼠標(biāo)事件時(shí)讓對(duì)象應(yīng)用到第二種CSS樣式，而產(chǎn)生的鼠標(biāo)效果。

查看更多 動(dòng)易Cms教程  動(dòng)易Cms模板