第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>
更多专业前端知识，请上 【猿2048】www.mk2048.com
1449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
