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

五、簡單介紹CSS結(jié)合JS的運用（針對事件動作）

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

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

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

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

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

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

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

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

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

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

onUnload：卸載事件。（當(dāng)訪問者離開頁面時產(chǎn)生。）

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

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

查看更多 動易Cms教程  動易Cms模板