网页设计技术CSS篇08.pptVIP

网页设计之CSS篇 * 第8章　设计具有特色的超链接效果 本章导读: 为了把Internet上众多的网站和网页联系起来，构成一个整体， 就要在网页中加入链接，通过单击网页上的链接才能找到自己所需 的信息。正是因为有了网页之间的链接才形成了这纷繁复杂的网络 世界。本章的重点是掌握超链接标记，背景色变换链接、图像翻转 链接、边框变换链接等，最后通过典型实例讲述了各种超链接特殊 效果的创建。 了解超链接的基本概念熟悉链接标记掌握各种形式的超链接的创建 * 链接是从一个网页或文件到另一个网页或文件的链接，包括图像或多媒体文件，还可以指向电子邮件地址或程序。  * 8.1　超链接基础 CSS提供了4种a对象的伪类，它表示链接的4种不同状态，即link（未访问的链接）、visited（已访问的链接）、active（激活链接）、hover（鼠标停留在链接上），分别对这4种状态进行定义，就完成了对超链接样式的控制。　　 * 8.2　链接标记 a:link表示未访问过的链接的状态，如图所示。　　  * 8.2.1　a:link 　　a:visited表示超链接被访问过后的样式，对于浏览器而言，通常都是访问过的链接比没有访问过的链接颜色稍浅，以便提示浏览者该链接已经被单击过。 * 8.2.2　a:visited a:active表示超链接的激活状态，用来定义鼠标单击链接但还没有释放之前的样式。 * 8.2.3　a:active 　　有时需要对一个网页中的链接文字做不同的效果，并且让鼠标移上时也有不同效果。a:hover指的是当鼠标移动链接上时的样式。 * 8.2.4　a:hover 超链接在本质上属于网页的一部分，它是一种允许同其他网页或站点之间进行链接的元素，各个网页链接在一起后，才能真正构成一个网站。链接样式的美观与否直接关系到网站的整体品质。 * 8.3　各种形式的超链接 下面使用CSS制作一个背景色变换的超链接 ，效果如图所示。 * 8.3.1　背景色变换链接 　　CSS本身没有直接提供变换HTML链接下划线的功能，但只要运用一些技巧，可以让单调的网页链接下划线变得丰富多彩。  * 8.3.2　多姿多彩的下划线链接 　 　采用CSS可以制作图像翻转链接，其制作原理就是a:link和a:hover在不同状态下，利用background-images显示不同的图像制作而成。 * 8.3.3　图像翻转链接 框变换链接时指当鼠标指针经过链接时改变链接对象边框的样式，包括边框颜色、样式和边框宽度。 在网边页中可能会经常用边框变换链接的效果，在传统的做法中，这一效果的实现是比较困难或繁琐的，现在通过CSS实现鼠标移至链接图片，边框发生变换的效果，是非常容易的。 * 8.3.4　边框变换链接 现代网页制作离不开CSS技术，采用CSS技术，可以有效地对页面链接实现更加精确的控制。用CSS不仅可以做出令浏览者赏心悦目的网页，还能给网页添加许多特效。 * 8.4 实战演练 在默认状态下，Windows定义了一套鼠标指针图标移动到不同功能区、执行不同的命令或系统处于不同的状态。在网页中往往只有当鼠标在超级链接上时才显示为手形，在其他地方似乎没有什么变化，不过使用CSS样式可以自由定义各种鼠标样式。 * 实例１——使用CSS实现鼠标指针形状改变 一般在网页中看到的有边框装饰的文字，做法通常是将文字制作成图片，或者再加上随鼠标指针变换的效果。可以使用CSS语法，不用经过这些麻烦的制图手续，就可以轻松制作不同样式的文字边框，甚至也能加上超链接效果。 　　  　　 * 实例2——为超链接文字加上质感边框 使用CSS可以制作鼠标指针移到链接文字上时改变文字大小或颜色， 如图所示。 * 实例3——鼠标指针移到链接文字上时改变文字大小或颜色 如果要让网页在鼠标移动到超链接上时，旁边出现提示文字，一般网页的做法都是采用JavaScript语法，其实，使用CSS也可以实现这种效果 。 * 实例4——给超链接添加提示文字 　 如果想在网页中添加按钮的链接，最快的方法就是在Dreamweaver的表单按钮，然而做出来的按钮都是固定的样式，无法改变造型或颜色，可以利用边框样式语法，来模拟不同的按钮的效果。 * 实例5——文本超链接模拟按钮效果