CSS技巧：在網頁中標示外部連結

所謂的「外部連結」（external links）指的是內容會轉向到其他網站的連結。例如在網頁中提供蕃薯藤的連結，是屬於外部連結；而連結自己網站中的其他內容，例如回到首頁，則稱為內部連結（internal links）。

依照Web Content Accessibility Guidelines 1.0的規範，任何與連結內容有關的敘述，都應包含在連結文字當中。因此，將內部連結與外部連結採用不同的標示法，也是增進網頁易讀性的一種方式。

以下的步驟將示範，如何在連結文字的最後，加上一個特別的圖示表示外部連結。

步驟1：為外部連結加上class屬性「external」。

<a class="external" href="http://www.hemidemi.com/">HEMiDEMi</a>

步驟2：在連結文字的後面加上「外部連結」的提示。

<a class="external" href="http://www.hemidemi.com/">HEMiDEMi（外部連結）</a>

步驟3：把提示文字「外部連結」用<span>元素包起來。

<a class="external" href="http://www.hemidemi.com/">HEMiDEMi<span>（外部連結）</span></a>

步驟4：增加一個CSS規則來隱藏提示文字。

雖然直接使用「display: none」這個特性是個快速的方法，但是將導致螢幕朗讀軟體（screen readers，視障者使用的瀏覽器）無法讀取這段文字。因此，利用絕對定位的方式，將「外部連結」這四個字推到螢幕以外，會是較好的方案。

也就是說，加上「外部連結」這四個提示文字，是為了增進網頁的親和力（accessibility），讓螢幕朗讀軟體的使用者也能知道這是一個外部連結。而一般使用者的瀏覽器是不需要看到這段文字的。

a.external span
{
position: absolute;
left: -5000px;
width: 4000px;
}

步驟5：如果你希望標示外部連結的圖示能夠隨著連結的狀態（link, hover, visited）而不同，可以製作三個不同的圖示放在同一個檔案中，記得圖示之間要留一大片空白，如下圖：

步驟6：增加一個CSS規則，來為外部連結（link狀態）加上背景圖示。

a.external:link
{
background: url(步驟5的圖檔路徑名稱) no-repeat 100% 0;
padding: 0 20px 0 0;
}

padding-right的值是依照圖示的寬度設定的，本例的圖寬為17px，故設定為稍大的20px。

步驟7：設定visited狀態外部連結的CSS規則。

a.external:visited
{
color: purple;
background: url(步驟5的圖檔路徑名稱) no-repeat 100% -100px;
padding: 0 20px 0 0;
}

因為圖示之間的距離約為100px，所以將背景圖的垂直值設為-100px。

步驟8：設定hover狀態外部連結的CSS規則。

a.external:hover
{
color: red;
background: url(步驟5的圖檔路徑名稱) no-repeat 100% -200px;
padding: 0 20px 0 0;
}

步驟9：在網站中應加上該圖示之用途說明。

成果範例：

HEMiDEMi（外部連結）是最近台灣的部落格圈非常熱門的網路書籤服務。

[via Max Design - Simple, accessible external links]

可能的相關文章：

• CSS技巧：使用兩張圖片作為網頁背景
• CSS選單技巧
• 標示檔案連結類型的javascript
• 樣式summer的修改

這篇文章發表於 February 12th, 2006 ，分類為：Webdev，並且加上了以下的標籤：css, Webdev。你可以訂閱這篇文章的回應：RSS 2.0，也歡迎發表你的意見，或者從你的網站 Trackback 過來。