第7章 使用CSS美化超鏈接
學習重點
- 認識超鏈接
- 熟悉偽類
- 定義超鏈接樣式
- 能夠靈活設計符合頁面風格的鏈接樣式
7.1 定義超鏈接
在HTML5中建立超鏈接需要兩個要素：設置為超鏈接的網頁元素和超鏈接指向的目標地址。
7.1.1 URL格式
URL（Uniform Resource Locator，統一資源定位器）用語指定網上資源的位置和方式。通常由三部分組成：
- 協議（或服務方式）。
- 存有該資源的主機IP地址（有時也包括端口號）。
- 主機資源的具體地址，如目錄和文件名等。
示例：protocol://machinename:[port]/directory/filename，其中protocol時訪問該資源所采用的協議，即訪問該資源的方法，簡單說明如下：
- http://：超文本傳輸協議，表示該資源是HTML文件。
- ftp://：文件傳輸協議，表示用FTP傳輸方式訪問該資源。
- mailto:：表示該資源是電子郵件（不需要兩條斜杠）。
- file://：表示本地文件。
machinename表示存放該資源的主機IP地址，通常以字符形式出現，如www.china.com: port。其中port是服務器在該主機所使用的端口號，一般情況下不需要指定，只有當服務器所使用的不是默認的端口號時才指定。directory和filename是該資源的路徑和文件名。
7.1.2 超鏈接分類
根據URL不同，網頁中的超鏈接一般可以分為三種類型：
- 內部鏈接
- 錨點鏈接
- 外部鏈接
內部鏈接所連接的目標一般位於同一個網站中。對於內部鏈接來說，可以使用相對路徑和絕對路徑。所謂相對路徑就是URL中沒有指定超鏈接的協議和互聯網位置，僅指定相對位置關系。例如，如果a.html和b.html位於同一目錄下，則直接指定文件（b.html）即可。如果b.html位於本目錄的下一級目錄（sub）中，則可以使用“sub/b.html”相對路徑；如果b.html位於上一級目錄（father）中，則可以使用“../b.html”相對路徑，其中“..”表示父級目錄。還可以使用“/”來定義站點根目錄，如“/b.html”表示鏈接到根目錄下的b.html文件。
外部鏈接所鏈接的目標為外部網站目標，也可以是網站內部目標。外部鏈接一般要指定鏈接所使用的協議和網站地址，例如，http://www.mysite.cn/web2_nav/index.html，其中http是傳輸協議，www.mysite.cn表示網站地址，后面跟隨字符是站點相對地址。
錨點鏈接是一種特殊的鏈接方式，實際上它是在內部鏈接或外部鏈接的基礎上增加錨標記后綴（#標記名），例如，http://www.mysite.cn/web2_nav/index.html#anchor，就表示跳轉到index.htm頁面中標記為anchor的錨點位置。
另外，根據使用對象的不同，網頁中的鏈接又可以分為：文本超鏈接、圖像超鏈接、E-mail超鏈接、多媒體超鏈接、空鏈接等。
7.1.3 使用<a>標簽
在HTML中，<a>標簽用語定義超鏈接，設計從一個頁面鏈接到另一個頁面。<a>最重要的屬性是href屬性，它指示鏈接的目標 。用法如下：
<a href="#">鏈接文本</a>
<a>標簽包含眾多屬性，其中被HTML5支持的屬性有：
| 屬性 | 取值 | 說明 |
|---|---|---|
| download | filename | 規定被下載的超鏈接目標 |
| href | URL | 規定鏈接指向的頁面的URL |
| hreflang | language_code | 規定被鏈接文檔的語言 |
| media | media_query | 規定被鏈接文檔是為何種媒介/設備優化的 |
| rel | text | 規定當前文檔與被鏈接文檔之間的關系 |
| target | _blank、_parent、_self、 _top、framename |
規定在何處打開鏈接文檔 |
| type | MIME type | 規定被鏈接文檔的MIME類型 |
7.1.4 定義錨點鏈接
創建錨點鏈接的方法：
- 創建用於鏈接的錨點。任何被定義了ID值得元素都可以作為錨點標記，就可以定義指向該位置點的錨點鏈接。注意，給頁面標簽的ID錨點命名時不要含有空格，同時不要置於絕對定位元素內。
- 在當前頁面或者其他頁面不同位置定義超鏈接，為<a>標簽設置href屬性，屬性值為“#+錨點名稱”，如輸入“#P4”。錨點名稱區分大小寫。
7.1.5 定義不同目標的鏈接
超鏈接指向的目標對象可以是不同的網頁，也可以是相同網頁內的不同位置，還可以是一個圖片、一個電子郵件地址、一個文件、一個FTP服務器，甚至是一個應用程序。如：
<p><a href="images/1.jpg"></a></p> <p><a href="demo.html"></a></p> <p><a href="demo.docx"></a></p>
創建E-Mail鏈接方法：
為<a>標簽設置href屬性，屬性值為“mailto:+電子郵件地址+？+subject=+郵件主題”，其中subject表示郵件主題，為可選項目。如：
<a href="mailto:name@qq.com?subject=意見和建議">name@qq.com</a>
7.1.6 定義下載鏈接
當被鏈接的文件不被瀏覽器解析時，如二進制文件、壓縮文件等，便被瀏覽器直接下載到本地計算機中，這種鏈接形式就是下載鏈接。
對於能夠被瀏覽器解析的目標對象，用戶可以使用HTML5新增屬性強制瀏覽器執行下載操作。
<p><a href="images/1.jpg" download>下載圖片</a></p>
7.1.7 定義熱點區域
熱點區域就是為圖像的局部區域定義超鏈接，當單擊該熱點區域時，會觸發超鏈接，並跳轉到其他網頁或網頁的某個位置。
定義熱點區域，需要<map>和<area>標簽配合使用。具體說明如下：
- <map>：定義熱點區域。包含必須的id屬性。
- <area>：定義圖像映射的區域，area元素必須嵌套在<map>標簽中。該標簽包含一個必須設置的屬性alt，定義替換文本。該標簽還包含多個可選屬性。
| 屬性 | 取值 | 說明 |
| coords | 坐標值 | 定義可單擊區域（對鼠標敏感的區域）的坐標 |
| href | URL | 定義此區域的目標URL |
| nohref | nohref | 從圖像映射排除某個區域 |
| shape | default、rect（矩形）、circ（圓形）、poly（多邊形） | 定義區域的形狀 |
| target | _blank、_parent、_self、_top | 規定在何處打開href |
7.1.8 定義框架鏈接
HTML5不支持frameset框架，但是它仍然支持iframe浮動框架的使用。浮動框架可以自由控制窗口大小，可以配合網頁布局在任何位置插入窗口，實際上就是在窗口中再創建一個。
<iframe src="URL">
<iframe>標簽包含多個屬性，被HTML5支持或新增的屬性如下：
| 屬性 | 取值 | 說明 |
|---|---|---|
| frameborder | 1、0 | 規定是否顯示框架周圍的邊框 |
| height | pixels、% | 規定iframe的高度 |
| longdesc | URL | 規定一個頁面，該頁面包含了有關iframe的較長描述 |
| marginheight | pixels | 定義iframe的頂部和底部的邊距 |
| marginwidth | pixels | 定義iframe的左側和右側的邊距 |
| name | frame_name | 規定iframe的名稱 |
| sandlox | allow-forms allow-same-orign allow-scripts allow-top-navigation |
啟用一系列對<iframe>中內容的額外限制 |
| scrolling | yes、no、auto | 規定是否在iframe中顯示滾動條 |
| seamless | seamless | 規定<iframe>看上去像是包含文檔的一部分 |
| src | URL | 規定在iframe中顯示的文檔的URL |
| srcdoc | HTML_code | 規定在<iframe>中顯示的頁面的HTML內容 |
| width | pixels、% | 定義iframe的寬度 |
7.2 設置超鏈接樣式
超鏈接默認樣式：字體顏色為藍色，如果超鏈接被訪問，鏈接文本變成紫色；鏈接文本包含一條下划線；當指針移到超鏈接上時，鼠標指針變成手形。
7.2.1 偽類
偽類就是根據一定的特征對元素進行分類，而不是根據元素的名稱、屬性或內容。在CSS中，偽類是以冒號為前綴的特定名詞，與超鏈接有關的偽類說明如下：
| 偽類 | 說明 |
|---|---|
| :link | 設置超鏈接a在未被訪問前的樣式 |
| :visited | 設置超鏈接a在其鏈接地址已被訪問過時的樣式 |
| :hover | 設置元素在鼠標懸停時的樣式 |
| :active | 設置元素在被用戶激活（在鼠標單擊與釋放之間發生的事件）時的樣式 |
| :focus | 設置元素在成為輸入焦點（該元素的onfocus事件發生）時的樣式 |
7.2.2 定義超鏈接樣式
示例：在下面示例中定義超鏈接默認為紅色下划線效果，當鼠標經過時顯示為綠色下划線效果，當單擊時顯示為黃色下划線屬性，超鏈接被訪問過之后顯示為藍色下划線效果。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>超鏈接樣式</title> 6 <style type="text/css "> 7 .a1:link {color:#F00;} 8 .a1:visited {color:#00F;} 9 .a1:hover {color:#0F0;} 10 .a1:active {color:#FF0;} 11 </style> 12 </head> 13 <body> 14 <ul class="p1"> 15 <li><a href="#" class="a1">首頁</a></li><br/> 16 <li><a href="#" class="a2">新聞</a></li><br/> 17 <li><a href="#" class="a3">微博</a></li> 18 </ul> 19 <ul class="p2"> 20 <li><a href="#" class="a1">關於</a></li><br/> 21 <li><a href="#" class="a2">版權</a></li><br/> 22 <li><a href="#" class="a3">友情鏈接</a></li> 23 </ul> 24 </body> 25 </html>