首页 > 其他分享 >HTML超链接自定义颜色

HTML超链接自定义颜色

时间:2023-01-21 13:22:28浏览次数:40  
标签:hover 自定义 蓝色 color text decoration HTML 超链接 background

先添加一个css样式

我这里直接内嵌了因为代码量比较少不会影响太大的性能

<style type="text/css">
	    body {background-color:#eaeaea}
	 
	    a#textColorStyle:link {color:#FF0000;}    /* 未被访问的链接 */
	    a#textColorStyle:visited {color:#00FF00;} /* 已被访问的链接 */
	    a#textColorStyle:hover {color:#FF00FF;}   /* 鼠标指针移动到链接上 */
	    a#textColorStyle:active {color:#0000FF;}  /* 正在被点击的链接 */
	 
	    a#underlineStyle:link {text-decoration:none;}
	    a#underlineStyle:visited {text-decoration:none;} 
	    a#underlineStyle:hover {text-decoration:underline;} 
	    a#underlineStyle:active {text-decoration:underline;} 
	 
	    a#bgStyle:link {background-color:#B2FF99;}
	    a#bgStyle:visited {background-color:#FFFF85;}
	    a#bgStyle:hover {background-color:#FF704D;}
	    a#bgStyle:active {background-color:#FF704D;}
	 
	    a#rect:link,a#rect:visited 
	    {
	    display:block;
	    color:white;
	    font-family:Verdana, Arial, Helvetica, sans-serif;
	    font-size:18px;
	    width:160px;
	    padding:6px;
	    background-color:#98bf21;
	    text-decoration:none;
	    text-align:center;
	    }
	    a#rect:hover {background-color:#88af11;}
	    a#rect:active {background-color:#688f00;}
	    
	  </style>

引用方式

<a id="textColorStyle" href="链接" target="_blank" title="标题">自定义超链接文字</a>

颜色代码这个可以去,取色器自行取

下面我放一些常用的颜色代码

1  白色        #FFFFFF  2  红色      #FF0000  3  绿色     #00FF00   
4  蓝色        #0000FF  5  牡丹红    #FF00FF  6  青色     #00FFFF   
7  黄色        #FFFF00  8  黑色      #000000  9  海蓝     #70DB93   
10 巧克力色    #5C3317  11 蓝紫色    #9F5F9F  12 黄铜色   #B5A642   
13 亮金色      #D9D919  14 棕色      #A67D3D  15 青铜色   #8C7853   
16 2号青铜色   #A67D3D  17 士官服蓝色#5F9F9F  18 冷铜色   #D98719   
19 铜色        #B87333  20 珊瑚红    #FF7F00  21 紫蓝色   #42426F   
22 深棕        #5C4033  23 深绿      #2F4F2F  24 深铜绿色 #4A766E   
25 深橄榄绿    #4F4F2F  26 深兰花色  #9932CD  27 深紫色   #871F78   
28 深石板蓝    #6B238E  29 深铅灰色  #2F4F4F  30 深棕褐色 #97694F   
32 深绿松石色  #7093DB  33 暗木色    #855E42  34 淡灰色   #545454   
35 土灰玫瑰红色#856363  36 长石色    #D19275  37 火砖色   #8E2323   
38 森林绿      #238E23  39 金色      #CD7F32  40 鲜黄色   #DBDB70   
41 灰色        #C0C0C0  42 铜绿色    #527F76  43 青黄色   #93DB70   
44 猎人绿      #215E21  45 印度红    #4E2F2F  46 土黄色   #9F9F5F   
47 浅蓝色      #C0D9D9  48 浅灰色    #A8A8A8  49 浅钢蓝色 #8F8FBD   
59 浅木色      #E9C2A6  60 石灰绿色  #32CD32  61 桔黄色   #E47833   
62 褐红色      #8E236B  63 中海蓝色  #32CD99  64 中蓝色   #3232CD   
65 中森林绿    #6B8E23  66 中鲜黄色  #EAEAAE  67 中兰花色 #9370DB   
68 中海绿色    #426F42  69 中石板蓝色#7F00FF  70 中春绿色 #7FFF00   
71 中绿松石色  #70DBDB  72 中紫红色  #DB7093  73 中木色   #A68064   
74 深藏青色    #2F2F4F  75 海军蓝    #23238E  76 霓虹篮   #4D4DFF   
77 霓虹粉红    #FF6EC7  78 新深藏青色#00009C  79 新棕褐色 #EBC79E   
80 暗金黄色    #CFB53B  81 橙色      #FF7F00  82 橙红色   #FF2400   
83 淡紫色      #DB70DB  84 浅绿色    #8FBC8F  85 粉红色   #BC8F8F   
86 李子色      #EAADEA  87 石英色    #D9D9F3  88 艳蓝色   #5959AB   
89 鲑鱼色      #6F4242  90 猩红色    #BC1717  91 海绿色   #238E68   
92 半甜巧克力色#6B4226  93 赭色      #8E6B23  94 银色     #E6E8FA   
95 天蓝        #3299CC  96 石板蓝    #007FFF  97 艳粉红色 #FF1CAE   
98 春绿色      #00FF7F  99 钢蓝色    #236B8E  100亮天蓝色 #38B0DE 
101棕褐色      #DB9370  102紫红色    #D8BFD8  103石板蓝色 #ADEAEA 
104浓深棕色    #5C4033  105淡浅灰色  #CDCDCD  106紫罗兰色 #4F2F4F 
107紫罗兰红色  #CC3299  108麦黄色    #D8D8BF  109黄绿色   #99CC32

标签:hover,自定义,蓝色,color,text,decoration,HTML,超链接,background
From: https://www.cnblogs.com/xkboi/p/17063730.html

相关文章

  • HTML简单了解
    HTML什么是HTML?HTML是一门语言,所有网页都是用HTML这门语言编写出来的HTML(HyperTextMarkupLanguage):超文本标记语言​ 超文本:超越了文本的限制,比普通文本更强大......
  • java HTML5
    HTML超文本标记语言W3C万维网联盟W3C标准包括:结构化标准语言(HTML,XML)表现标准语言(CSS)行为标准(DOM,ECMAScropt)网页基本信息使用进行注释!DOCTYPE告诉浏览器我们......
  • java HTML5
    HTML超文本标记语言W3C万维网联盟W3C标准包括:结构化标准语言(HTML,XML)表现标准语言(CSS)行为标准(DOM,ECMAScropt) 网页基本信息使用<!--注释内容-->进行注释......
  • 关于 Spartacus 开源 Storefront 在 PWA 模式下运行时的 index.html hash mismatch 问
    Spartacus开源项目提供将Angular实现的电商Storefront站点作为PWA运行的功能。这提高了用户性能,改善了用户体验,添加了另一个缓存层并减少了服务器端渲染(SSR)服......
  • 39-IK分词自定义扩展词库
    **1、安装nginx**由于html下面的所有东西都可以直接访问,所以我们可以在html下床架一个index.html(默认为首页),然后访问nginx,如下图然后我们在html下创建es文件夹,es文件夹......
  • html
    html是一种超文本标记语言,告诉浏览器构造网页html文件是一个文本文件,其后缀名.html或者.xhtml1.基础骨架:<!DOCTYPEhtml>//文档声明,声明web浏览器用了htm......
  • Ant Design Table 如何动态自定义?Ant Popover 遮挡?
    项目场景:基于electron+Vue+node.js+express+mysql+evanpatchouli-mysql+Ant-Design-Vue,编写一款属于自己的轻量级MySQL数据库界面工具。问题列表如何动态......
  • index.html
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"/><metaname="viewport"content="width=device-width,initial-scale=1"/><metana......
  • Xshell 使用自定义用户密钥登录, 类似 ssh-keygen -t rsa
    1.菜单栏工具-用户密钥-生成2.按提示生成后,点击属性,在__常规__选项卡旁边有公钥按钮。使用key登录后还需要提供用户名。......
  • 【网关开发】5.Openresty 自定义负载均衡与流量转发
    目录背景应用架构实现插件配置文件流量转发负载均衡器测试总结扩展ip_hashurl_hash背景静态的nginx配置需要将负载均衡的服务节点信息都配置在配置文件中。现在微服务或......