改变链接样式

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

  • 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. Linux 学习 (十一) 软件安装管理

    Linux软件安装管理 学习笔记 软件包简介 软件包分类: 源码包 :脚本安装包 二进制包(RPM 包.系统默认包) 源码包的优点: 开源,如果有足够的能力,可以修改源代码 可以自由选择所需的功能 软 ...

  2. [洛谷P1357] 花园

    题目类型:状压\(DP\) -> 矩阵乘法 绝妙然而思维难度极其大的一道好题! 传送门:>Here< 题意:有一个环形花圃,可以种两种花:0或1. 要求任意相邻的\(M\)个花中1的 ...

  3. 题解-洛谷P1184 高手之在一起

    https://www.luogu.org/problemnew/show/P1184 (题目出处) 见到地名,自然就想到字符串了.可以从第一天开始,将她的位置与高手方便取得地方一一比较,(char字 ...

  4. 团体程序设计天梯赛(CCCC) L3015 球队“食物链” 状态压缩

    团体程序设计天梯赛代码.体现代码技巧,比赛技巧.  https://github.com/congmingyige/cccc_code #include <cstdio> #include ...

  5. Day048--jQuery自定义动画和DOM操作

    内容回顾 BOM location.reload() 全局刷新页面 location.href location.hash location.pathname location.hostname lo ...

  6. POJ 3186 Treats for the Cows (动态规划）

    Description FJ has purchased N (1 <= N <= 2000) yummy treats for the cows who get money for gi ...

  7. Numpy系列（三）- 基本运算操作

    Numpy 中数组上的算术运算符使用元素级别.最后的结果使用新的一个数组来返回. import numpy as np a = np.array( [20,30,40,50] ) b = np.ara ...

  8. Pandas系列（十六）- 你需要学会的骚操作

    pandas有一种功能非常强大的方法,它就是accessor,可以将它理解为一种属性接口,通过它可以获得额外的方法.其实这样说还是很笼统,下面我们通过代码和实例来理解一下. pd.Series._ac ...

  9. js深拷贝

    // 判断是否为对象 function isObject(o) { return (typeof o === 'object' || typeof o === 'function') &&am ...

  10. C#获取根目录的方法总结

    1.控制台应用程序 static void Main(string[] args) { //1.Environment.CurrentDirectory Console.WriteLine(Envir ...