CSS学习之途（超链接）

之前的笔记都存在onenote中，突然想起还有CSDN这种公共平台可以分享一下自己的学习之路

希望能通过这种方式不断激励自己并能和大家一起进步！

链接的四种状态：

首先插入链接

a:link 普通的 未被访问的链接    

a:LINK{
        color: red;
        text-decoration: none;
    }

设置链接字体为红色，并不显示下划线

a:visited 用户已访问的链接

a:VISITED{
        color: BLUE;
        text-decoration: none;
    }

设置被点击过的链接为蓝色并不显示下划线

a:hover 鼠标指针位于链接的上方

a:hover{
        background-color: red;
        text-decoration: none;
    }

当鼠标位于链接区域时，链接区域变为红色并不显示下划线

a:active 链接被点击的时刻

一般显示时间很短基本不用考虑，如需设置，类似以上参数即可。

升级操作：按钮式链接

        大白话说就是链接展现成按钮区域的样子

        部分代码如下：

a:LINK,a:VISITED{
        color: #A62020;
        text-decoration: none;
        padding:4px 10px 4px 10px;
        backgound-color:#DDD;
        border-bottom: 1px solid #717171;
        border-right: 1px solid #717171;
        border-left: 1px solid #EEEEEE;
        border-top: 1px solid #EEEEEE;
    }
    a:HOVER{
        color:#821818;
        padding:5px 8px 3px 12px;
        background-color: #CCC;
        border-bottom: 1px solid #EEEEEE;
        border-right: 1px solid #EEEEEE;
        border-left: 1px solid #717171;
        border-top: 1px solid #717171;

  
首先是要将超链接区域展示成按钮的样子，通过不同的border颜色来体现出按钮的立体感；

其次是当鼠标放置到链接上时，应体现出按钮被按动的样子，依然是通过border颜色的变化以及链接区域颜色的变化来体现。