当前位置:  编程技术>WEB前端

调整CSS类型的顺序改变链接翻滚效果

    来源: 互联网  发布时间:2014-09-06

    本文导语:  你也许已经意识到,你可以通过指定每一键接的不同风格以建立CSS翻滚效果,这些链接包括普通的链接link (normal), 访问,翻转,以及激活。并且,你可能也知道CSS类型的顺序可以产生效果上的差别,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,所以,当链接被点击时,它可以取代所有其它的类型。

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类型。

    注意,a:visited类型中包含指定所有与a:hover相同属性的规则,否则,当访问者的鼠标通过一个访问链接时,没有被a:visited类型取代的任何a:hover类型属性将会继续再现。

来源:网页教学网


    
 
 
 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 如何手动调整网卡的half duplex & full duplex ?如何手动调整网卡的10/100M速度?
  • 在SCO OperServer 5.0.5下如何调整端口的重用延时?
  • linux文件系统调整大小的方法(linux调整分区大小)
  • 如何调整内核频率到10000?
  • C# Winform 禁止用户调整ListView的列宽
  • 图片调整工具 SmillaEnlarge
  • Textarea自动高度调整的插件 jGrow
  • 在linux下面怎么样调整分辨率
  • 怎么样调整文本框的大小?在线等待!
  • [压缩技术]zlib是如何通过参数来调整压缩比和速度?
  • 求助Linux终端调整屏幕位置的问题!谢谢
  • framebuffer驱动 三星6410 调整分辨率
  • LINUX如何调整POSIX消息队列大小
  • ntpd可以缓慢调整时间吗?
  • jTable中行标题的宽度调整问题,急,各位大虾多帮忙啦!
  • 网卡诊断和调整工具 ethtool
  • jQuery窗口大小调整插件 ResizeEnd
  • Applet中JTable不能自动调整列宽?
  • 怎样使一个执行程序具有调整位?
  • redhat8 中的音量调整。


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3