您现在的位置是:首页 > 正文

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

2024-02-01 03:23:39阅读 2
<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
你也许已经意识到,你可以通过指定每一键接的不同风格以建立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类型应用到访问链接。结果为非访问链接的翻转效果添加了背景颜色和粗体文本。

<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

网站文章

  • getaddrinfo ENOENT raw.githubusercontent.com

    找到问题所在,解决起来就容易得多了,直接找到可用的ip地址写进host里面,这里刚好有一个,如果下面的ip地址不行,找到可用ip地址就好。发生场景:react 老项目在执行npm install时报错。

    2024-02-01 03:23:31
  • 同符号数学运算

    描述 读入一个整数N,分别计算如下内容: 1. N的绝对值; 2. N与10进行同符号加法、减法和乘法运算,同符号运算指使用N的绝对值与另一个数进行运算,运算结果的绝对值被赋予N相同的符号,其中,0的符号是正号。 将上述4项结果在一行输出,采用空格分隔,输出结果均为整数。 程序如下: n=eval(input())a=abs(n)b=a+10c=a-10d=a*10if n&gt;...

    2024-02-01 03:23:01
  • github团队开发之申请加入团队

    github团队开发之申请加入团队

    github团队协作开发,仓库创建者需要邀请团队成员加入,然后才能协作开发;远程库创建者登录,打开仓库地址,然后点击 Settings点击左侧 Manage access再点击 “Invite a c...

    2024-02-01 03:22:54
  • 数据可视化—随机漫步

    数据可视化—随机漫步

    随机漫步顾名思义就是你也不知道它下一步走哪,可能这辈子你都找不到两个一模一样的随机漫步(不信可以试试)

    2024-02-01 03:22:48
  • springboot2.7以上版本配置swagger3.0.0版本浏览器无法打开swagger-ui

    【代码】springboot2.7以上版本配置swagger3.0.0版本浏览器无法打开swagger-ui。

    2024-02-01 03:22:20
  • C++的数据类型总结,不能错过

    C++的数据类型总结,不能错过

    代码编译运行环境:VS2012+Win32+Debug。1.C++数据类型简介C++是一种强类型语言。C++程序中的任何变量(或函数)必须遵循“先说明后使用”的原则。定义数据类型有两个方面的作用:一是...

    2024-02-01 03:22:13
  • Linux:内核调试之内核魔术键sysrq

    Linux:内核调试之内核魔术键sysrq

    Linux:内核调试之内核魔术键sysrq

    2024-02-01 03:22:06
  • linux环境配置qt

    linux环境配置qt

    编译环境配置

    2024-02-01 03:21:59
  • HTML—— Id和Class选择器

    HTML—— Id和Class选择器

    class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。要使用CSS对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选...

    2024-02-01 03:21:29
  • 网络编程(套接字)

    网络编程(套接字)分层IP域名端口端口号(0-65535)InetSocetAddressUDP根据网络来进行的数据传输分层物理层数据链路层网络层传输层(协议UDP、TCP)会话层表示层应用层IPIP...

    2024-02-01 03:21:22