调整CSS类型的顺序改变链接翻滚
所属分类:
网页制作 / CSS
阅读数:
1115
收藏 0赞 0分享
通过指定每一键接的不同风格以建立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类型属性将会继续再现。
css实现的让图片垂直居中的方法
图片的宽度和高度是未知的,没有一个固定的尺寸,在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中,想想感觉还是挺麻烦的,由于最近的项目可能会用到这个方案,所以把一些常用的方法都收集整理了一下。
收藏 0赞 0分享
3个比较有用的网页制作技巧
我们在进行DivCSS布局的时候,非常关注CSS技巧的学习,今天向大家推荐3个所谓的 “顶级”CSS技巧!虽然没有什么新意,但对新手而言却非常重要!
收藏 0赞 0分享
display:inline的用法
和 display:inline 对应的是 display:block,block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素,例如 SPAN 是行内显示的,但是你加了 display:block 属性就不一样了
收藏 0赞 0分享
css样式实现整个页面背景使用一张图片
最近一直被css背景困扰,因为是仿站,别人网站背景图片无论怎样另存,都是相同文件名,打开一看,整个网站的各个角落背景图片都在一个文件中分布,于是上网搜集资料,发现使用这种方法的网站很多,源自于雅虎最早。
收藏 0赞 0分享
关于CSS样式表文件组织形式的整理
以下引用网络上的一篇文章,不知道作者是谁了,总体上概括的不错,但是在实际应用当中还是要根据项目情况来具体实施比较好。
收藏 0赞 0分享
查看更多