当前时间 加入收藏 设为首页 联系站长
先锋站长网
您的位置:>首页 -> 技术文章 -> CSS编程->通过CSS类型的顺序改变翻滚效果
通过CSS类型的顺序改变翻滚效果
来源: | 作者: | 时间:2008-03-18 20:58:00 | 录入者:admin
 

你也许已经意识到,你可以通过指定每一键接的不同风格以建立CSS翻滚效果,这些链接包括普通的链接link (normal), 访问,翻转,以及激活。并且,你可能也知道CSS类型的顺序可以产生效果上的差别,CSS代码后顺序的风格将会取代针对于相同元素的前顺序的风格。建立翻滚效果的类型顺序显得相当重要。

现在让我们看看如何安排链接状态的类型在不产生冲突的情况下支持正常的翻滚效果,并且如何重新安排这些类型顺序以获得不同的翻滚效果。

链接状态

典型的CSS翻滚效果依赖于超链接中四个状态之一的独立类型。可以建立附带CSS预先类的(超链接)类型以指定链接状态:

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,所以,当链接被点击时,它可以取代所有其它的类型。
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类型应用到访问链接。结果为非访问链接的翻转效果添加了背景颜色和粗体文本。

[上一篇]通过CSS类型的顺序改变翻滚效果 [下一篇]用CSS的float属性创建三栏布局网..
 评 论
称  呼:
内  容:
·本站发布内容均为客观表达作者观点,不代表本站立场,请勿攻击和漫骂
·网游发表意见仅代表其个人意见,并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯,提倡就事论事,杜绝漫骂和人身攻击等不文明行为
最新文章
站长先锋|先锋站长网 (17日)
企业邮局不断壮大 时代邮箱再.. (26日)
网店办照试行 无本经营亮剑何.. (20日)
CN域名年增长率达94.6% (14日)
解读:“.中国”域名幕后的争.. (14日)
后奥运时代互联网将刮繁体风 (11日)
IE8发布与“.中国”域名系统.. (04日)
抢滩WindowsServer2008 主机.. (28日)
“解百纳”千千结难解 .TM域.. (21日)
奥运商机刺激主机市场供求 (16日)
精彩推荐
站长先锋|先锋站长网 (17日)
企业邮局不断壮大 时代邮箱再添 (26日)
网店办照试行 无本经营亮剑何方 (20日)
CN域名年增长率达94.6% (14日)
解读:“.中国”域名幕后的争夺 (14日)
后奥运时代互联网将刮繁体风 (11日)
IE8发布与“.中国”域名系统启 (04日)
抢滩WindowsServer2008 主机商 (28日)
“解百纳”千千结难解 .TM域名 (21日)
观察:中小网站或渐成互联网主角 (14日)
热门咨询
Fs2You为您提供无限大小免费.. (28日)
用电子商务的网站进行信用卡.. (17日)
免费CN域名注册,每个人最多可.. (28日)
由站长论坛为您提供cn或者com.. (28日)
wap站长大全 (17日)
免费600提供600M免费ASP空间 (28日)
ASP如何获取客户端真实IP地址 (26日)
中国网络为注册会员免费赠送.. (28日)
地方分类信息网站推广重心! (16日)
如何编程删除access表中所有.. (22日)
联系方式:MSN:xFzz@hotmail.com QQ:486031、219741、54817814 电话:010-67216557
Copyright@xFzz.com all rights reserved 京ICP备05047353号
Powered by xFzz Code © 2003-07 bbs.xFzz.com