學習筆記第七章使用CSS美化超連接

時間 2019-11-30

標籤學習筆記第七使用 css 美化連接欄目 CSS 简体版

原文原文鏈接

第7章使用CSS美化超連接

學習重點

認識超連接
熟悉僞類
定義超連接樣式
可以靈活設計符合頁面風格的連接樣式

7.1 定義超連接

在HTML5中創建超連接須要兩個要素：設置爲超連接的網頁元素和超連接指向的目標地址。css

7.1.1 URL格式

URL（Uniform Resource Locator，統一資源定位器）用語指定網上資源的位置和方式。一般由三部分組成：html

協議（或服務方式）。
存有該資源的主機IP地址（有時也包括端口號）。
主機資源的具體地址，如目錄和文件名等。

示例：protocol://machinename:[port]/directory/filename，其中protocol時訪問該資源所採用的協議，即訪問該資源的方法，簡單說明以下：web

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表示網站地址，後面跟隨字符是站點相對地址。less

錨點連接是一種特殊的連接方式，實際上它是在內部連接或外部連接的基礎上增長錨標記後綴（#標記名），例如，http://www.mysite.cn/web2_nav/index.html#anchor，就表示跳轉到index.htm頁面中標記爲anchor的錨點位置。ide

另外，根據使用對象的不一樣，網頁中的連接又能夠分爲：文本超連接、圖像超連接、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">

屬性	取值	說明
frameborder	一、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>