使用css樣式美化超鏈接和鼠標(biāo)指針

《使用css樣式美化超鏈接和鼠標(biāo)指針》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

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

2、應(yīng)用（2）——制作圖像式超鏈接8.4使用CSS定義鼠標(biāo)指針樣式——改變默認(rèn)的鼠標(biāo)指針8.5使用CSS定義鼠標(biāo)變換效果8.6box-shadow屬性（CSS3.0）——為網(wǎng)頁元素添加陰影8.7overflow屬性（CSS3.0）——網(wǎng)頁元素內(nèi)容溢出處理8.8resize屬性（CSS3.0）——在網(wǎng)頁中實現(xiàn)區(qū)域縮放調(diào)節(jié)8.9outline屬性（CSS3.0）——為網(wǎng)頁元素添加輪廓邊框sghgmyy@126.com定義超鏈接樣式對于超鏈接的修飾，通?？梢圆捎肅SS偽類。偽類是一種特殊的選擇符，能被瀏覽器自動識別。其最大的用處是在不同狀態(tài)下可以對超鏈接定義不同的樣式效果，是CSS本身定

3、義的一種類。本實例制作的是一個小活動的內(nèi)容公告，通過對超鏈接的4種CSS樣式偽類進行設(shè)置，實現(xiàn)了文本超鏈接樣式的不同效果。sghgmyy@126.com【任務(wù)描述】定義超鏈接樣式sghgmyy@126.com【任務(wù)展示】案例效果圖定義超鏈接樣式sghgmyy@126.com【任務(wù)實現(xiàn)】HTML代碼定義超鏈接樣式sghgmyy@126.com【任務(wù)實現(xiàn)】CSS樣式代碼定義超鏈接樣式sghgmyy@126.com【相關(guān)知識】超鏈接是由標(biāo)簽組成，超鏈接可以是文字或圖像。添加了超鏈接的文字具有自己默認(rèn)的樣式，從而和其他文字區(qū)分開，其中默認(rèn)的超鏈接樣式為藍色文字且有下劃線（

4、如：超鏈接）。通過CSS可以修飾超鏈接效果，從而達到美化頁面整體的效果。定義超鏈接樣式sghgmyy@126.com對于超鏈接偽類的設(shè)置屬性如下：a:link：定義超鏈接對象在沒有訪問前的樣式；a:hover：定義當(dāng)鼠標(biāo)移至超鏈接對象上時的樣式；a:active：定義當(dāng)鼠標(biāo)單擊超鏈接對象時的樣式；a:hover：定義超鏈接對象已經(jīng)被訪問過后的樣式。定義超鏈接樣式sghgmyy@126.com什么是超鏈接？超鏈接是指從一個網(wǎng)頁指向一個目標(biāo)的連接關(guān)系，這個目標(biāo)可以是另一個網(wǎng)頁，也可以是相同網(wǎng)頁上的不同位置，還可以是一個圖片、一個電子郵件地址、一個文件，甚至是一個應(yīng)用程序。而用來超鏈

5、接的對象，可以是一段文本或者是一個圖片。定義超鏈接樣式sghgmyy@126.com按照鏈接路徑的不同，超鏈接可以分為哪幾種類型？可分為以下幾類：內(nèi)部鏈接；外部鏈接；錨記鏈接；腳本鏈接。超鏈接偽類應(yīng)用（1）在網(wǎng)頁制作中，通過CSS樣式的設(shè)置可以制作出各種各樣的導(dǎo)航菜單超鏈接。本實例就是對CSS樣式表進行設(shè)置，制作出按鈕式導(dǎo)航菜單。sghgmyy@126.com【任務(wù)描述】超鏈接偽類應(yīng)用（1）sghgmyy@126.com【任務(wù)展示】案例效果圖超鏈接偽類應(yīng)用（1）sghgmyy@126.com【任務(wù)實現(xiàn)】CSS樣式代碼超鏈接偽類應(yīng)用（1）sghgmyy@126.com【相關(guān)知識】

6、在很多網(wǎng)頁中，超鏈接制作成各種按鈕的效果，這些效果大多采用圖像的方式來實現(xiàn)。通過CSS樣式的設(shè)置，同樣可以制作出類似于按鈕效果的導(dǎo)航菜單超鏈接。超鏈接偽類應(yīng)用（1）sghgmyy@126.com按照鏈接對象的不同，可以將超鏈接分為哪幾類？可分為以下幾類：內(nèi)部鏈接；圖像鏈接；錨記鏈接；郵件鏈接；空鏈接；多媒體鏈接。超鏈接偽類應(yīng)用（1）sghgmyy@126.com怎樣合理地設(shè)置網(wǎng)頁中的超鏈接？在網(wǎng)頁中創(chuàng)建超鏈接時，用戶需要綜合整個網(wǎng)站中的所有頁面進行考慮，合理地安排超鏈接，這樣才會使整個網(wǎng)站中的頁面具有一定的條理性，創(chuàng)建超鏈接的建議如下：避免孤立文件的存在；在網(wǎng)頁中避免使用過多的

7、超級鏈接；網(wǎng)頁中的超鏈接不要超過4層；頁面較長時可以使用書簽；設(shè)置主頁或上一層的鏈接。超鏈接偽類應(yīng)用（2）本實例制作的是網(wǎng)站頁面的導(dǎo)航菜單，通過設(shè)置4種偽類樣式代碼，為文字的超鏈接添加了好看的背景，使得網(wǎng)頁看起來更具有欣賞性。sghgmyy@126.com【任務(wù)描述】超鏈接偽類應(yīng)用（2）sghgmyy@126.com【任務(wù)展示】案例效果圖超鏈接偽類應(yīng)用（2）sghgmyy@126.com【任務(wù)實現(xiàn)】CSS樣式代碼超鏈接偽類應(yīng)用（2）sghgmyy@126.com【相關(guān)知識】鏈接路徑可以分為幾