CSS入门 0x3 链接样式

链接的伪类选择器

注意使用次序
a:link	a:visited	a:hover	a:focus	a:active
未访问链接	已访问链接	鼠标悬停	键盘选中	被**的，发生在单击时

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>link</title>
        <style>
            
            a:link,a:visited {
                text-decoration: none;/*取消下划线*/
                font-weight: bold;/*用加粗代替下划线*/
                color: blue;
            }
            a:hover,a:focus,a:active {
                color: red;
                text-decoration: none;
                border-bottom: 1px solid #000;/*利用边框自定义下划线*/
            }
            a[href^="http:"],a[href^="https:"] {
                /*利用属性选择器设置外部链接的样式*/
                /*如果站内有http开头，需要自定义重新设置*/
                background: url(./images/externalLink.gif) no-repeat right top;
                padding-right: 10px;
            }
        </style>
    </head>
    <body>
        <a href="#" target="_blank">未访问过</a>
        <a href="#" target="_blank">访问过的</a>
        <a href="#" target="_blank">鼠标悬停</a>
        <a href="#" target="_blank">自定义下划线</a>
        <a href="https://blog.csdn.net/funkstill" target="_blank">外部链接</a>
    </body>
</html>

CSS入门 0x3 链接样式

创建类似按钮的链接

简单翻转

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Link button</title>
        <style>
            a {
                display: block;
                width: 7em;
                line-height: 1.4;
                text-align: center;
                text-decoration: none;
                border:1px solid #66a300;
                background-color: #8cca12;
                color: #fff;
            }
            /*使用伪类实现翻转*/
            a:hover,a:focus {
                background-color: #f7a300;
                border-color: #ff7400;
            }
            
        </style>
    </head>
    <body>
        <a href="#">假装这是按钮</a>
        <br>
        <a href="#">悬停在按钮</a>
    </body>
</html>

CSS入门 0x3 链接样式

图像翻转

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>图像翻转</title>
        <style>
            a:link,a:visited {
                display: block;
                width: 203px;
                height: 72px;
                text-indent: -1000em;
                background:url(./images/button.png) left top no-repeat;
            }
            a:hover,a:focus {
                background-image: url(./images/button-over.png);
            }
            a:active {
                background-image: url(./images/button-active.png);
            }
        </style>
    </head>
    <body>
        <a href="#"></a>
        <br>
        <a href="#"></a>
    </body>
</html>

CSS入门 0x3 链接样式

Pixy样式翻转

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>图像翻转</title>
        <style>
            /*通过改变对齐方式设置按钮背景*/
            a:link,a:visited {
                display: block;
                width: 203px;
                height: 72px;
                text-indent: -1000em;
                background:url(./images/buttons.png) -203px no-repeat;
            }
            a:hover,a:focus {
                background-position: right top;
            }
            a:active {
                background-position: left top;
            }
        </style>
    </head>
    <body>
        <a href="#"></a>
        <br>
        <a href="#"></a>
        <br>
        <a href="#"></a>
    </body>
</html>

CSS入门 0x3 链接样式

CSS精灵

把许多图标包含到一个图像中减少服务器调用。

CSS入门 0x3 链接样式

链接的伪类选择器

创建类似按钮的链接

相关推荐