改变链接样式

当设置为若干链路状态的样式，也有一些顺序规则：

  • a:hover 必须跟在 a:link 和 a:visited后面
  • a:active 必须跟在 a:hover后面
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

a:link {color:#000000;}      /* 未访问链接*/

a:visited {color:#00FF00;}  /* 已访问链接 */

a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */

a:active {color:#0000FF;}  /* 鼠标点击时 */

</style>

</head>

<body>

<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>

<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>

<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>

</body>

</html>

高级链接样式

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

a.one:link {color:#ff0000;}

a.one:visited {color:#0000ff;}

a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}

a.two:visited {color:#0000ff;}

a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}

a.three:visited {color:#0000ff;}

a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}

a.four:visited {color:#0000ff;}

a.four:hover {font-family:Georgia, serif;}

a.five:link {color:#ff0000;text-decoration:none;}

a.five:visited {color:#0000ff;text-decoration:none;}

a.five:hover {text-decoration:underline;}

</style>

</head>

<body>

<p>将鼠标移至链接上改变样式.</p>

<p><b><a class="one" href="/css/" target="_blank">这个链接改变颜色</a></b></p>

<p><b><a class="two" href="/css/" target="_blank">这个链接改变字体大小</a></b></p>

<p><b><a class="three" href="/css/" target="_blank">这个链接改变背景颜色</a></b></p>

<p><b><a class="four" href="/css/" target="_blank">这个链接改变字体类型</a></b></p>

<p><b><a class="five" href="/css/" target="_blank">这个链接改变文字修饰</a></b></p>

</body>

</html>

CSS之链接的更多相关文章

  1. css远距离链接

    远距离链接主要运用了hover伪类,但是运用了两次 <!DOCTYPE html> <html lang="en"> <head> <me ...

  2. Nginx下css的链接问题

    放在 Nginx 下的网页代码,在链接外部 css 文件时,可能出现没有链接成功的问题.需要在 nginx.conf 里的 http 下添加一行. http { include mime.types;

  3. CSS中链接文本为图片时的问题（塌陷、对应的图片建立倒角的问题）

    我在做Javascript DOM编程艺术的时候,在12章自己做练习时遇到了一个问题,<a>的内容<img>从<a>的盒子中溢出.代码如下: <a href= ...

  4. 三、CSS样式——链接

    CSS链接的四种状态: a:link ——普通的.未被访问的链接 a:visited ——用户已访问的链接 a:hover ——鼠标指针位于链接的上方 a:active ——链接背点击的时刻 常见的链 ...

  5. CSS基础-链接

    链接的状态 link 没有访问过的 visited 访问过的 hover 用户鼠标刚好停留在这个链接上时 focus 通过TAB键或者编程方法将一个链接选中时 active 链接被激活时   默认的链 ...

  6. 【静态页面架构】CSS之链接和图像

    CSS架构 一.链接: 链接元素:通过使用a元素的href属性设置跳转到指定页面地址 <style> a{ color: blue; text-decoration: none; } a: ...

  7. JavaScript HTML CSS外部链接

    HTML文件 <!--<html> <head><link rel="stylesheet" type="text/css" ...

  8. CSS去除链接虚线（兼容IE6、IE7)

    在css里加入以下代码: a{    hide-focus: expression( this.hideFocus=true );    outline: none;}

  9. CSS样式链接和文字常用属性

    行内: <div style="color:red;"></div> 内嵌<style>div{background-color:red;}&l ...

随机推荐

  1. jvm学习一：类加载过程详解

    (自学笔记,持续更新,欢迎指正) 我们都知道一个java程序运行要经过编译和执行,但是这太概括了,中间还有很多步骤,今天来说说类加载 学完类加载之后,java运行过程就可以分为  编译  > 类 ...

  2. 解决SVN一直弹出登录问题，eclipse.tmatesoft.com

    Windows->preferences->Igonored Resources Add Pattern.. .project .classpath .settings 添加这三个: 把C ...

  3. Android学习第8天

    进程的概念 a)        四大组件都运行在主线程中 b)        服务是没有界面的,可理解为没有界面的Activity c)         进程的优先级 i.              ...

  4. Markdown初入门(使用Typora编辑)

    标题 使用#来实现标题的大小控制 # h1 标题1 ## h2 标题2 ### h3 标题3 #### h4 标题4 ##### h5 标题5 ###### h6 标题6 标题一 标题二 标题三 标题 ...

  5. LOJ #6285 分块入门9

    题意:区间众数,不带修改,带修改刚看了一眼没看懂cls在讲啥QAQ. 题解:按照代码中那个sqrt(n/2/log2(n))大小分块,可以用均值不等式证明的,就是假设查询和n同级,然后一通爆算就可以得 ...

  6. 如何修改hosts文件

     如何修改hosts文件 1.进入路径 C:\Windows\System32\drivers\etc 2.拷贝hosts文件到其他地方3.修改拷贝的hosts文件,右键用记事本打开4.直接修改或添加 ...

  7. cacti报警邮件的设置

    众所周知,用Linux系统自带的sendmail发送邮件是有限制的,可能对有些邮箱无法正常发送,导致报警邮件不能够及时发送到,因此就可能会产生不必要的麻烦!对此,我们可以用其他方法来发送邮件,就是在c ...

  8. java Concurrent并发容器类 小结

    Java1.5提供了多种并发容器类来改进同步容器的性能. 同步容器将所有对容器的访问都串行化,以实现他们的线程安全性.这种方法的代价是严重降低并发性,当多个线程竞争容器的锁时,吞吐量将严重减低.  一 ...

  9. [译]Ocelot - Load Balancer

    原文 可以对下游的服务进行负载均衡. 提供了下面几种负载均衡: LeastConnection - tracks which services are dealing with requests an ...

  10. CRMEB客户管理+电商管理系统帮助文档，送给有需要的人

    本项目还在不断开发完善中,如有建议或问题请言