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中的字体颜色
<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就可以搞定啦,人生最悲哀的事情莫过于工作了这么久啦 ...
随机推荐
- cURL和file_get_contents实现模拟post请求
以前面试时候,面试官问过我后端有没有跨域问题,但是不敢肯定,现在可以肯定的说没有. 不文用php的cURL和file_get_contents方法分别实现后端跨域.本文场景也是在tp5下实现的. 一, ...
- 微信小程序wx.pageScrollTo的替代方案
wx.pageScrollTo这个微信小程序的api功能如下: 简而言之就是实现页面滚动的.但是在实际应用当中显得有些鸡肋,为啥呢?使用中有明显页面有明显的抖动,这无疑是极不好的用户体验.我用的华为6 ...
- 《Effective C#》快速笔记(三)- 使用 C# 表达设计
目录 二十一.限制类型的可见性 二十二.通过定义并实现接口替代继承 二十三.理解接口方法和虚方法的区别 二十四.用委托实现回调 二十五.用事件模式实现通知 二十六.避免返回对内部类对象的引用 二十七. ...
- BZOJ4873 Shoi2017寿司餐厅(最小割)
选择了某个区间就必须选择其所有子区间,容易想到这是一个最大权闭合子图的模型.考虑将区间按长度分层,相邻层按包含关系连边,区间[i,j]的权值即di,j,其中最后一层表示长度为1的区间的同时也表示寿司本 ...
- 去除安卓手机select下拉框默认箭头
-webkit-appearance: listbox;
- 整合常用功能的JS小组件库-v1.0
function Alex() { //给予video.js的页面滚动到视频元素范围内自动播放/出范围暂停播放-----01 this.video_autoplay = function (box) ...
- [洛谷4609] [FJOI2016]建筑师
题目描述 LOJ题面:https://loj.ac/problem/2173. 洛谷题面:https://www.luogu.org/problemnew/show/P4609. Solution [ ...
- 【以前的空间】bzoj1009 [HNOI2008]GT考试
动态规划+kmp+矩阵快速幂 关于这题可以写出一个dp方程(f[i,j]表示准考证前i位中后j位为不吉利的数字的前j位的情况的个数) f[i,j]=Σf[i-1,k],其中j表示不吉利数字前k个数字加 ...
- POJ3264:Balanced Lineup——题解+st表解释
我早期在csdn的博客之一,正好复习st表就拿过来.http://write.blog.csdn.net/mdeditor#!postId=63713810 这道题其实本身不难(前提是你得掌握线段树或 ...
- Educational Codeforces Round 39 (Rated for Div. 2) G
Educational Codeforces Round 39 (Rated for Div. 2) G 题意: 给一个序列\(a_i(1 <= a_i <= 10^{9}),2 < ...