使用CSS樣式美化超鏈接和鼠標(biāo)指針50張課件

1、使用CSS樣式美化超鏈接和鼠標(biāo)指針 超鏈接是整個(gè)互聯(lián)網(wǎng)的基礎(chǔ)，通過超鏈接能夠?qū)崿F(xiàn)頁面的跳轉(zhuǎn)、功能的激活等，超鏈接可以將網(wǎng)站中每個(gè)頁面關(guān)聯(lián)在一起。通過CSS樣式，可以設(shè)置出美觀大方、具有不同外觀和樣式效果的超鏈接，從而增加頁面的樣式效果和超鏈接交互效果。本章將介紹如何使用CSS樣式對(duì)超鏈接效果進(jìn)行控制。 超鏈接是網(wǎng)頁中最重要、最根本的元素之一，網(wǎng)站中的每一個(gè)網(wǎng)頁都是通過超鏈接的形式關(guān)聯(lián)在一起的。如果頁面之間是彼此獨(dú)立的，那么這樣的網(wǎng)站將無法正常運(yùn)行。sghgmyy126主要內(nèi)容8.1 定義超鏈接樣式制作活動(dòng)公告8.2 超鏈接偽類應(yīng)用（1）制作按鈕式超鏈接8.3 超鏈接偽類應(yīng)用（2）制作圖像式超鏈

2、接8.4 使用CSS定義鼠標(biāo)指針樣式改變默認(rèn)的鼠標(biāo)指針8.5 使用CSS定義鼠標(biāo)變換效果8.6 box-shadow屬性（CSS3.0）為網(wǎng)頁元素添加陰影8.7 overflow屬性（CSS3.0）網(wǎng)頁元素內(nèi)容溢出處理8.8 resize屬性（CSS3.0）在網(wǎng)頁中實(shí)現(xiàn)區(qū)域縮放調(diào)節(jié)8.9 outline屬性（CSS3.0）為網(wǎng)頁元素添加輪廓邊框sghgmyy126定義超鏈接樣式 對(duì)于超鏈接的修飾，通常可以采用CSS偽類。偽類是一種特殊的選擇符，能被瀏覽器自動(dòng)識(shí)別。其最大的用處是在不同狀態(tài)下可以對(duì)超鏈接定義不同的樣式效果，是CSS本身定義的一種類。 本實(shí)例制作的是一個(gè)小活動(dòng)的內(nèi)容公告，通過對(duì)超鏈

3、接的4種CSS樣式偽類進(jìn)行設(shè)置，實(shí)現(xiàn)了文本超鏈接樣式的不同效果?！救蝿?wù)描述】sghgmyy126定義超鏈接樣式【任務(wù)展示】案例效果圖sghgmyy126定義超鏈接樣式【任務(wù)實(shí)現(xiàn)】HTML代碼sghgmyy126定義超鏈接樣式【任務(wù)實(shí)現(xiàn)】CSS樣式代碼sghgmyy126定義超鏈接樣式【相關(guān)知識(shí)】 超鏈接是由標(biāo)簽組成，超鏈接可以是文字或圖像。添加了超鏈接的文字具有自己默認(rèn)的樣式，從而和其他文字區(qū)分開，其中默認(rèn)的超鏈接樣式為藍(lán)色文字且有下劃線（如：超鏈接）。通過CSS可以修飾超鏈接效果，從而達(dá)到美化頁面整體的效果。 sghgmyy126定義超鏈接樣式對(duì)于超鏈接偽類的設(shè)置屬性如下： a:link：定

4、義超鏈接對(duì)象在沒有訪問前的樣式； a:hover：定義當(dāng)鼠標(biāo)移至超鏈接對(duì)象上時(shí)的樣式； a:active：定義當(dāng)鼠標(biāo)單擊超鏈接對(duì)象時(shí)的樣式； a:hover：定義超鏈接對(duì)象已經(jīng)被訪問過后的樣式。 sghgmyy126定義超鏈接樣式什么是超鏈接？ 超鏈接是指從一個(gè)網(wǎng)頁指向一個(gè)目標(biāo)的連接關(guān)系，這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁，也可以是相同網(wǎng)頁上的不同位置，還可以是一個(gè)圖片、一個(gè)電子郵件地址、一個(gè)文件，甚至是一個(gè)應(yīng)用程序。而用來超鏈接的對(duì)象，可以是一段文本或者是一個(gè)圖片。 sghgmyy126定義超鏈接樣式按照鏈接路徑的不同，超鏈接可以分為哪幾種類型？ 可分為以下幾類：內(nèi)部鏈接；外部鏈接；錨記鏈接；腳本鏈接

5、。 sghgmyy126超鏈接偽類應(yīng)用（1） 在網(wǎng)頁制作中，通過CSS樣式的設(shè)置可以制作出各種各樣的導(dǎo)航菜單超鏈接。本實(shí)例就是對(duì)CSS樣式表進(jìn)行設(shè)置，制作出按鈕式導(dǎo)航菜單?！救蝿?wù)描述】sghgmyy126超鏈接偽類應(yīng)用（1）【任務(wù)展示】案例效果圖sghgmyy126超鏈接偽類應(yīng)用（1）【任務(wù)實(shí)現(xiàn)】CSS樣式代碼sghgmyy126超鏈接偽類應(yīng)用（1）【相關(guān)知識(shí)】 在很多網(wǎng)頁中，超鏈接制作成各種按鈕的效果，這些效果大多采用圖像的方式來實(shí)現(xiàn)。通過CSS樣式的設(shè)置，同樣可以制作出類似于按鈕效果的導(dǎo)航菜單超鏈接。sghgmyy126超鏈接偽類應(yīng)用（1）按照鏈接對(duì)象的不同，可以將超鏈接分為哪幾類？ 可分

6、為以下幾類：內(nèi)部鏈接；圖像鏈接；錨記鏈接；郵件鏈接；空鏈接；多媒體鏈接。 sghgmyy126超鏈接偽類應(yīng)用（1） 怎樣合理地設(shè)置網(wǎng)頁中的超鏈接？ 在網(wǎng)頁中創(chuàng)建超鏈接時(shí)，用戶需要綜合整個(gè)網(wǎng)站中的所有頁面進(jìn)行考慮，合理地安排超鏈接，這樣才會(huì)使整個(gè)網(wǎng)站中的頁面具有一定的條理性，創(chuàng)建超鏈接的建議如下： 避免孤立文件的存在； 在網(wǎng)頁中避免使用過多的超級(jí)鏈接； 網(wǎng)頁中的超鏈接不要超過4層； 頁面較長時(shí)可以使用書簽； 設(shè)置主頁或上一層的鏈接。sghgmyy126超鏈接偽類應(yīng)用（2） 本實(shí)例制作的是網(wǎng)站頁面的導(dǎo)航菜單，通過設(shè)置4種偽類樣式代碼，為文字的超鏈接添加了好看的背景，使得網(wǎng)頁看起來更具有欣賞性?！救?/p>

7、務(wù)描述】sghgmyy126超鏈接偽類應(yīng)用（2）【任務(wù)展示】案例效果圖sghgmyy126超鏈接偽類應(yīng)用（2）【任務(wù)實(shí)現(xiàn)】CSS樣式代碼sghgmyy126超鏈接偽類應(yīng)用（2）【相關(guān)知識(shí)】鏈接路徑可以分為幾種形式？相對(duì)路徑：最適合網(wǎng)站的內(nèi)部鏈接。只要是屬于同一網(wǎng)站下的，即使不在同一個(gè)目錄下，相對(duì)路徑也非常適合。絕對(duì)路徑：為文件提供完整的路徑，包括使用協(xié)議。適合網(wǎng)站的外部鏈接。根路徑：同樣適用于創(chuàng)建內(nèi)部鏈接，但大多數(shù)情況下，不建議使用此種路徑形式。通過適用以下兩種情況：當(dāng)站點(diǎn)的規(guī)模非常大，放置于幾個(gè)服務(wù)器上時(shí)；當(dāng)一個(gè)服務(wù)器上同時(shí)放置幾個(gè)站點(diǎn)時(shí)。根路很以“ ”開始，然后是根目錄下的目錄名。sghg

8、myy126使用CSS定義鼠標(biāo)指針樣式 通常在瀏覽網(wǎng)頁時(shí)，看到的鼠標(biāo)指針的形狀有箭頭、手形和I字形，而在Windows環(huán)境下實(shí)際看到的鼠標(biāo)指針種類要比這個(gè)廣泛得多。CSS彌補(bǔ)了HTML語言在這方面的不足，通過cursor屬性可以設(shè)置各式各樣的鼠標(biāo)指針樣式。 【任務(wù)描述】sghgmyy126使用CSS定義鼠標(biāo)指針樣式【任務(wù)展示】案例效果圖sghgmyy126使用CSS定義鼠標(biāo)指針樣式【任務(wù)實(shí)現(xiàn)】CSS樣式代碼sghgmyy126使用CSS定義鼠標(biāo)指針樣式【相關(guān)知識(shí)】 cursor屬性用于設(shè)置光標(biāo)在網(wǎng)頁中的視覺效果，通過樣式改變鼠標(biāo)形狀，當(dāng)鼠標(biāo)放在被此選擇設(shè)置、修飾過的區(qū)域上時(shí)，形狀會(huì)發(fā)生改變。具

9、體的形狀包括： 屬性值指針說明及對(duì)應(yīng)效果屬性值指針說明及對(duì)應(yīng)效果crosshair交叉十字n-resize向北的箭頭text文本選擇符號(hào)nw-resize指向西北的箭頭waitWindows等待形狀w-resize向西的箭頭pointer手形sw-resize指向西南的箭頭default默認(rèn)的鼠標(biāo)形狀s-resize向南的箭頭help帶問號(hào)的鼠標(biāo)se-resize指向東南的箭頭e-resize向東的箭頭move移動(dòng)指針ne-resize指向東北的箭頭auto正常鼠標(biāo)sghgmyy126使用CSS定義鼠標(biāo)指針樣式可以在一個(gè)頁面中為不同的區(qū)域或元素應(yīng)用多種光標(biāo)指針效果嗎？ 可以?？梢栽诙鄠€(gè)類CSS

10、樣式中定義不同的cursor屬性，將光標(biāo)指針定義為多種不同的效果，在頁面中分別為相應(yīng)的區(qū)域或元素應(yīng)用相應(yīng)的類CSS樣式即可。 但通常情況下，光標(biāo)指針效果在網(wǎng)頁中使用較少，通常都是采用系統(tǒng)默認(rèn)的光標(biāo)指針效果，在網(wǎng)頁中應(yīng)用光標(biāo)指針效果最多不超過兩種，否則會(huì)影響網(wǎng)頁的便利性。 sghgmyy126使用CSS定義鼠標(biāo)變換效果 了解了如何設(shè)置鼠標(biāo)樣式，就可以輕松地制作出鼠標(biāo)指針變化的超鏈接效果了，即鼠標(biāo)移至某個(gè)超鏈接對(duì)象上時(shí)，可以實(shí)現(xiàn)超鏈接顏色變化、背景圖像發(fā)生變化，并且鼠標(biāo)指針也可以發(fā)生變化。 本實(shí)例制作的是一個(gè)藝術(shù)網(wǎng)站的小頁面，通過定義相應(yīng)的類CSS樣式，從而實(shí)現(xiàn)了改變鼠標(biāo)變換樣式的效果?！救蝿?wù)描述

11、】sghgmyy126使用CSS定義鼠標(biāo)變換效果【任務(wù)展示】案例效果圖sghgmyy126使用CSS定義鼠標(biāo)變換效果【任務(wù)實(shí)現(xiàn)】HTML代碼和CSS樣式代碼sghgmyy126box-shadow屬性（CSS3.0） 在CSS中新增了為元素添加陰影的新屬性box-shadow，通過該屬性可以輕松地實(shí)現(xiàn)網(wǎng)頁中元素的陰影效果?！救蝿?wù)描述】sghgmyy126box-shadow屬性（CSS3.0）【任務(wù)展示】案例效果圖sghgmyy126box-shadow屬性（CSS3.0）【任務(wù)實(shí)現(xiàn)】CSS樣式代碼sghgmyy126box-shadow屬性（CSS3.0） box-shadow屬性的語法格式

12、如下：第1個(gè)值表示陰影水平偏移值，可以取正、負(fù)值； 第2個(gè)值表示陰影垂直偏移值，可以取正、負(fù)值； 第3個(gè)值表示陰影模糊值。 color：用于設(shè)置陰影的顏色?！鞠嚓P(guān)知識(shí)】box-shadow : | ; sghgmyy126box-shadow屬性（CSS3.0）如果不通過CSS3.0新增的box-shadow屬性，如何實(shí)現(xiàn)網(wǎng)頁元素的陰影效果？ 目前各瀏覽器對(duì)CSS3.0的支持不相同。如果不使用CSS3.0新增的box-shadow屬性，要實(shí)現(xiàn)網(wǎng)頁元素的陰影效果，可以通過CSS中的shadow或Dropshadow濾鏡來實(shí)現(xiàn)。 sghgmyy126overflow屬性（CSS3.0） 當(dāng)對(duì)象的內(nèi)

