ω。艾媽の手作 Mapin-cloth 小舖。ω

一、基本語法：更改連結顏色，有底線、無底線，連結背景色

範例展示：

(1)連結字體無底線、滑鼠移至連結上方膚色背景

此範例為小小羊兒的部落格連結樣式

(2)連結字體無底線、滑鼠移至連結上方有底線

此範例是目前我的部落格所使用的

語法：

/*Links*/
a,a:link,a:visited{color:顏色代碼1;text-decoration: none}
a:hover{color:顏色代碼2;background-color:顏色代碼3;text-decoration: none;}

顏色代碼1是部落格中連結字體的顏色

顏色代碼2是滑鼠停留在部落格連結字體上字體的顏色

顏色代碼3是滑鼠停留在部落格連結字體上字體的底色

顏色代碼1後面紫色部分的none表示部落格中連結字體顏色無底線

顏色代碼2後面紫色部分的none表示滑鼠移至部落格連結上方

連結字體顏色無底線，如果要有底線可將none改成underline

還有，若不要滑鼠停留在部落格連結字體上字體有底色，可將藍色部分刪除

二、進階語法：連結背景圖片，連結背景圖片有底線、無底線

範例展示：

注意：此項教學及範例參考部落格達人314，但因本文將眾多語法結合，所以沒有引用，特此告知！

(1)連結背景圖無底線

(2)連結背景圖有底線

語法：

/*Links連結底圖無底線*/
a,a:link,a:visited{color:顏色代碼1;text-decoration: none;}
a:hover{color:顏色代碼2;text-decoration:  none;background-image:url(http://xxxx.gif)}

連結部分插入網路圖片網址，顏色代碼一、二與基本語法相同

紫色部分設定為無底線，若要有底線將none改成underline即可

連結背景圖：

請注意！此背景圖不可使用自己電腦裡面的圖片

連結背景圖可以使用314提供之閃底，以下為314天空部落格素材相簿：

閃底素材

三、進階語法２：字體浮雕

範例展示：

注意：此項教學參考部落格達人調色盤Renee，但因本文將眾多語法結合，所以沒有引用，特此告知！

(1)滑鼠移至部落格連結上方字體浮雕

語法：

/* 字體浮體語法  */
a:hover{ border: 2px #fff outset }

將語法貼到自訂樣式裡即可