HTML中设置超链接字体 & 字体颜色

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

定义链接样式
CSS为一些特殊效果准备了特定的工具，我们称之为“伪类”。其中有几项是我们经常用到的，下面我们就详细介绍一下经常用于定义链接样式的四个伪类，它们分别是：
:link
:visited
:hover
:active 因为我们要定义链接样式，所以其中必不可少的就是超级链接中的锚标签--a，锚标签和伪类链接起来书写的方法就是定义链接样式的基础方法，它们的写法如下：
a:link，定义正常链接的样式；
a:visited，定义已访问过链接的样式；
a:hover，定义鼠标悬浮在链接上时的样式；
a:active，定义鼠标点击链接时的样式。示例：
a:link {
color:#FF0000;
text-decoration:underline;
}
a:visited {
color:#00FF00;
text-decoration:none;
}
a:hover {
color:#000000;
text-decoration:none;
}
a:active {
color:#FFFFFF;
text-decoration:none;
}
上面示例中定义的链接颜色是红色，访问过后的链接是绿色，鼠标悬浮在链接上时是黑色，点击时的颜色是白色。如果正常链接和已访问过的链接样式相同，鼠标悬浮和点击时的样式相同，也可以将它们合并起来定义：
a:link,
a:visited {
color:#FF0000;
text-decoration:underline;
} a:hover,
a:active {
color:#000000;
text-decoration:none;
}链接定义的顺序
没有规矩不成方圆，虽然链接定义写好了，但它也是有规则的，如果这四项的书写顺序稍有差错，链接的效果可能就没有了，所以每次定义链接样式时务必确认定义的顺序，link--visited--hover-active，也就是我们常说到的LoVe HAte原则（大写字母就是它们的首字母）。定义局部链接样式
在CSS中写上a:link{}这样的定义会使整个页面的链接样式改变，但有些局部链接需要特殊化，这个问题也不难解决，只要在链接样式定义的前面加上指定的id或class就可以了。示例：
#sidebar a:link,
#sidebar a:visiteid {
color:#FF0000;
text-decoration:none;
}
#sidebar a:hover,
#sidebar a:active {
color:#000000;
text-decoration:underline;
}调用方法：
<div id="sidebar"><a href="http://www.abang.com" target="_blank">链接到阿邦网<a></div>class的定义方法和id相同，只要将#sidebar改为.sidebar就行了，还有一种方法是直接定义链接的样式，那样更直接，不过调用时比较麻烦，需要给每个特定的链接加上定义的代码。
示例： a.redlink a:link,
a.redlink a:visiteid {
color:#FF0000;
text-decoration:none;
}
a.redlink a:hover,
a.redlink a:active {
color:#000000;
text-decoration:underline;
background:#FFFFFF;
} 调用方法：
<div><a href="http://www.abang.com" target="_blank" class="redlink" >链接到阿邦网一<a></div>

HTML中的字体颜色

1.关于字体颜色的使用方法:
<font color=颜色代码 size=字号 face=字体〉文字说明〈/font〉
2.关于贴图的使用方法:
<img src="图片地址" alt="说明文字">
当你将鼠标移到图片之上时，图片的说明文字就会浮现。
3.关于超级链接的使用方法:
<a href=“欲链接的地址”>文字说明

注意哦,为了能让大家看见我这里的符号都是全角的,把我这里的那些符号改成半角的就可以使用了~

附录：395种字体颜色

<色彩渐变代码生成器颜色代码生成器

颜色代码表1    颜色代码表2   颜色代码表3

颜色英文代码   颜色中英文代码及背景色对比

颜色具体如下:

棕色brown     红色red      橙色orange    黄色yellow
绿色green     蓝色blue     紫色purple    灰色gray
白色white     黑色black    橄榄色olive   石灰色lime
海军蓝nave    栗色maroon   紫红fuchsia   银色siver   水色aqna
这是支持HTML语言用的颜色。。。

颜色代码：

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

HTML中设置超链接字体 & 字体颜色的更多相关文章

