您的位置:首页 > Web前端 > HTML

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

2014-07-02 16:36 211 查看
定义链接样式
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,也就是我们常说到的LoVeHAte原则(大写字母就是它们的首字母)。

定义局部链接样式
在CSS中写上a:link{}这样的定义会使整个页面的链接样式改变,但有些局部链接需要特殊化,这个问题也不难解决,只要在链接样式定义的前面加上指定的id或class就可以了。

示例:
  #sidebara:link,
#sidebara:visiteid{
color:#FF0000;
text-decoration:none;
}
#sidebara:hover,
#sidebara:active{
color:#000000;
text-decoration:underline;
}

调用方法:
<divid="sidebar"><ahref="http://www.abang.com"target="_blank">链接到阿邦网<a></div>

class的定义方法和id相同,只要将#sidebar改为.sidebar就行了,还有一种方法是直接定义链接的样式,那样更直接,不过调用时比较麻烦,需要给每个特定的链接加上定义的代码。
示例:

  a.redlinka:link,
a.redlinka:visiteid{
color:#FF0000;
text-decoration:none;
}
a.redlinka:hover,
a.redlinka:active{
color:#000000;
text-decoration:underline;
background:#FFFFFF;
}

调用方法:
<div><ahref="http://www.abang.com"target="_blank"class="redlink">链接到阿邦网一<a></div>

HTML中的字体颜色



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

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

附录:395种字体颜色

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

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

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

颜色具体如下:

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

颜色代码:

1白色#FFFFFF2红色#FF00003绿色#00FF00
4蓝色#0000FF5牡丹红#FF00FF6青色#00FFFF
7黄色#FFFF008黑色#0000009海蓝#70DB93
10巧克力色#5C331711蓝紫色#9F5F9F12黄铜色#B5A642
13亮金色#D9D91914棕色#A67D3D15青铜色#8C7853
162号青铜色#A67D3D17士官服蓝色#5F9F9F18冷铜色#D98719
19铜色#B8733320珊瑚红#FF7F0021紫蓝色#42426F
22深棕#5C403323深绿#2F4F2F24深铜绿色#4A766E
25深橄榄绿#4F4F2F26深兰花色#9932CD27深紫色#871F78
28深石板蓝#6B238E29深铅灰色#2F4F4F30深棕褐色#97694F
32深绿松石色#7093DB33暗木色#855E4234淡灰色#545454
35土灰玫瑰红色#85636336长石色#D1927537火砖色#8E2323
38森林绿#238E2339金色#CD7F3240鲜黄色#DBDB70
41灰色#C0C0C042铜绿色#527F7643青黄色#93DB70
44猎人绿#215E2145印度红#4E2F2F46土黄色#9F9F5F
47浅蓝色#C0D9D948浅灰色#A8A8A849浅钢蓝色#8F8FBD
59浅木色#E9C2A660石灰绿色#32CD3261桔黄色#E47833
62褐红色#8E236B63中海蓝色#32CD9964中蓝色#3232CD
65中森林绿#6B8E2366中鲜黄色#EAEAAE67中兰花色#9370DB
68中海绿色#426F4269中石板蓝色#7F00FF70中春绿色#7FFF00
71中绿松石色#70DBDB72中紫红色#DB709373中木色#A68064
74深藏青色#2F2F4F75海军蓝#23238E76霓虹篮#4D4DFF
77霓虹粉红#FF6EC778新深藏青色#00009C79新棕褐色#EBC79E
80暗金黄色#CFB53B81橙色#FF7F0082橙红色#FF2400
83淡紫色#DB70DB84浅绿色#8FBC8F85粉红色#BC8F8F
86李子色#EAADEA87石英色#D9D9F388艳蓝色#5959AB
89鲑鱼色#6F424290猩红色#BC171791海绿色#238E68
92半甜巧克力色#6B422693赭色#8E6B2394银色#E6E8FA
95天蓝#3299CC96石板蓝#007FFF97艳粉红色#FF1CAE
98春绿色#00FF7F99钢蓝色#236B8E100亮天蓝色#38B0DE
101棕褐色#DB9370102紫红色#D8BFD8103石板蓝色#ADEAEA
104浓深棕色#5C4033105淡浅灰色#CDCDCD106紫罗兰色#4F2F4F
107紫罗兰红色#CC3299108麦黄色#D8D8BF109黄绿色#99CC32


                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: