当前位置:
文档之家› HTML5网页制作技术第20章 超链接样式
HTML5网页制作技术第20章 超链接样式
A. :link
B. :visited
C. :hover
D. :active
2、在实际开发中,如果想要定义超链接未访问时的样式,可以使用 ( )。
A. a{}
B.a:visited{}
C. a:hover{]
D. a:active{}
3、我们可以使用( )来实现鼠标悬停在超链接上时为无下划线效
果。
A. a{text-decoration:underline;}
【疑问】:为什么我的浏览器中的超链接是紫色的呢?用color 属性重新定义也无效,这是怎么回事?
如果某一个地址的超链接在之前被点击过,浏览器就会记下 你的访问记录。那么下次你再用这个地址作为超链接地址时,由 于之前你已经访问过了,当然就是紫色的啦。小伙伴们换一个地 址就可以了。
20.2 深入了解:hover
第20章 超链接样式
教学重点
➢ 掌握超链接伪类 ➢ 深入了解:hover的使用场合 ➢ 掌握鼠标样式
20.1 超链接伪类
• 超链接在鼠标点击不同时期的样式是不一样的:
➢ 默认情况下:字体为蓝色,带有下划线 ➢ 鼠标点击时:字体为红色,带有下划线 ➢ 鼠标点击后:字体为紫色,带有下划线
• 在CSS中,我们可以使用“超链接伪类”来定义超链接在鼠 标点击的不同时期的样式。
• 在实际开发中,我们只会用到2种状态:未访问时状态和鼠 标经过状态。
• 语法:
a:link{…} a:visited{…} a:hover{…} a:active{…}
伪类 a:link a:visited a:hover a:active
说明 定义a元素未访问时的样式 定义a元素访问后的样式 定义鼠标经过a元素时的样式 定义鼠标点击激活时的样式
B. a{text-decoration:none;}
C. a:link{text-decoration:underline;}
D. a:hover{text-decoration:none;}
4、下面有关超链接样式说法中,正确的是( )。 A. 对于超链接的下划线,我们可以使用“text-decoration:none;”去
(1)未访问时:没有下划线,颜色为红色 (2)鼠标经过时:有下划线,颜色为蓝色பைடு நூலகம்
• “:hover伪类”可以定义任何一个元素在鼠标经过时的样式! 注意,是任何元素!
• “:hover伪类”应用非常广泛,任何一个网站都会大量地用 到,请重点掌握。
20.3 鼠标样式
• 在CSS中,对于鼠标样式的定义,我们有2种方式:
➢ 浏览器鼠标样式 ➢ 自定义鼠标样式
1、浏览器鼠标样式
• 在CSS中,我们可以使用cursor属性来定义鼠标样式。 • 在实际开发中,我们一般只会用到default、pointer、text这3
个取值。 • 语法:
cursor:取值;
2、自定义鼠标样式
• 在CSS中,我们还可以使用cursor属性来自定义鼠标样式。 • 其中鼠标图片后缀名一般都是.cur,可以使用Photoshop来制
作 • 语法:
cursor: url(图片地址), 属性值;
练习题
一、单选题
1、下面哪一个伪类选择器是用于定义鼠标经过元素时样式的?( )
掉
B. cursor属性自定义鼠标样式时,使用的图片文件后缀名可以 是.png
C. :hover伪类只能用于a元素,不能用于其他元素 D. 对于超链接来说,在实际开发中,我们一般只会定义2种状态: 鼠标经过状态和点击后状态
二、编程题
1、在网页中添加一段文本链接,并且设置其在不同的状态下显示不 同的效果。要求: