链接可以使用任何css属性，包括字体、颜色、背景等等、

链接有四个状态，可在四个状态时设置不同的属性

a:link - 正常，未访问过的链接

a:visited - 用户已访问过的链接

a:hover - 当用户鼠标放在链接上时

a:active - 链接被点击的那一刻

当为链接的不同状态设置样式时，需要遵循a:hover 必须位于a:link 和a:visited之后，a:active 必须位于 a:hover 之后

例如编辑一个如下的html文件

<!DOCTYPE html>

<html>

    <head>

    <meta charset="utf-8">

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

    <style>

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

        a:visited {color:green;background-color：gray}  /* 已访问链接 */

        a:hover {color:pink;font-size:20px}  /* 鼠标移动到链接上 */

        a:active {color:yellow;}  /* 鼠标点击时 */

    </style>

    </head>

    <body>

        <p><b><a href="http://www.baidu.com" 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>

初次点开时显示如下，将鼠标放在链接上显示粉色，并且字体变大；点击时显示黄色；点击之后显示绿色，并且背景为灰色

链接还可以使用text-decoration:none来设置去掉链接的下划线

css链接link的更多相关文章

  1. 【代码笔记】Web-CSS-CSS 链接(link)

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  2. HTML5样式和列表、CSS链接的四种状态

    一.HTML5样式 1.标签: <style>:样式定义: <link>:资源引用: 2.属性: type="text/css":引入文档类型: rel=& ...

  3. 引用外部CSS的link和import方式的分析与比较

    很多网页中的 CSS 链接与引用是这样写的: <style type="text/css" media="screen"> @import url( ...

  4. css链接，列表，表格

    1.css链接 a:link - 正常,未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被点击的那一刻 注意: a:h ...

  5. 18 章 CSS 链接、光标、 DHTML 、缩放

    1.CSS 中链接的使用 2.CSS 中光标的使用 3.CSS 中 DHTML 的使用 4.CSS 中缩放的使用 1 18 8. .1 1 S CSS  中 链接的使用 超链接伪类属性 a:link ...

  6. CSS链接伪类：超链接的状态

    一.状态: a:link{属性:值;} 链接默认状态 a:visited{属性:值;} 链接访问之后的状态 a:hover{属性:值;} 鼠标放到链接上显示的状态 a:active{属性:值;} 链接 ...

  7. CSS：CSS 链接

    ylbtech-CSS:CSS 链接 1.返回顶部 1. CSS 链接 不同的链接可以有不同的样式. 链接样式 链接的样式,可以用任何CSS属性(如颜色,字体,背景等). 特别的链接,可以有不同的样式 ...

  8. CSS中link与import的区别

    一.import的用法 1,在html文件中 <style type="text/css"> @import url(http://www.dreamdu.com/st ...

  9. CSS中link和@import的使用区别

    我们都知道在html中引入外部的CSS 有2种方式,link标签和@import,他们又什么区别呢? 1.从属关系区别@import是 CSS 提供的语法规则,只有导入样式表的作用:link是HTML ...

随机推荐

  1. 关于SimpleDateFormat时间转换总是显示1970年的问题

    今天遇到了一个奇怪的问题, long time = 1488606363; Date date = new Date(time); java.text.SimpleDateFormat sDateFo ...

  2. js图的数据结构处理---迪杰斯特拉算法

    /*//1.确定数据结构, mapf[i][j] 为点i到点j的距离 [ Infinity 2 5 Infinity Infinity Infinity Infinity 2 6 Infinity I ...

  3. ida pro 使用

    交互式反汇编器专业版(Interactive Disassembler Professional),人们常称其为IDA Pro,或简称为IDA.是目前最棒的一个静态反编译软件,为众多0day世界的成员 ...

  4. Node.JS + Mysql数据库

    服务嘛,当然离不开数据库了,你要是见到数据就哭了,我建议你还是看看本文,不要做数据哭啊,哈哈哈 要做 ‘数据酷’嘛,哈哈哈 一 安装 1. wget -i -c http://dev.mysql.co ...

  5. iOS UI基础-9.1 UITableView 团购

    概述 接下来,我们要做的是团购界面的设计,最张要实现的效果图及项目结构图      团购数据的展示 思路: 系统自带的tableCell不能展示三个文本,不能满足条件,自定义tableCell 每一个 ...

  6. iOSOpenDev安装使用

    下载:http://iosopendev.com/download/ 选择“iOSOpenDev 1.6-2 Installer” 出错解决方法 https://www.jianshu.com/p/2 ...

  7. vue中连续点击3次且时间间隔不超过3秒，才显示div（刚开始隐藏的）

    num:0,//点击次数timer0:'',//第一次点击的时间timer4:'',//第四次点击的时间centerDialogVisible: false // 连续4次点击显示模态框 change ...

  8. 好吧，我承认我是爱瞎折腾----利用YDUI改变页面UI

    上周恒丰代付接口上线投产后,我做了一个“恒丰代付检查工具”,用途是,当线上调用恒丰代付出现了问题订单时,可以在这个工具页里做相应的弥补. 我项目里其他一些工具页的UI用的是YDUI.YDUI号称是“一 ...

  9. Javascript-for循环案例-打印1-100之间所有的数字

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  10. quartz demo01

    1,Pom.xml   加入:quartz-2.1.7.jar <dependency> <groupId>org.quartz-scheduler</groupId&g ...