通过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类型。如以下代码改变CSS代码中类型顺序可以改变访问链接中翻滚效果:

a:link {
    color: #0000FF;
    text-decoration: underline;
    font-weight: normal;
    font-style: normal;
}
a:hover {
    color: #0000FF;
    text-decoration: underline;
    background-color: #FFFF00;
    font-weight: bold;
    font-style: normal;
}
a:visited {
    color: #3399FF;
    text-decoration: underline;
    background-color: #FFFFFF;
    font-style: italic;
    font-weight: normal;
}
a:active {
    color: #FF0000;
    text-decoration: none;
    background-color: #CCCCCC;
    font-weight: bold;
    font-style: normal;
}

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

增添其它效果

除非被其它顺序的类型取代,以前的类型将会继续使用相同的元素。所以,仔细选择链接状态类型的特征和顺序可以让你对非访问和访问链接建立不同的翻滚效果。

例如,删除背景颜色:#FFFFFF,以上第二个范例代码中的a:visited类型规则将允许背景颜色从a:hover类型应用到访问链接。结果为非访问链接的翻转效果添加了背景颜色和粗体文本。

时间: 2024-11-02 18:43:44

通过CSS类型的顺序改变网页超级连接翻滚效果的相关文章

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

你也许已经意识到,你可以通过指定每一键接的不同风格以建立CSS翻滚效果,这些链接包括普通的链接link (normal), 访问,翻转,以及激活.并且,你可能也知道CSS类型的顺序可以产生效果上的差别,CSS代码后顺序的风格将会取代针对于相同元素的前顺序的风格.建立翻滚效果的类型顺序显得相当重要.     现在让我们看看如何安排链接状态的类型在不产生冲突的情况下支持正常的翻滚效果,并且如何重新安排这些类型顺序以获得不同的翻滚效果.     链接状态     典型的CSS翻滚效果依赖于超链接中四个

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

css|链接     你也许已经意识到,你可以通过指定每一键接的不同风格以建立CSS翻滚效果,这些链接包括普通的链接link (normal), 访问,翻转,以及激活.并且,你可能也知道CSS类型的顺序可以产生效果上的差别,CSS代码后顺序的风格将会取代针对于相同元素的前顺序的风格.建立翻滚效果的类型顺序显得相当重要.     现在让我们看看如何安排链接状态的类型在不产生冲突的情况下支持正常的翻滚效果,并且如何重新安排这些类型顺序以获得不同的翻滚效果.     链接状态     典型的CSS翻滚

通过CSS类型的顺序改变翻滚效果

css 你也许已经意识到,你可以通过指定每一键接的不同风格以建立CSS翻滚效果,这些链接包括普通的链接link (normal), 访问,翻转,以及激活.并且,你可能也知道CSS类型的顺序可以产生效果上的差别,CSS代码后顺序的风格将会取代针对于相同元素的前顺序的风格.建立翻滚效果的类型顺序显得相当重要.  现在让我们看看如何安排链接状态的类型在不产生冲突的情况下支持正常的翻滚效果,并且如何重新安排这些类型顺序以获得不同的翻滚效果. 链接状态 典型的CSS翻滚效果依赖于超链接中四个状态之一的独立

JS+CSS实现自动切换的网页滑动门菜单效果代码_javascript技巧

本文实例讲述了JS+CSS实现自动切换的网页滑动门菜单效果代码.分享给大家供大家参考.具体如下: 这是一款支持自动切换功能的网页滑动门菜单,JS与CSS结合的技术成果,有人说它是自己会切换的网页选项卡标签面板,QQ登录后弹出的每日要闻迷你窗口中有类似效果,但是代码写法却是截然不同的,每一位作者的思路是不同的,因此您多了一份参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-auto-cha-tab-menu-style-code

css实现固定元素在网页右下角浮动层效果(兼容ie、chrome、Firefox)

但是在IE6下,并不支持position:fixed属性,这个时候我们需要对IE6进行hack处理.解决的方案是使用postion:absolute属性,它的作用大家都很熟悉,相对于父元素进行绝对定位,然后我们可以通过expression来改变#ads的top值. PS expression的定义:IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javas cript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性.就是说CSS属性后面可以是一

利用PHP和CSS改变网页文字大小

  用PHP和CSS改变网页文字大小--在设计网站的时候,要牢记一点:并不是所有的访问者都是神采奕奕的年轻人,而且他们也不一定完全熟悉Web浏览器的各种使用方法. 在设计网站的时候,要牢记一点:并不是所有的访问者都是神采奕奕的年轻人,而且他们也不一定完全熟悉Web浏览器的各种使用方法.聪明的设计者了解这一点,他们常常将各种特殊的可访问特性融入网站的设计中,这样,即使是年长者或是残疾人士都可以方便舒适地使用网站,而不必花费额外的力气. 文本大小调节器是最有效的可访问特性中的一个,任何网站都可能需要

JavaScript框架操作DOM改变网页元素的内容和外观

DOM操作 在此之前,你已经看到JavaScript框架使用选择器和DOM遍历可以很容易的获得特定的元素.但是,为了改变网页上特定元素的内容和外观,你需要操作DOM并应用改变.使用纯粹的JavaScript将是一件繁重的工作,但幸运的是,大多数JavaScript框架提供有用的函数,可以很容易地做到这些. 假设你有一个ID为the-box的盒子. <div id="the-box">Message goes here</div> 使用jQuery将其文本改变为&

如何掌握CSS精要,学习网页布局教程

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 CSS是不是真的很难学?其实不难,只是缺少了掌握的经验,拿着一本书硬肯,有没有收获?有!但可能成效不大,作为过来人我觉得被动学习想要记住的东西是很难的,学习它我的经验是可以先掌握精要(重要属性开始),待掌握精要自然而然这些属性远远不够满足自己的需求引起自己求知的欲望,自动延伸其他相关的属性从而自然掌握和加深对CSS的认识.这是我认为的一种方法

JavaScript+CSS实现仿天猫侧边网页菜单效果_javascript技巧

本文实例讲述了JavaScript+CSS实现仿天猫侧边网页菜单效果.分享给大家供大家参考.具体如下: 这是一款自己写的仿天猫的菜单效果,二级分类的功能已经实现,但没有美化,留着用的朋友自己完善吧,JS功能已经实现,鼠标移在主分类上,二级分类向右伸出展开,目前淘宝网.天猫购物.京东都在用的导航菜单特效,测试时候请先点击一下菜单,主菜单就显示出来了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-ftamil-web-menu-st