第11章-邊框與超鏈接設(shè)置

11.1邊框樣式CSS屬性在CSS樣式中，通過(guò)對(duì)border屬性進(jìn)行定義，可以使網(wǎng)頁(yè)元素的邊框有更加豐富的樣式，從而使元素的效果更加美觀。border屬性的基本語(yǔ)法格式如下。border:border-style|border-color|border-width;

border-width屬性——邊框?qū)挾?/p>

可以通過(guò)CSS樣式中的border-width來(lái)設(shè)置元素邊框的寬度，以增強(qiáng)邊框的效果。border-width的語(yǔ)法格式如下。border-width:medium|thin|thick|length;

border-style屬性——邊框樣式border-style屬性用于設(shè)置元素邊框的樣式，既定義圖片邊框的風(fēng)格。border-style的語(yǔ)法格式如下。border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

border-color屬性——邊框顏色

在定義頁(yè)面元素的邊框時(shí)，不僅可以對(duì)邊框的樣式進(jìn)行設(shè)置，為了突出顯示邊框的效果，還可以通過(guò)CSS樣式中的border-color屬性來(lái)定義邊框額的顏色。border-color的語(yǔ)法格式如下。border-color:顏色值;實(shí)戰(zhàn)練習(xí)——為網(wǎng)頁(yè)元素添加邊框效果最終文件：光盤(pán)\最終文件\第11章\11-1-3.html視頻：光盤(pán)\視頻\第11章\11-1-3.swf

11.2

CSS3.0新增邊框樣式屬性在CSS3.0中新增了3個(gè)有關(guān)邊框設(shè)置的屬性，分別是border-colors、order-radius和border-image，通過(guò)這3個(gè)新增的邊框?qū)傩阅軌驅(qū)崿F(xiàn)更加豐富的邊框效果。

border-colors屬性——多重邊框顏色

border-color屬性可以用來(lái)設(shè)置對(duì)象邊框的顏色，在CSS3.0中對(duì)增強(qiáng)了該屬性的功能。如果設(shè)置了border的寬度為Npx，那么就可以在這個(gè)border上使用N種顏色，每種顏色顯示1px的寬度。如果所設(shè)置的border的寬度為10像素，但只聲明了5或6種顏色，那么最后一個(gè)顏色將被添加到剩下的寬度。border-colors語(yǔ)法格式如下。border-colors:[<color>|transparent]{1,4}實(shí)戰(zhàn)練習(xí)——實(shí)現(xiàn)網(wǎng)頁(yè)元素多色彩邊框效果

border-image屬性——圖像邊框?yàn)榱嗽鰪?qiáng)邊框效果，CSS3.0中新增了border-image屬性，專門用于圖像邊框的處理，它的強(qiáng)大之處在于它能靈活地分割圖像，并應(yīng)用于邊框。border-image屬性的語(yǔ)法格式如下。border-image:none|<image>[<number>|<percentage>]{1,4}[/<border-width>{1,4}]?[stretch|repeat|round]{0,2}實(shí)戰(zhàn)練習(xí)——實(shí)現(xiàn)網(wǎng)頁(yè)元素添加圖像邊框效果最終文件：光盤(pán)\最終文件\第11章\11-2-1.html視頻：光盤(pán)\視頻\第11章\11-2-1.swf最終文件：光盤(pán)\最終文件\第11章\11-2-2.html視頻：光盤(pán)\視頻\第11章\11-2-2.swf

border-radius屬性——圓角邊框

在CSS3.0中新增了圓角邊框的定義屬性border-radius，通過(guò)該屬性，可以輕松的在網(wǎng)頁(yè)中實(shí)現(xiàn)圓角邊框效果。border-radius屬性的語(yǔ)法格式如下。border-radius:none|<length>{1,4}[/<length>{1,4}]?實(shí)戰(zhàn)練習(xí)——在網(wǎng)頁(yè)中實(shí)現(xiàn)圓角邊框效果最終文件：光盤(pán)\最終文件\第11章\11-2-3.html視頻：光盤(pán)\視頻\第11章\11-2-3.swf

11.3超鏈接CSS樣式偽類偽類是一種特殊的選擇符，能被瀏覽器自動(dòng)識(shí)別。其最大的用處是在不同狀態(tài)下可以對(duì)超鏈接定義不同的樣式效果，是CSS本身定義的一種類。CSS樣式中用于超鏈接的偽類有如下4種。:link偽類，用于定義超鏈接對(duì)象在沒(méi)有訪問(wèn)前的樣式。:hover偽類，用于定義當(dāng)鼠標(biāo)移至超鏈接對(duì)象上時(shí)的樣式。:active偽類，用于定義當(dāng)鼠標(biāo)單擊超鏈接對(duì)象時(shí)的樣式。:visited偽類，用于定義超鏈接對(duì)象已經(jīng)被訪問(wèn)過(guò)后的樣式。

