css链接link

时间：2023-01-15 19:37:40

链接可以使用任何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>

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

css链接link

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

css链接link的更多相关文章

  1. 【代码笔记】Web-CSS-CSS 链接&lpar;link&rpar;

    一,效果图. 二,代码. <!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和&commat;import的使用区别

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

随机推荐

  1. Mysql新增用户，权限管理

    MySQL 赋予用户权限命令的简单格式可概括为:grant 权限 on 数据库对象 to 用户 一.grant 普通数据用户,查询.插入.更新.删除 数据库中所有表数据的权利. grant selec ...

  2. Codeforces Round &num;369 &lpar;Div&period; 2&rpar; D&period; Directed Roads dfs求某个联通块的在环上的点的数量

    D. Directed Roads   ZS the Coder and Chris the Baboon has explored Udayland for quite some time. The ...

  3. oracle中的case when then else end 用法

    Case when 的用法,简单Case函数 简单CASE表达式,使用表达式确定返回值. 语法: CASE search_expression WHEN expression1 THEN result ...

  4. c语言else匹配问题

    #include <stdio.h> #include <stdlib.h> //实现 依次输入三个递增的数 然后正确输出 //为什么得不到我们想要的结果呢 这就是else匹配 ...

  5. 第三十三节，sys解释器相关模块

    首先要引入import sys模块 sys.argv 功能:获取向脚本文件传入的参数,返回的列表,列表里的第一个元素是脚本文件路径和名称,后面的元素是传入的向脚本传入的参数 使用方法:sys.argv ...

  6. 最美时光第三方UWP源码公开

    自己大概写了一个星期的成果.. 使用了官方最美时光app的UI和图片资源,并没有调用官方接口 https://files.cnblogs.com/files/loyieking/NiceCountDo ...

  7. DES加密ECB&lpar;模式&rpar; golang

    Java默认DES算法使用DES/ECB/PKCS5Padding,而golang认为这种方式是不安全的,所以故意没有提供这种加密方式,那如果我们还是要用到怎么办?下面贴上golang版的DES EC ...

  8. idea破解失效&colon;cant obtain ticket from http&colon;&sol;&sol;idea&period;iteblog&period;com&sol;key&period;php

    破解idea错误描述:cant obtain ticket from http://idea.iteblog.com/key.php   idea破解失效 解决方案: 打开链接: http://ide ...

  9. java常见面试题及答案 11-20（JVM）

    11.JVM内存分哪几个区,每个区的作用是什么? Java虚拟机主要分为以下一个区: 方法区:1. 有时候也成为永久代,在该区内很少发生垃圾回收,但是并不代表不发生GC,在这里进行的GC主要是对方法区 ...

  10. Swagger相关配置记录

    1.SwaggerConfig文件配置 public class SwaggerConfig { protected static string GetXmlCommentsPath() { retu ...

相关文章