学习笔记第七章使用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>

定义超连接样式

学习笔记 第七章 使用CSS美化超连接

第7章 使用CSS美化超连接