:link偽類

:link偽類用于設(shè)置超鏈接對(duì)象在沒(méi)有被訪問(wèn)時(shí)的樣式。

:hover偽類:hover偽類用來(lái)設(shè)置對(duì)象在其鼠標(biāo)懸停時(shí)的樣式表屬性。該狀態(tài)是非常實(shí)用的狀態(tài)之一，當(dāng)鼠標(biāo)動(dòng)到鏈接對(duì)象上時(shí)，改變其顏色或是改變下劃線狀態(tài)

，這些都可以通過(guò)a:hover狀態(tài)控制實(shí)現(xiàn)。對(duì)于無(wú)href屬性的<a>標(biāo)簽，該偽類不發(fā)生作用。

:active偽類:active偽類用于設(shè)置鏈接對(duì)象在被用戶激活（在被點(diǎn)擊與釋放之間發(fā)生的事件）時(shí)的樣式。

實(shí)際應(yīng)用中，本狀態(tài)很少使用。對(duì)于無(wú)href屬性的<a>標(biāo)簽，該偽類不發(fā)生作用。在CSS樣式中該偽類可以應(yīng)用于任何對(duì)象，并且:active狀態(tài)可以和:link以及:visited狀態(tài)同時(shí)發(fā)生。

:visited偽類

:visited偽類用于設(shè)置超鏈接對(duì)象在其鏈接地址已被訪問(wèn)過(guò)后的樣式屬性。實(shí)戰(zhàn)練習(xí)——設(shè)置網(wǎng)頁(yè)中超鏈接文字效果最終文件：光盤(pán)\最終文件\第11章\11-3-4.html視頻：光盤(pán)\視頻\第11章\11-3-4.swf按鈕式超鏈接在很多網(wǎng)頁(yè)中，超鏈接制作成各種按鈕的效果，這些效果大多采用圖像的方式來(lái)實(shí)現(xiàn)。通過(guò)CSS樣式的設(shè)置，同樣可以制作出類似于按鈕效果的導(dǎo)航菜單超鏈接。實(shí)戰(zhàn)練習(xí)——制作網(wǎng)站導(dǎo)航菜單最終文件：光盤(pán)\最終文件\第11章\11-3-5.html視頻：光盤(pán)\視頻\第11章\11-3-5.swf

11.4光標(biāo)指針樣式通常在瀏覽網(wǎng)頁(yè)時(shí)，看到的鼠標(biāo)指針形狀有箭頭、手形和I字形，而通常在Windows環(huán)境下實(shí)際看到的鼠標(biāo)指針?lè)N類要比這個(gè)多得多。CSS彌補(bǔ)了HTML語(yǔ)言在這方面的不足，通過(guò)cursor屬性可以設(shè)置各種鼠標(biāo)指針樣式。

cursor屬性——光標(biāo)效果通常在瀏覽網(wǎng)頁(yè)時(shí)，看到的鼠標(biāo)指針的形狀有箭頭、手形和I字形，而通常在windows環(huán)境下實(shí)際看到的鼠標(biāo)指針?lè)N類要比這個(gè)多得多。CSS樣式彌補(bǔ)了HTML語(yǔ)言在這方面的不足，通過(guò)cursor屬性可以設(shè)置各式各樣的光標(biāo)效果。cursor屬性包含17個(gè)屬性值，對(duì)應(yīng)光標(biāo)的17種樣式，而且還可以通過(guò)url鏈接地址自定義光標(biāo)指針。設(shè)置網(wǎng)頁(yè)中光標(biāo)指針效果在CSS樣式中可以通過(guò)cursor屬性設(shè)置光標(biāo)指針效果，該屬性可以在網(wǎng)頁(yè)的任何標(biāo)簽中使用，從而可以改變各種頁(yè)面元素的光標(biāo)效果。在網(wǎng)頁(yè)中光標(biāo)移至某個(gè)超鏈接對(duì)象上時(shí)，可以實(shí)現(xiàn)超鏈接顏色變化和背景圖像變化，并且光標(biāo)指針也可以發(fā)生變化。實(shí)戰(zhàn)練習(xí)——在網(wǎng)頁(yè)中實(shí)現(xiàn)多種光標(biāo)指針效果最終文件：光盤(pán)\最終文件\第11章\11-4-2.html視頻：光盤(pán)\視頻\第11章\11-4-2.swf

11.5本章小結(jié)超鏈接是網(wǎng)頁(yè)中非常重要的功能，通過(guò)CSS樣式