yo139678

【自訂樣式】CSS語法入門教學（一）：超連結文字

「管理部落格」→「面板設定」→「自訂樣式」

小叮嚀：在編輯CSS的時候，建議另開記事本編輯。一來資料不易遺失，二來方便整理。

文字超連結‧基本介紹：

（紅圈部分，為超連結顯示的地方。）

超連結解說：

超連結狀態大致上分為三種：

a:link → 正常的狀態

a:visited → 點選過的狀態

a:hover → 當滑鼠移到連結上的狀態

另外還有一種，是執行中的狀態，不過並不常用。

a:active → 執行中的狀態

文字顏色背景 → 文字顏色背景

文字底線 → 文字底線

註：文章標題、部落格標題和「留言板、部落格相簿」等字樣雖為超連結，但因為另有語法設定，所以可能會不受超連結文字設定語法的規範。

基本語法：

/*Links*/

a,

a:link{color:顏色碼;}

a:visited{color:顏色碼;}

a:hover{color:顏色碼;}

基本語法解釋：

/*Links*/　（超連結文字語法）

a（超連結）,

a:link（正常的狀態）{color:（「正常的狀態」文字顏色碼）;}

a:visited（點選過的狀態）{color:（「點選過的狀態」文字顏色碼）;}

a:hover（當滑鼠移到連結上的狀態）{color:（「滑鼠移到連結上的狀態」文字顏色碼）;}

補充語法：

超連結文字背景顏色：background-color:顏色碼（若不想要文字背景，則打none）

即：background-color:none

超連結文字底線顏色：text-decoration:顏色碼（若不想要文字底線，則打none）

即：text-decoration:none

其它語法，例：文字字型、文字大小、文字效果、文字樣式…等。請參考：

☆ 文字設定語法

文字顏色、背景顏色、底線、字型、大小…等，之間用;作分隔。

補充語法解釋：

超連結也能歸類於是文字設定，所以除了原有的顏色上的改變之外，也可設定其樣式的不同。

清楚文字設定的方式，就能讓三個狀態（正常、點選過、滑鼠移到連結上）呈現出不同的視覺效果。

例子：

（一）

/*Links*/

a, a:link{color:#1B0B73;background-color:none;text-decoration:underline}

a:visited{color:#FF1100;background-color:none;text-decoration:overline}

a:hover{color:#ffffff;background-color:#D1E7FE;text-decoration:none;font-family:標楷體;font-size:16pt}

呈現效果 →

超連結在正常狀態之下，文字顏色為紫色，沒有文字背景顏色，加底線。

在參觀過的狀態之下，文字顏色為紅色，沒有文字背景顏色。加頂端線。

在滑鼠移到連結上的狀態之下，文字顏色為白色，文字背景顏色為淺藍色，不加底線，字型為標楷體，大小為16pt。

（二）

/*Links*/

a, a:link{color:#000000;background-color:none;text-decoration:underline}

a:visited{color:#689C98;background-color:none;text-decoration:none;font-style:italic}

a:hover{color:#3AA9F4;background-color:none;text-decoration:none;font-weight:bold}

呈現效果 →

超連結在正常狀態之下，文字顏色為黑色，沒有文字背景顏色，加底線。

在參觀過的狀態之下，文字顏色為綠色，沒有文字背景顏色，不加底線，字體為斜體。

在滑鼠移到連結上的狀態之下，文字顏色為藍色，沒有文字背景顏色，不加底線，字體為粗體。

貼心小叮嚀：

要別注意超連結文字顏色和背景底圖、左右欄位底色、內文底色的搭配喔！

沉雲小語：

例子（一）、（二）如果喜歡，可以直接帶走（笑～）

直接將語法複製起來，然後到『自訂樣式』之中覆蓋原來的超連結語法即可。