color: black; /* 文字為黑色 */
font-family: arial /* 字體為arial */
}

三、偽類(lèi)——?jiǎng)討B(tài)鏈接

偽類(lèi)可以看做是一種非凡的類(lèi)選擇符，是能被支持CSS的瀏覽器自動(dòng)所識(shí)別的非凡選擇符。它的最大的用處就是可以對(duì)鏈接在不同狀態(tài)下定義不同的樣式效果。

1.語(yǔ)法

偽類(lèi)的語(yǔ)法是在原有的語(yǔ)法里加上一個(gè)偽類(lèi)（pseudo-class）：
selector:pseudo-class {property: value}
（選擇符:偽類(lèi) {屬性: 值}）
偽類(lèi)和類(lèi)不同，是CSS已經(jīng)定義好的，不能象類(lèi)選擇符一樣隨意用別的名字，根據(jù)上面的語(yǔ)法可以解釋為對(duì)象（選擇符）在某個(gè)非凡狀態(tài)下（偽類(lèi)）的樣式。

類(lèi)選擇符及其他選擇符也同樣可以和偽類(lèi)混用：
selector.class:pseudo-class {property: value}
（選擇符.類(lèi):偽類(lèi) {屬性: 值}）

2.錨的偽類(lèi)

我們最常用的是4種a（錨）元素的偽類(lèi)，它表示動(dòng)態(tài)鏈接在4種不同的狀態(tài)：link、visited、active、hover（未訪(fǎng)問(wèn)的鏈接、已訪(fǎng)問(wèn)的鏈接、激活鏈接和鼠標(biāo)停留在鏈接上）。我們把它們分別定義不同的效果：
a:link {color: #FF0000; text-decoration: none} /* 未訪(fǎng)問(wèn)的鏈接 */
a:visited {color: #00FF00; text-decoration: none} /* 已訪(fǎng)問(wèn)的鏈接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠標(biāo)在鏈接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活鏈接 */
（上面這個(gè)例子中，這個(gè)鏈接未訪(fǎng)問(wèn)時(shí)的顏色是紅色并無(wú)下劃線(xiàn)，訪(fǎng)問(wèn)后是綠色并無(wú)下劃線(xiàn)，激活鏈接時(shí)為藍(lán)色并有下劃線(xiàn)，鼠標(biāo)在鏈接上時(shí)為紫色并有下劃線(xiàn)）
注重：有時(shí)這個(gè)鏈接訪(fǎng)問(wèn)前鼠標(biāo)指向鏈接時(shí)有效果，而鏈接訪(fǎng)問(wèn)后鼠標(biāo)再次指向鏈接時(shí)卻無(wú)效果了。這是因?yàn)槟惆補(bǔ):hover放在了a:visited的前面，這樣的話(huà)由于后面的優(yōu)先級(jí)高，當(dāng)訪(fǎng)問(wèn)鏈接后就忽略了a:hover的效果。所以根據(jù)疊層順序，我們?cè)诙�義這些鏈接樣式時(shí)，一定要按照a:link， a:visited， a:hover， a:actived的順序書(shū)寫(xiě)。

3.偽類(lèi)和類(lèi)選擇符

將偽類(lèi)和類(lèi)組合起來(lái)用，就可以在同一個(gè)頁(yè)面中做幾組不同的鏈接效果了，例如，我們定義一組鏈接為紅色，訪(fǎng)問(wèn)后為藍(lán)色；另一組為綠色，訪(fǎng)問(wèn)后為黃色：
a.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
a.blue:link {color: #00FF00}
a.blue:visited {color: #FF00FF}
現(xiàn)在應(yīng)用在不同的鏈接上：
<a class="red" href="...">這是第一組鏈接</a>
<a class="blue" href="...">這是第二組鏈接</a>

4.其他偽類(lèi)

此外CSS2還定義了首字和首行（first-letter和first-line）的偽類(lèi)，可以對(duì)元素的首字或首行設(shè)定不同的樣式。
下面看這個(gè)例子，我們?cè)诙温錁?biāo)記里定義文本首字尺寸為默認(rèn)大小的3倍：
<style type=”text/css”>
p:first-letter {font-size: 300%}
</style>
……
<p>
這是一個(gè)段落，這個(gè)段落的首字被放大了。
</p>

我們?cè)俣�義一個(gè)首行樣式的例子：
<style type=”text/css”>
div:first-line {color: red}
</style>
……
<div>
<p>
這是段落的第一行
這是段落的第二行
這是段落的第三行
</p>
</div>
（上例中段落的第一行為紅色，第二、三行為默認(rèn)顏色）

四、如何在網(wǎng)頁(yè)中插入CSS

前兩章我們了解了CSS的語(yǔ)法，但要想在瀏覽器中顯示出效果，就要讓瀏覽器識(shí)別并調(diào)用。當(dāng)瀏覽器讀取樣式表時(shí)，要依照文本格式來(lái)讀，這里介紹四種在頁(yè)面中插入樣式表的方法：鏈入外部樣式表、內(nèi)部樣式表、導(dǎo)入外表樣式表和內(nèi)嵌樣式。

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