当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 调整CSS类型的顺序改变链接翻滚

CSS样式表
css ID类和class类的长命名与短命名
CSS background-position的使用说明详解
利用CSS定位背景图片 background-position
CSS 多图片融合背景定位的应用于优缺点分析
CSS实现的图片宽高自适应固定边框
css 背景图片定位在菜单效果中的应用实例
CSS 速记口诀 可以解决一些常见问题
CSS 多浏览器兼容性问题及解决方案
css 行级元素在多浏览器下的宽度问题 与解决方法
IE下行框高度的问题
CSS 实现的图片宽高自适应固定边框
css的核心内容 标准流、盒子模型、浮动、定位等分析
CSS 超出隐藏实现限制字数的功能代码(多浏览器)
Div+CSS 布局入门教程之二 构建网站
CSS 网页布局中文排版的9则技巧
CSS网页布局25个实用小技巧
网页制作 默认Web字体样式
IE与Firefox的CSS兼容大全 推荐
css 非表格垂直对齐效果代码
css cursor 的可选值(鼠标的各种样式)

CSS样式表 中的 调整CSS类型的顺序改变链接翻滚


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-11   浏览: 73 ::
收藏到网摘: n/a


  通过指定每一键接的不同风格以建立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类型。
  注意,a:visited类型中包含指定所有与a:hover相同属性的规则,否则,当访问者的鼠标通过一个访问链接时,没有被a:visited类型取代的任何a:hover类型属性将会继续再现。