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

CSS样式表
可以给img元素设置背景图
不通过JavaScript实现的自动滚动视差效果
学DIV+CSS技术,如何入门?
XHTML+CSS制作样式风格切换的WEB站点
解决IE6.0、IE5.0、IE5.5差异
DIV+CSS制作的个性水平导航菜单实例
css里expression实现界面对象的批量控制
利用CSS框架进行高效率的站点开发 Elements
CSS模块化设计:从空格谈起
在IE流览器中正确显示PNG透明图片
CSS样式表创建美妙绝伦的网站
性感的CSS菜单(Menus)
CSS教程关于css框架网页设计
以HTML为基础学习DIV+CSS
提高CSS文件可维护性的五种方法
dl、dt、dd 标记来改造163邮箱的广告条
WEB前端涉及的布局、结构化和标准化
CSS网页制作布局实例教程
CSS教程:认识层叠规则互相作用
ul结合CSS制作网页相册滑动浏览效果

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-11   浏览: 103 ::
收藏到网摘: 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类型属性将会继续再现。