第7章  使用CSS美化超链接

学习重点

  • 认识超链接
  • 熟悉伪类
  • 定义超链接样式
  • 能够灵活设计符合页面风格的链接样式

7.1  定义超链接

在HTML5中建立超链接需要两个要素：设置为超链接的网页元素和超链接指向的目标地址。

7.1.1 URL格式

URL（Uniform Resource Locator，统一资源定位器）用语指定网上资源的位置和方式。通常由三部分组成：

  1. 协议（或服务方式）。
  2. 存有该资源的主机IP地址（有时也包括端口号）。
  3. 主机资源的具体地址，如目录和文件名等。

示例：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 定义锚点链接

创建锚点链接的方法：

  1. 创建用于链接的锚点。任何被定义了ID值得元素都可以作为锚点标记，就可以定义指向该位置点的锚点链接。注意，给页面标签的ID锚点命名时不要含有空格，同时不要置于绝对定位元素内。
  2. 在当前页面或者其他页面不同位置定义超链接，为<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 定义超链接样式

示例：在下面示例中定义超链接默认为红色下划线效果，当鼠标经过时显示为绿色下划线效果，当单击时显示为黄色下划线属性，超链接被访问过之后显示为蓝色下划线效果。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>超链接样式</title>

     <style type="text/css ">

         .a1:link {color:#F00;}

         .a1:visited {color:#00F;}

         .a1:hover {color:#0F0;}

         .a1:active {color:#FF0;}

     </style>

 </head>

 <body>

 <ul class="p1">

     <li><a href="#" class="a1">首页</a></li><br/>

     <li><a href="#" class="a2">新闻</a></li><br/>

     <li><a href="#" class="a3">微博</a></li>

 </ul>

 <ul class="p2">

     <li><a href="#" class="a1">关于</a></li><br/>

     <li><a href="#" class="a2">版权</a></li><br/>

     <li><a href="#" class="a3">友情链接</a></li>

 </ul>

 </body>

 </html>

定义超链接样式

学习笔记 第七章 使用CSS美化超链接的更多相关文章

  1. 学习笔记 第五章 使用CSS美化网页文本

    第五章   使用CSS美化网页文本 学习重点 定义字体类型.大小.颜色等字体样式: 设计文本样式,如对齐.行高.间距等: 能够灵活设计美观.实用的网页正文版式. 5.1 字体样式 5.1.1 定义字体 ...

  2. 学习笔记 第六章 使用CSS美化图片

    第六章  使用CSS美化图片 6.1  在网页中插入图片 GIF图像 跨平台能力,无兼容性问题: 具有减少颜色显示数目而极度压缩文件的能力,不会降低图像的品质(无损压缩): 支持背景透明功能,便于图像 ...

  3. JVM学习笔记-第七章-虚拟机类加载机制

    JVM学习笔记-第七章-虚拟机类加载机制 7.1 概述 Java虚拟机描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这个过程被 ...

  4. [Python学习笔记][第七章Python文件操作]

    2016/1/30学习内容 第七章 Python文件操作 文本文件 文本文件存储的是常规字符串,通常每行以换行符'\n'结尾. 二进制文件 二进制文件把对象内容以字节串(bytes)进行存储,无法用笔 ...

  5. o'Reill的SVG精髓（第二版）学习笔记——第七章

    第七章:路径 所有描述轮廓的数据都放在<path>元素的d属性中(d是data的缩写).路径数据包括单个字符的命令,比如M表示moveto,L表示lineto.接着是该命令的坐标信息. 7 ...

  6. [HeadFist-HTMLCSS学习笔记][第七章CSS入门：加一点样式]

    CSS入门 style元素设置CSS 基本格式 <style type="text/css"> body { background-color: #eaf3da; } ...

  7. 《DOM Scripting》学习笔记-——第七章 动态创建html内容

    本章内容: 1.动态创建html内容的“老”技巧:document.write()和innerHTML属性 2.DOM方法:createElement(),creatTextNode(),append ...

  8. 大前端学习笔记【七】关于CSS再次整理

    如果你在日常工作中使用 CSS,你的主要目标可能会重点围绕着使事情“看起来正确”.如何实现这一点经常是远不如最终结果那么重要.这意味着比起正确的语法和视觉结果来说,我们更少关心 CSS 的工作原理. ...

  9. HTML5学习笔记（七）：CSS盒子模型

    在CSS中,盒子模型有W3C标准盒子模型和IE盒子模型两种,这里所谈的是基于W3C标准的盒子模型. 所有HTML元素都可以看作盒子,即所有HTML标签都支持盒子模型的属性,在CSS中,"bo ...

随机推荐

  1. android ImageUtils 图片处理工具类

    /** * 加入文字到图片.相似水印文字. * @param gContext * @param gResId * @param gText * @return */ public static Bi ...

  2. UML之实现图

    我们前面学过的用例图.类图.活动图.顺序图和协作图都描写叙述了逻辑和设计方面的信息.那么如今我们来学习和实现有关的两个图:构件图和部署图. 实现图用来描写叙述实现方面的信息,它从系统的层次来描写叙述下 ...

  3. BestCoder #49 Untitled HDU 5339

    BestCoder #49 Untitled  HDU 5339 题目: http://acm.hdu.edu.cn/showproblem.php? pid=5339 本题採用深搜, 数据量小,先做 ...

  4. 2016/3/27 分页 共X条数据 本页x条 本页从x-y条 x/y页 首页 上一页 123456 下一页 末页 pagego echo $page->fpage(7,6,5,4,3,2,1,0);

    显示效果: fpage.class.php <?php /** file: page.class.php 完美分页类 Page */ class Page { private $total; / ...

  5. SAP 常用增强记录文档

    转自:http://blog.csdn.net/budaha 20170215需要一个PR 修改保存时候的增强,目的是同步PR的处理状态 EBAN-STATU 到一个自建表ZTPRTOPO,记得有个P ...

  6. C # 踩坑记录（20190603）

    由于公司战略层需求,需要学习c#,在此仅记录相关问题,以便后期回顾. 学习路线 .NET 框架学习与C # 的关系 Visual Studio 简介及相关帮助网站(msdn) Main 方法及&quo ...

  7. URAL1099 Work Scheduling —— 一般图匹配带花树

    题目链接:https://vjudge.net/problem/URAL-1099 1099. Work Scheduling Time limit: 0.5 secondMemory limit: ...

  8. js 弹出对话框的方法总结

    原文:http://www.cnblogs.com/xiaofengfeng/archive/2012/10/20/2732784.html <!DOCTYPE html PUBLIC &quo ...

  9. FMDB数据库队列

    一.代码示例 1.需要先导入FMDB框架和头文件,由于该框架依赖于libsqlite库,所以还应该导入该库. 2.代码如下: 1 // 2 // YYViewController.m 3 // 05- ...

  10. 七.OC基础加强--1.内存管理 2.野指针,内存泄露 3.set方法的内存管理 4.@property参数 5.@class和循环retain的使用 6.NSString的内存管理

    1,内存管理简单介绍 1,为什么要有内存管理? malloc selloc dealloc```需要回头复习 一般的内存 4s 是512m内存:6 是1024m内存: 当内存过大时,会耗尽内存.出现程 ...