使用css样式美化超链接和鼠标指针

《使用css样式美化超链接和鼠标指针》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、使用CSS样式美化超链接和鼠标指针超链接是整个互联网的基础，通过超链接能够实现页面的跳转、功能的激活等，超链接可以将网站中每个页面关联在一起。通过CSS样式，可以设置出美观大方、具有不同外观和样式效果的超链接，从而增加页面的样式效果和超链接交互效果。本章将介绍如何使用CSS样式对超链接效果进行控制。超链接是网页中最重要、最根本的元素之一，网站中的每一个网页都是通过超链接的形式关联在一起的。如果页面之间是彼此独立的，那么这样的网站将无法正常运行。sghgmyy@126.com主要内容8.1定义超链接样式——制作活动公告8.2超链接伪类应用（1）——制作按钮式超链接8.3超链接伪类

2、应用（2）——制作图像式超链接8.4使用CSS定义鼠标指针样式——改变默认的鼠标指针8.5使用CSS定义鼠标变换效果8.6box-shadow属性（CSS3.0）——为网页元素添加阴影8.7overflow属性（CSS3.0）——网页元素内容溢出处理8.8resize属性（CSS3.0）——在网页中实现区域缩放调节8.9outline属性（CSS3.0）——为网页元素添加轮廓边框sghgmyy@126.com定义超链接样式对于超链接的修饰，通常可以采用CSS伪类。伪类是一种特殊的选择符，能被浏览器自动识别。其最大的用处是在不同状态下可以对超链接定义不同的样式效果，是CSS本身定

3、义的一种类。本实例制作的是一个小活动的内容公告，通过对超链接的4种CSS样式伪类进行设置，实现了文本超链接样式的不同效果。sghgmyy@126.com【任务描述】定义超链接样式sghgmyy@126.com【任务展示】案例效果图定义超链接样式sghgmyy@126.com【任务实现】HTML代码定义超链接样式sghgmyy@126.com【任务实现】CSS样式代码定义超链接样式sghgmyy@126.com【相关知识】超链接是由标签组成，超链接可以是文字或图像。添加了超链接的文字具有自己默认的样式，从而和其他文字区分开，其中默认的超链接样式为蓝色文字且有下划线（

4、如：超链接）。通过CSS可以修饰超链接效果，从而达到美化页面整体的效果。定义超链接样式sghgmyy@126.com对于超链接伪类的设置属性如下：a:link：定义超链接对象在没有访问前的样式；a:hover：定义当鼠标移至超链接对象上时的样式；a:active：定义当鼠标单击超链接对象时的样式；a:hover：定义超链接对象已经被访问过后的样式。定义超链接样式sghgmyy@126.com什么是超链接？超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。而用来超链

5、接的对象，可以是一段文本或者是一个图片。定义超链接样式sghgmyy@126.com按照链接路径的不同，超链接可以分为哪几种类型？可分为以下几类：内部链接；外部链接；锚记链接；脚本链接。超链接伪类应用（1）在网页制作中，通过CSS样式的设置可以制作出各种各样的导航菜单超链接。本实例就是对CSS样式表进行设置，制作出按钮式导航菜单。sghgmyy@126.com【任务描述】超链接伪类应用（1）sghgmyy@126.com【任务展示】案例效果图超链接伪类应用（1）sghgmyy@126.com【任务实现】CSS样式代码超链接伪类应用（1）sghgmyy@126.com【相关知识】

6、在很多网页中，超链接制作成各种按钮的效果，这些效果大多采用图像的方式来实现。通过CSS样式的设置，同样可以制作出类似于按钮效果的导航菜单超链接。超链接伪类应用（1）sghgmyy@126.com按照链接对象的不同，可以将超链接分为哪几类？可分为以下几类：内部链接；图像链接；锚记链接；邮件链接；空链接；多媒体链接。超链接伪类应用（1）sghgmyy@126.com怎样合理地设置网页中的超链接？在网页中创建超链接时，用户需要综合整个网站中的所有页面进行考虑，合理地安排超链接，这样才会使整个网站中的页面具有一定的条理性，创建超链接的建议如下：避免孤立文件的存在；在网页中避免使用过多的

7、超级链接；网页中的超链接不要超过4层；页面较长时可以使用书签；设置主页或上一层的链接。超链接伪类应用（2）本实例制作的是网站页面的导航菜单，通过设置4种伪类样式代码，为文字的超链接添加了好看的背景，使得网页看起来更具有欣赏性。sghgmyy@126.com【任务描述】超链接伪类应用（2）sghgmyy@126.com【任务展示】案例效果图超链接伪类应用（2）sghgmyy@126.com【任务实现】CSS样式代码超链接伪类应用（2）sghgmyy@126.com【相关知识】链接路径可以分为几