第8章 用CSS控制超链接.ppt

1、第8章 用CSS控制超链接样式,超链接是指从一个网页指向一个目标的连接关系，这个目标 可以是另一个网页，也可以是相同网页上的不同位置，还可以是 一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序 。在网页中能成为超链接的元素可以是一段文本或者是一个图片 。当浏览者选择已经链接的文字或图片后,链接目标将显示在浏览 器上，并且根据目标的类型来打开或运行。 本章内容包括： 使用伪类改变超链接的基本样式 制作虚线下划线的超链接 使用超链接来制作一个排行榜 实现超链接的翻转效果 制作一个实用的工具栏,8.1 改变超链接的基本样式,网页上的超链接通常是文字或者图片 代码： 新浪首页 a:linkco

2、lor:green; a:active color:red; a:visited color:orange; a:hovercolor:blue;,8.2 丰富超链接的表现形式,网页中的超链接往往具有非常丰富的表现形式。综合 应用文字和图片能使超链接的样式产生多种变化。,8.2.1 超链接背景图的巧妙运用,为了提高用户的注意，提供点击率，在网页中的超链 接常常使用一些引人瞩目的图片来修饰。通常将这些图片作 为背景图插入到超链接中。 本节提供两个小的实例来讲述如何巧妙地设置超链接 的背景图。 1制作虚线下划线 例8-1 2制作排行榜 例8-2,8.2.2 超链接翻转效果,除了能给a标签设置背景图

3、，也能给超链接的伪类设置 背景图。若给a:hover设置背景图，那么当鼠标滑过该超链 接就能使图片产生翻转效果。本小节中包含两个小实例，第 一个实例使用简单的背景颜色实现翻转，第二个实例使用背 景图片实现翻转。 1使用背景颜色实现的翻转效果 例8-3 2使用背景图片实现的翻转效果 例8-4,8.3 本章实例：制作实用工具栏,网页的左边栏或者右边栏通常会放置实用的工具栏。 在工具栏里放置许多常被用户点击的热门标签（tag）和实 用的网址链接。在实用工具栏中用户可以方便地查找到需要 的信息。 本章实例将讲解如何实用制作一个实用工具栏。在该 实用工具栏中，大部分都是单一的超链接，但巧妙地运用 CSS

4、样式能使工具栏外观简洁而精美。,步骤： 1.新建一个文件夹名为chapter8，在该文件夹中新建一个标准XHTML文档，命名为index.html。然后再新建一个images文件夹，用于存放图片。为了兼容大部分浏览器，要把整个网页的边距和补白初始值都设置为0.实用工具栏由两部分组成：一个是标签组，一个实用工具组。在XHTML文档中使用两个div 标签来分块。第一个div用于嵌入标签组的部分，第二个div用于实用工具组的部分。为标签组指定一个类选择器tag，为实用工具组指定一个类选择器tools。 2.设置div标签的width属性来限定div标签的宽度，然后设置margin属性拉开两个div标

5、签的距离。在第一个div标签组中插入内容。设置h4和超链接的方式。,3.每个超链接之间的空隙非常小，为了拉开每个超链接的距离，设置其右边距为10px。由于设置了div 标签的宽度为300px，所以每行超链接的总宽度超过300px就会换行，但会造成同一个超链接的文字被分列在两行，设置white-space属性为nowrap。 4.实用工具组包括七个实用工具，在实用工具组的div 标签中嵌入七个超链接，为每个超链接指定一个ID选择器，使用ID选择器添加每个工具的背景图。 5.为将背景图完全显示出来，要设置超链接的display属性为block，同时设置超链接左补白为50px。在超链接中使用了p标签来嵌入工具的使用说明，要设置p标签的样式。,8.4 常见面试题,问题1：制作超链接的背景图时，是否一定要设置其宽高？ 问题2：是不是所有标签都能设置成超链接？,8.5 小结,本章讲解了使用CSS样式来美化页面中的超链接。超链接的 伪类共有四个，分别是link、hover、visited和active。设 置超链接的伪类的样式能提高网页的用户体验。 本章利用两个小实