13、容超過其制定的高度及寬度時(shí)，應(yīng)該如何進(jìn)行處理？在CSS3.0中新增了overflow屬性，通過該屬性可以設(shè)置當(dāng)內(nèi)容溢出時(shí)的處理方法。 本實(shí)例制作的是一個(gè)卡通插畫頁面，通過對(duì)overflow屬性的設(shè)置，很好地處理了內(nèi)容溢出的問題，使得頁面變得更加整潔、美觀且具有實(shí)用性。【任務(wù)描述】sghgmyy126overflow屬性（CSS3.0）【任務(wù)展示】案例效果圖sghgmyy126overflow屬性（CSS3.0）【任務(wù)實(shí)現(xiàn)】CSS樣式代碼sghgmyy126overflow屬性（CSS3.0）【相關(guān)知識(shí)】 overflow屬性的語法格式如下：overflow : visible | auto |

14、 hidden | scroll ; 屬性值說明visible不剪切內(nèi)容也不添加滾動(dòng)條。auto在需要時(shí)剪切內(nèi)容并添加滾動(dòng)條。hidden不顯示超過對(duì)象尺寸的內(nèi)容。Scroll總是顯示滾動(dòng)條。Overflow屬性值sghgmyy126overflow屬性（CSS3.0）能不能當(dāng)內(nèi)容溢出時(shí)，控制其只顯示垂直或水平方向上的滾動(dòng)條？ 可以，overflow屬性還有兩個(gè)相關(guān)屬性overflow-x和overflow-y，分別用于設(shè)置水平方向溢出處理和垂直方向上的溢出處理，其屬性值和設(shè)置方法與overflow屬性完全相同。垂直方向顯示滾動(dòng)條sghgmyy126resize屬性（CSS3.0） 在CSS中

15、新增了區(qū)域縮放調(diào)節(jié)的功能設(shè)置，通過新增的resize屬性，就可以實(shí)現(xiàn)頁面中元素的區(qū)域縮放操作，調(diào)節(jié)元素的尺寸大小。 本實(shí)例通過添加相應(yīng)的代碼部分，使該頁面中的部分區(qū)域?qū)ο笥辛丝s放調(diào)節(jié)的功能?！救蝿?wù)描述】sghgmyy126resize屬性（CSS3.0）【任務(wù)展示】Firefox瀏覽器中效果圖sghgmyy126resize屬性（CSS3.0）【任務(wù)實(shí)現(xiàn)】CSS樣式代碼sghgmyy126resize屬性（CSS3.0）【相關(guān)知識(shí)】 resize屬性的語法格式如下：resize : none | both | horizontal | vertical | inherit ; 屬性值說明non

16、e不提供元素尺寸調(diào)整機(jī)制。both提供元素尺寸的雙向調(diào)整機(jī)制。horizontal提供元素尺寸的單向水平方向調(diào)整機(jī)制。vertical提供元素尺寸的單向垂直方向調(diào)整機(jī)制。inherit默認(rèn)繼承。resize屬性值sghgmyy126resize屬性（CSS3.0）類型版本IE（）IE6.0 （）IE7.0 （）IE8.0Firefox（）Firefox3.0 （）Firefox3.5Chrome（）Chrome1.0.x （）Chrome2.0.xOpera（）Opera9.63Safari（）Safari3.1 （）Safari4.0resize屬性的兼容性sghgmyy126outline

17、屬性（CSS3.0） outline屬性用于為元素周圍繪制輪廓邊框，通過設(shè)置一個(gè)數(shù)值使邊框邊緣的外圍偏移，可以起到突出元素的作用。 本實(shí)例通過添加outline屬性并對(duì)其進(jìn)行相關(guān)設(shè)置，從而實(shí)現(xiàn)了給頁面中對(duì)象元素周圍繪制輪廓外邊框的效果。【任務(wù)描述】sghgmyy126outline屬性（CSS3.0）【任務(wù)展示】Firefox瀏覽器下顯示效果sghgmyy126outline屬性（CSS3.0）【任務(wù)實(shí)現(xiàn)】CSS樣式代碼sghgmyy126outline屬性（CSS3.0）【相關(guān)知識(shí)】 outline屬性的語法格式如下： outline : outline-color | outline-style | outline-width | outline-offset | inherit ;outlline屬性值屬性值說明outline-