改变链接样式

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

  • 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. Spring自定义类扫描器 ClassPathScanningCandidateComponentProvider

    项目中有个需求 读取xml文件,然后 对xml文件进行解析,比如如果是 Gender=0/1的话,分别代表男女. 所以需要在构造函数之后,初始化bean之前进行过滤解析 xml文件: <inte ...

  2. CMS Collector and G1 Collector

    Understanding the CMS Collector CMS has three basic operations: CMS collects the young generation (s ...

  3. Python——正则模块

    1.re模块是用来操作正则表达式 2.正则表达式——用来字符串匹配的 (1)字符组:[字符组]  例如[0123fdsa456*/-] [0-9] 等同于[0123456789] [a-z] 匹配小写 ...

  4. python基础3 字符串常用方法

    一. 基础数据类型 总览 int:用于计算,计数,运算等. 1,2,3,100...... str:'这些内容[]'    用户少量数据的存储,便于操作. bool: True, False,两种状态 ...

  5. AssetBundle打包

    为热更新打基础(xlua\tolua) 素材.源码链接:http://www.sikiedu.com/course/74/task/1812/show 一.AssetBundle的定义和作用 1,As ...

  6. di.xml

    di.xml文件 该di.xml文件配置对象管理器要注入的依赖项. 领域和应用入口点 每个 模块 都可以具有全局和区域特定的di.xml文件.Magento读取di.xml系统中声明的所有配置文件,并 ...

  7. Java【第十篇】集合

    Java 集合概述 Java 集合就像一种容器,可以把多个对象的引用放入容器中.Java 集合类可以用于存储数量不等的多个对象,还可用于保存具有映射关系的关联数组Java 集合可分为 Set.List ...

  8. 对于mysql数据库优化的见解

    一.数据库占用的空间大小.表占用空间大小.索引占用空间大小 在用阿里云的数据库的时候经常出现磁盘空间爆满的情况.所以要经常查询数据库相关内容占用的磁盘大小,有很多mysql客户端如navicat 就可 ...

  9. Git 分支 （三） 分支管理&&分支开发工作流

    分支管理 git branch 命令不只是可以创建与删除分支. 如果不加任何参数运行它,会得到当前所有分支的一个列表: 注意 master 分支前的 * 字符:它代表现在检出的那一个分支(也就是说,当 ...

  10. 如何解决Angular网页内嵌推特时间线无法正常显示

    我最近解决了一个折磨了我好久但是解决方法却只是添加两三行代码的问题.我没有在网上找到合适的解决方案,最后是我根据官方网站和很多的帖子里的部分代码得到的启发,尝试了很久之后得到的解决方法.因为过程实在是 ...