调整CSS类型的顺序改变链接状态

2016-02-19 20:27 8 1 收藏

有了下面这个调整CSS类型的顺序改变链接状态教程,不懂调整CSS类型的顺序改变链接状态的也能装懂了,赶紧get起来装逼一下吧!

【 tulaoshi.com - Web开发 】

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

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  链接状态

  典型的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,所以,当链接被点击时,它可以取代所有其它的类型。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  CODE:

以下是引用片段:
  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类型属性将会继续再现。

来源:http://www.tulaoshi.com/n/20160219/1623745.html

延伸阅读
标签: PS 电脑
第一种方法——拖动法。 在网上找几张图片,使用ps制作一张多图层的图片。可以看到这张图片是由几个图层组成的。第一层是——图层0,第二层是——图层1,第三层是——图层2。 在图层2上按住鼠标左键不放,把它拖移到图层1的下面,松开鼠标。现在图层2就到了图层1的下面了。 第二种方法——菜单法。 先选中要移动的图层,然后点...
标签: 瑜伽 养生 健康
虽说瑜伽是柔和的运动,可对那些体力欠佳、缺乏运动或患有慢性病的人群来说,有些动作还是很困难的。今天图老师小编就教大家一些比较安全又能让你塑形的瑜伽动作,人人都能练哦。 坐姿的勇士 一般而言,美媚们的腿力比较不足,当做到勇士式时需要靠着稳健的双腿给予你全身性的支持,这时是不是觉得光想到就开始没力了,没关系…肌耐力...
标签: 老人养生
老年人心理保健知识一、 可以养宠物,可爱的小花猫、通人性的小狗,一举一动,使人唤起生机,宠物的陪伴让人不感到寂寞。但应注意宠物的卫生,要防“猫抓热”“狂犬病&rdq(www.tulaoshi.com)uo;等传染病。 老年人心理保健知识二、 可以以音乐为伴,典雅、优美、悦耳的乐曲,是一种天然镇痛和镇静剂,有助于消除闷闷不乐的情...
一、实现原理 Windows系统通过GDI(图形设备接口)将系统的硬件和用户可以操作的编程接口相分离,以保证系统的稳定型和安全性。当某一个设备的硬件配置发生变化时,Windows发送广播消息WM_DEVICECHANGE给相关的应用和设备驱动程序,此时在应用程序中可以截获该消息并分析其中的消息参数,先分辨当前的消息内容,然后调用不同的事件处理程序...
标签: 电脑入门
PowerPoint中的超链接功能能够让幻灯片可以不受顺序限制,并且可以随时打开其他文件或者网页。但是默认情况下,当对文字插入超链接后,文字会变成蓝色并且带有下划线并且不能修改。 有时候,我们的幻灯片背景颜色与超链接的颜色相同或相近,使得超链接不易辨认,所以为了改变超链接的颜色,我们可以通过以下几步来实现。 以下面一张幻灯片为...

经验教程

457

收藏

88
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部