游客:
注册
|
登录
|
帮助
网友俱乐部
»
网页制作
»
HTML/CSS教程
» 通过CSS类型的顺序改变翻滚效果
网友生活网
|
网友学堂
如何获得金币?
诚招斑竹
IP归属地查询 PR查询 收录查询 whois查询
免费超短2级域名,your.jpy.cc
传世私服
|
传奇世界私服
注册亚洲交友中心,找个人来同居吧!
免费存储空间,免费网络硬盘
‹‹ 上一主题
|
下一主题 ››
投票
交易
悬赏
活动
打印
|
推荐
|
订阅
|
收藏
标题: 通过CSS类型的顺序改变翻滚效果
ljjk5
元帅
UID 46706
精华
1
积分 99426
帖子 49690
威望 554
金币 48489
热心 505
阅读权限 100
注册 2007-2-25
状态 离线
#1
使用道具
发表于 2007-11-24 21:04
资料
个人空间
主页
短消息
加为好友
通过CSS类型的顺序改变翻滚效果
你也许已经意识到,你可以通过指定每一键接的不同风格以建立CSS翻滚效果,这些链接包括普通的链接link (normal), 访问,翻转,以及激活。并且,你可能也知道CSS类型的顺序可以产生效果上的差别,CSS代码后顺序的风格将会取代针对于相同元素的前顺序的风格。建立翻滚效果的类型顺序显得相当重要。
现在让我们看看如何安排链接状态的类型在不产生冲突的情况下支持正常的翻滚效果,并且如何重新安排这些类型顺序以获得不同的翻滚效果。
链接状态
典型的CSS翻滚效果依赖于超链接中四个状态之一的独立类型。可以建立附带CSS预先类的<a>(超链接)类型以指定链接状态:
a:link——常规,非访问超链接
a:visited——访问超链接
a:hover——访问者操作鼠标通过时的链接
a:active——点击链接 为了能够使典型的CSS翻滚效果正常工作,CSS代码中的CSS类型顺序显得非常重要,无论它是一个外部类型表格或者是嵌入在HIML页标题栏中的类型规则。
a:link类型出现的时间为最早,因为它可应用于所有的链接。a:visited类型排第二,它将取代任何链接的a:link格式。(如果a:link类型紧跟着的是a:visited,a:link可能会取代a:visited类型。)其次是
a:hover类型,此类型只应用于访问鼠标下的链接。最后是
a:active,所以,当链接被点击时,它可以取代所有其它的类型。
以下CSS所示的翻滚效果:
a:link {
color: #0000FF;
text-decoration: underline;
font-weight: normal;
font-style: normal;
}
a:visited {
color: #3399FF;
text-decoration: underline;
background-color: #FFFFFF;
font-weight: normal;
font-style: italic;
}
a:hover {
color: #0000FF;
text-decoration: underline;
background-color: #FFFF00;
font-weight: bold;
font-style: normal;
}
a:active {
color: #FF0000;
text-decoration: none;
background-color: #CCCCCC;
font-weight: bold;
font-style: normal;
}
在CSS代码中的类型顺序确定了每一种类型如何取代其它的类型,即更多的类型可以应用到特定的元素。正常情况下,a:hover类型处于a:link和a:visited类型之后,所以hover状态的类型可以应用于常规和访问的链接。但是,它也并非必须遵循这一方式,你可以改变类型顺序实现不同的效果。
假设你想在非访问链接中使用翻滚效果,但不想影响到其它访问链接,你或许想到通过代码来处理这种外形上改变,然而你所要做的是重新组织CSS代码。
从访问链接中移除翻滚效果,可以通过很简单地移除a:visited类型。如以下代码改变CSS代码中类型顺序可以改变访问链接中翻滚效果:
a:link {
color: #0000FF;
text-decoration: underline;
font-weight: normal;
font-style: normal;
}
a:hover {
color: #0000FF;
text-decoration: underline;
background-color: #FFFF00;
font-weight: bold;
font-style: normal;
}
a:visited {
color: #3399FF;
text-decoration: underline;
background-color: #FFFFFF;
font-style: italic;
font-weight: normal;
}
a:active {
color: #FF0000;
text-decoration: none;
background-color: #CCCCCC;
font-weight: bold;
font-style: normal;
}
注意,
a:visited类型中包含指定所有与a:hover相同属性的规则,否则,当访问者的鼠标通过一个访问链接时,没有被a:visited类型取代的任何a:hover类型属性将会继续再现。
增添其它效果
除非被其它顺序的类型取代,以前的类型将会继续使用相同的元素。所以,仔细选择链接状态类型的特征和顺序可以让你对非访问和访问链接建立不同的翻滚效果。
例如,删除背景颜色:#FFFFFF,以上第二个范例代码中的
a:visited类型规则将允许背景颜色从a:hover类型应用到访问链接。结果为非访问链接的翻转效果添加了背景颜色和粗体文本。
网友
ljjk5
签名 - 网友社区
===
[广告]
免费域名(Free Subdomain)
免费空间(Free hosting)
PR查询(Google Pagerank)
投票
交易
悬赏
活动
控制面板首页
编辑个人资料
积分交易
公众用户组
好友列表
个人空间管理
基本概况
流量统计
客户软件
发帖量记录
论坛排行
主题排行
发帖排行
积分排行
在线时间
管理团队
管理统计
当前时区 GMT+8, 现在时间是 2008-10-12 09:14
信产部ICP备案:
京ICP备05066424号
北京市公安局网监备案:1101050648号
Powered by
Discuz!
5.5.0
TOP
清除 Cookies
-
联系我们
-
网友俱乐部
-
Archiver
-
WAP