改变链接样式

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

  • 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. Vue.Draggable

    Vue.Draggable拖动效果 下载包:npm install vue-draggable --save 组件中引进依赖: import draggable from 'vuedraggable' ...

  2. Python中的 一些常用技巧函数[.join()]

    1.str.join(item)字符串操作函数,参数item可以是字符串.元组.字典,示例 ','.join('abc') [','.join('abc')] 输出: 'a,b,c'['a', 'b' ...

  3. Python——爬虫——爬虫的原理与数据抓取

    一.使用Fiddler抓取HTTPS设置 (1)菜单栏 Tools > Telerik Fiddler Options 打开“Fiddler Options”对话框 (2)HTTPS设置:选中C ...

  4. 根据 Power BI Desktop（预览版）中的报表页创建工具提示

    根据 Power BI Desktop 中创建的报表页,可创建直观丰富的报表工具提示,这些提示在你将鼠标悬停在视觉对象上时显示. 通过创建用作工具提示的报表页,使自定义工具提示包含视觉对象.图像以及在 ...

  5. poj-2195（最小费用流）

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

  6. linux服务端日志中截取自己所需要的部分

    近期开发一个图片处理的业务,涉及base64字符串解析的问题,为方便与友商间接口调试,日志中保存Base64.日,想想就肝儿疼,记录下来容易,取的时候难.为准确提取,配合两条命令即可. 1.获取日志所 ...

  7. 【XSY2988】取石子 博弈论

    题目描述 有 \(n\) 堆石子,每堆石子的个数是 \(c_i\). Alice 和 Bob 轮流取石子(先后手未定),Alice 每次从一堆中取 \(a\) 个,Bob每次从一堆中取 \(b\) 个 ...

  8. Linux-服务器创建swap交换分区

    服务器 swap 交换分区制作 作用:‘提升‘ 内存的容量,防止OOM(Out Of Memory) 查看当前的交换分区 # cat /proc/swaps # free -m # swapon -s ...

  9. pm2自动部署

    配置pm2自动部署前,请确保已经能够ssh免密登录服务器. 一.创建ecosystem.json { "apps" : [{ "name" : "HT ...

  10. StringJdbc :jdbcTemplate

    Spring框架对Jdbc进行了封装 提供了一个JDBCTemplated对象简化Jdbc开发 步骤 1 导包 2 创建JDBCTemplate 对象 依赖于DataSource 3 调用JDBCTe ...