IntelliJ IDEA 中设置左菜单字体，编辑器字体和控制台的字体
IntelliJ IDEA 中设置左菜单字体大小 File-Settings,然后选择appearance,下图右侧红色边框中的内容即设置菜单的字体和大小 IntelliJ IDEA 中设置当前编 ...
Eclipse：Win10中设置Courier New字体
问题:在Eclipse中设置字体的时候,没有找到Courier New字体.系统为Win10. 解决:Eclipse使用的字体为系统字体.在系统字体中有一部分是隐藏的.Courier New已经在系统 ...
Winform中设置ZedGraph的字体和间距不随图形的缩放而缩放
场景 C#窗体应用中使用ZedGraph曲线插件绘制图表: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/99716066 Win ...
Word中设置所有西文字体为新罗马
如图所示,不用一个一个设置,在字体里直接设置细纹字体:Times New Roman ,中文字体不用管.
用Java在excel单元格中设置超链接
(一)问题引入有时候我们在导入数据到excel中时可能要给某个文件或图片设置超链接,例如链接到外网或者是本地的某个目录.我们可以通过Java代码来实现,借助POI库. (二)解决方案下面直接给出参 ...
android中用Spannable在TextView中设置超链接、颜色、字体
昨晚研读 ApiDemo 源码至 com.example.android.apis.text.Link 类.首先,看一下其运行效果: 要给 TextView 加上效果,方式主要有几种: 第一种,自动 ...
使用Excel对象模型在Excel单元格中设置不同的字体
效果是这样的: 首先找到这个单元格或区域Range cell,然后代码: ((Range)cell). Characters[, ].Font.Color = Color.Blue; ((Range) ...
怎样在ios开发中设置tableview的cell颜色
//方法一: cell .contentView .backgroundColor = [ UIColor redColor ]; //方法二: UITableViewCell *cell = [ta ...
Android 一个TextView中设置多种不同大小的字体，设置超链接
以前项目中要是遇到这样的UI设计,都是傻不拉唧的分为三个TextView来实现,今天在微信中无意中看了一篇公众号文章,发现原来只要一个TextView就可以搞定啦,人生最悲哀的事情莫过于工作了这么久啦 ...

随机推荐

linQ学习笔记之一
linq解决的问题 1.编程语言中的数据类型与数据库中的数据类型形成的两套体系 2.SQL编码体验落后 3.SQL和XML都有各自的查询语言,而对象没有自己的查询语言 linq简单的集合查询和fore ...
c&num; 使用泛型类型作为参数
泛型作为一种经常使用的类型,有时需要在方法之间传递,不了解的话可能会束手无策. 比如我定义一个方法 processList 需要把List<T> 作为参数传入,这时可以这样写 publ ...
QImage：：drawRect 和 fillRect在处理大面积区域时代价高昂
项目需要生成一张掩码图, 出于操作pixel方便的考虑采用QImage(mono), 但在实现一个类似于 cvZero的操作时发现在图片面积较大时效率很低, 提醒一下 ps: 后来是改变策略, 用偏移 ...
Spring+quartz 实现定时任务job集群配置
为什么要有集群定时任务? 因为如果多server都触发相同任务,又同时执行,那在99%的场景都是不适合的.比如银行每晚24:00都要汇总营业额.像下面3台server同时进行汇总,最终计算结果可能是真 ...
iOS注册，找回密码时用到的获取验证码
#import "ViewController.h" #import "NSTimer+BlocksKit.h" @interface ViewControll ...
Bat 中特殊符号
批处理.Bat 中特殊符号的实际作用,Windows 批处理中特殊符号的作用: @\\隐藏命令的回显. ~\\在for中表示使用增强的变量扩展:在set中表示使用扩展环境变量指定位置的字符串:在set ...
server&period;xml 解析
server.xml的结构: 常用配置的参数注释: <?xml version='1.0' encoding='utf-8'?> <!-- Licensed to the Apach ...
cdnbest获取，删除，增加，修改域名列表，高级设置api示例
<?php $uid = 28; $vhost = 'asdfw'; $token = getToken($uid, $vhost); print_r($token); //获取token fu ...
无法读取配置节&OpenCurlyDoubleQuote;oracle&period;manageddataaccess&period;client”，因为它缺少节声明
程序发布后出现问题: 无法读取配置节“oracle.manageddataaccess.client”,因为它缺少节声明解决办法: 1.安装了odac12. ODTwithODAC121010.z ...
团队作业7——第二次项目冲刺（Beta版本12&period;04——12&period;07）
1.当天站立式会议照片本次会议在5号公寓3楼召开,本次会议内容:①:熟悉每个人想做的模块.②:根据项目要求还没做的完成. 2.每个人的工作经过会议讨论后确定了每个人的分工组员任务陈福鹏实现 ...