zoukankan      html  css  js  c++  java
  • 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
     
  • 相关阅读:
    分而治之应该把握哪些原则呢
    什么事SOA
    SOA架构设计的案例分析课后 学习
    关于分层架构的知识学习
    从小编程,到架构师,我们应该具备什么
    基于MVC架构实例分析以校园知网校内论坛功能为例
    服务架构设计及其应用
    《一线架构师实践指南》阅读笔记03
    《一线架构师实践指南》阅读笔记02
    Pre-Architecture 阶段阅读笔记
  • 原文地址:https://www.cnblogs.com/fendou-999/p/3820575.html
Copyright © 2011-2022 走看看