《使用CSS样式美化超链接和鼠标指针》由会员分享，可在线阅读，更多相关《使用CSS样式美化超链接和鼠标指针（49页珍藏版）》请在金锄头文库上搜索。
1、使用CSS样样式美化超链链接和鼠标标指针针超链接是整个互联网的基础，通过超链接能够实 现页 面的跳转、功能的激活等，超链接可以将网站中 每个页面关联在一起。通过CSS样式，可以设置出美 观大方、具有不同外观和样式效果的超链接，从而增 加页面的样式效果和超链接交互效果。本章将介绍如 何使用CSS样式对超链接效果进行控制。超链接是网页中最重要、最根本的元素之一，网 站中的每一个网页都是通过超链接的形式关联在一起 的。如果页面之间是彼此独立的，那么这样 的网站将 无法正常运行。主要内容8.1 定义超链接样式制作活动公告 8.2 超链接伪类应 用（1）制作按钮式超链接 8.3 超链接伪类应 用（2）制
2、作图像式超链接 8.4 使用CSS定义鼠标指针样式改变默认的鼠标指针 8.5 使用CSS定义鼠标变换 效果 8.6 box-shadow属性（CSS3.0）为网页元素添加阴影 8.7 overflow属性（CSS3.0）网页元素内容溢出处理 8.8 resize属性（CSS3.0）在网页中实现区域缩放调节 8.9 outline属性（CSS3.0）为网页元素添加轮廓边框定义超链接样式对于超链接的修饰，通常可以采用CSS伪类 。伪 类是一种特殊的选择 符，能被浏览 器自动识别 。其最 大的用处是在不同状态下可以对超链接定义不同的样 式效果，是CSS本身定义的一种类。本实例制作的是一个小活动的内容
3、公告，通过对 超链接的4种CSS样式伪类进 行设置，实现 了文本超 链接样式的不同效果。【任务描述】定义超链接样式【任务展示】案例效果图图定义超链接样式【任务实现】HTML代码码定义超链接样式【任务实现】CSS样样式代码码定义超链接样式【相关知识识】超链接是由标签组 成，超链接可以 是文字或图像。添加了超链接的文字具有自己默 认的样式，从而和其他文字区分开，其中默认的 超链接样式为蓝色文字且有下划线（如：超链链接 ）。通过CSS可以修饰超链接效果，从而达到美 化页面整体的效果。定义超链接样式对于超链接伪类的设置属性如下： a:link：定义超链接对象在没有访问前的样式； a:hover：定义当
4、鼠标移至超链接对象上时的样 式； a:active：定义当鼠标单击 超链接对象时的样式 ； a:hover：定义超链接对象已经被访问过 后的样 式。定义超链接样式 什么是超链接？超链接是指从一个网页指向一个目标的连接关 系，这个目标可以是另一个网页，也可以是相同 网页上的不同位置，还可以是一个图片、一个电 子邮件地址、一个文件，甚至是一个应用程序。 而用来超链接的对象，可以是一段文本或者是一 个图片。定义超链接样式 按照链接路径的不同，超链接可以分为哪几种类 型？可分为以下几类：内部链接；外部链接；锚记链 接；脚本链接。超链接伪类应 用（1）在网页制作中，通过CSS样式的设置可以 制作出各种各
5、样的导航菜单超链接。本实例就 是对CSS样式表进行设置，制作出按钮式导航 菜单。【任务描述】超链接伪类应 用（1）【任务展示】案例效果图图超链接伪类应 用（1）【任务实现】CSS样样式代码码超链接伪类应 用（1）【相关知识识】在很多网页中，超链接制作成各种按钮的效 果，这些效果大多采用图像的方式来实现。通 过CSS样式的设置，同样可以制作出类似于按 钮效果的导航菜单超链接。超链接伪类应 用（1） 按照链接对象的不同，可以将超链接分为哪几类 ？可分为以下几类：内部链接；图像链接；锚记链 接；邮件链接；空链接；多媒体链接。超链接伪类应 用（1）n怎样合理地设置网页中的超链接？在网页中创建超链接时，
6、用户需要综合整个网站中 的所有页面进行考虑，合理地安排超链接，这样才会使整 个网站中的页面具有一定的条理性，创建超链接的建议如 下： 避免孤立文件的存在； 在网页中避免使用过多的超级链接； 网页中的超链接不要超过4层； 页面较长时 可以使用书签； 设置主页或上一层的链接。超链接伪类应 用（2）本实例制作的是网站页面的导航菜单，通过设 置4种伪类样 式代码，为文字的超链接添加了好看 的背景，使得网页看起来更具有欣赏性。【任务描述】超链接伪类应 用（2）【任务展示】案例效果图图超链接伪类应 用（2）【任务实现】CSS样样式代码码超链接伪类应 用（2）【相关知识识】n链接路径可以分为几种形式？相对路
7、径：最适合网站的内部链接。只要是属于同一网站 下的，即使不在同一个目录下，相对路径也非常适合。绝对路径：为文件提供完整的路径，包括使用协议。适 合网站的外部链接。根路径：同样适用于创建内部链接，但大多数情况下， 不建议使用此种路径形式。通过适用以下两种情况：当 站点的规模非常大，放置于几个服务器上时；当一个 服务器上同时放置几个站点时。根路很以“ ”开始，然后 是根目录下的目录名。使用CSS定义义鼠标标指针样针样 式通常在浏览网页时，看到的鼠标指针的形状 有箭头、手形和I字形，而在Windows环境下实际 看到的鼠标指针种类要比这个广泛得多。CSS弥补 了HTML语言在这方面的不足，通过cur
8、sor属性可 以设置各式各样的鼠标指针样式。【任务描述】使用CSS定义义鼠标标指针样针样 式【任务展示】案例效果图图使用CSS定义义鼠标标指针样针样 式【任务实现】CSS样样式代码码使用CSS定义义鼠标标指针样针样 式【相关知识识】cursor属性用于设置光标在网页中的视觉效果，通 过样式改变鼠标形状，当鼠标放在被此选择设 置、修饰 过的区域上时，形状会发生改变。具体的形状包括：属性值指针说 明及对应 效果属性值指针说 明及对应 效果crosshair交叉十字n-resize向北的箭头text文本选择 符号nw-resize指向西北的箭头waitWindows等待形状w-resize向西的箭头
9、pointer手形sw-resize指向西南的箭头default默认的鼠标形状s-resize向南的箭头help带问 号的鼠标se-resize指向东南的箭头e-resize向东的箭头move移动指针ne-resize指向东北的箭头auto正常鼠标使用CSS定义义鼠标标指针样针样 式n可以在一个页面中为不同的区域或元素应用多种 光标指针效果吗？可以。可以在多个类CSS样式中定义不同的 cursor属性，将光标指针定义为多种不同的效果， 在页面中分别为相应的区域或元素应用相应的类 CSS样式即可。但通常情况下，光标指针效果在网页中使用较 少，通常都是采用系统默认的光标指针效果，在网 页中应用光标
10、指针效果最多不超过两种，否则会影 响网页的便利性。 使用CSS定义义鼠标变换标变换 效果了解了如何设置鼠标样式，就可以轻松地制作 出鼠标指针变化的超链接效果了，即鼠标移至某个 超链接对象上时，可以实现超链接颜色变化、背 景图像发生变化，并且鼠标指针也可以发生变 化。本实例制作的是一个艺术网站的小页面，通过 定义相应的类CSS样式，从而实现了改变鼠标变 换样式的效果。【任务描述】使用CSS定义义鼠标变换标变换 效果【任务展示】案例效果图图使用CSS定义义鼠标变换标变换 效果【任务实现】HTML代码码和CSS样样式代码码box-shadow属性（CSS3.0）在CSS中新增了为元素添加阴影的新属性
11、box- shadow，通过该属性可以轻松地实现网页中元素 的阴影效果。【任务描述】box-shadow属性（CSS3.0）【任务展示】案例效果图图box-shadow属性（CSS3.0）【任务实现】CSS样样式代码码box-shadow属性（CSS3.0）box-shadow属性的语法格式如下：第1个值表示阴影水平偏移值，可以取正、负值 ； 第2个值表示阴影垂直偏移值，可以取正、负值 ； 第3个值表示阴影模糊值。 color：用于设置阴影的颜色。【相关知识】box-shadow : | ; box-shadow属性（CSS3.0）n如果不通过CSS3.0新增的box-shadow属性，如 何
12、实现网页元素的阴影效果？目前各浏览器对CSS3.0的支持不相同。如果不 使用CSS3.0新增的box-shadow属性，要实现网页 元素的阴影效果，可以通过CSS中的shadow或 Dropshadow滤镜来实现。 overflow属性（CSS3.0）当对象的内容超过其制定的高度及宽度时， 应该如何进行处理？在CSS3.0中新增了overflow属 性，通过该属性可以设置当内容溢出时的处理方 法。本实例制作的是一个卡通插画页面，通过对 overflow属性的设置，很好地处理了内容溢出的问 题，使得页面变得更加整洁、美观且具有实用性。【任务描述】overflow属性（CSS3.0）【任务展示】案
13、例效果图图overflow属性（CSS3.0）【任务实现】CSS样样式代码码overflow属性（CSS3.0）【相关知识】overflow属性的语法格式如下：overflow : visible | auto | hidden | scroll ; 属性值说明visible不剪切内容也不添加滚动 条。auto在需要时剪切内容并添加滚动 条。hidden不显示超过对 象尺寸的内容。Scroll总是显示滚动 条。Overflow属性值值overflow属性（CSS3.0）n能不能当内容溢出时，控制其只显示垂直或水平 方向上的滚动条？可以，overflow属性还有两个相关属性overflow-x
14、和overflow-y，分别用于设置水平方向溢出处理和 垂直方向上的溢出处理， 其属性值和设置方法与 overflow属性完全相同。垂直方向显显示滚动滚动 条resize属性（CSS3.0）在CSS中新增了区域缩放调节的功能设置，通 过新增的resize属性，就可以实现页 面中元素的区 域缩放操作，调节元素的尺寸大小。本实例通过添加相应的代码部分，使该页面中 的部分区域对象有了缩放调节的功能。【任务描述】resize属性（CSS3.0）【任务展示】Firefox浏览浏览 器中效果图图resize属性（CSS3.0）【任务实现】CSS样样式代码码resize属性（CSS3.0）【相关知识】resize属性的语法格式如下：resize : none | both | horizontal | vertical | inherit ; 属性值说明none不提供元素尺寸调整机制。both提供元素尺寸的双向调整机
