改变链接样式

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

  • 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. poj-2195（最小费用流）

    题意:给你一个n*m的地图,H代表这个点有一个房子,m代表这个点是一个人,每次h走一步就花费一,问最小花费使得每个人能进入一个房间 代码:建立一个源点和汇点,每个人和源点相连,每个房子和汇点相连,每个 ...

  2. Django模板语言进阶

    一.母板 1.什么情况下使用母版 当多个页面的大部分内容都一样的时候,我们可以把相同的部分提取出来,放到一个单独的母版HTML文件中 然后在母版中定义需要被替换的block 例如:母板页面 <! ...

  3. Kubernetes从懵圈到熟练：读懂这一篇，集群节点不下线

    排查完全陌生的问题,完全不熟悉的系统组件,是售后工程师的一大工作乐趣,当然也是挑战.今天借这篇文章,跟大家分析一例这样的问题.排查过程中,需要理解一些自己完全陌生的组件,比如systemd和dbus. ...

  4. Codeforces 1077F1 Pictures with Kittens (easy version)（DP）

    题目链接:Pictures with Kittens (easy version) 题意:给定n长度的数字序列ai,求从中选出x个满足任意k长度区间都至少有一个被选到的最大和. 题解:$dp[i][j ...

  5. [模板]Min_25筛

    用途 快速($O(\frac{n^{3/4}}{logn})$)地计算一些函数f的前缀和,以及(作为中间结果的)只计算质数的前缀和 一般要求f(p)是积性函数,$f(p)$是多项式的形式,且$f(p^ ...

  6. [WC2007]剪刀石头布（最大流）

    洛古 一句话题意:给定一张图,每两点之间有一条有向边或无向边,把所有无向边定向,使图中三元环个数尽量多 因为原图是一个完全图,假设图中任意三点都能构成三元环,那么途中三元环的个数为:\(\binom{ ...

  7. vue实战记录（四）- vue实现购物车功能之过滤器的使用

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(四) GitHub:sue ...

  8. Cucumber常用关键字

    常用关键字(中英文对应) 对应的测试用例 Feature(功能) test suite (测试用例集) background(背景)   Scenario(场景) test case(测试用例) Sc ...

  9. 使用Eclipse创建动态的web工程

    使用Eclipse创建动态的web工程 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.修改工作区的编码 1>.点击Window选择Preferences 2>.将默 ...

  10. 第六节：SignalR完结篇之依赖注入和分布式部署

    一. SignalR中DI思想的应用 DI,即依赖注入,它是一种不负责创建其自己的依赖项对象的一种模式,通常用来降低代码之间的耦合性,广泛应用于架构设计,是必不可少的一种思想. 下面结合一个需求来说一 ...