`

css超链接样式

    博客分类：
  • Css
css 
阅读更多
1. css超链接样式

1) 使用css伪类别来设置超链接样式 

链接的四种状态：
a:link：普通的、未被访问的链接
a:visited：用户已访问的链接
a:hover：鼠标指针位于链接的上方
a:active：链接被点击的时刻

<style type="text/css">
    a:LINK {
        color: red;
        text-decoration: none;
    }
    a:VISITED {
        color: green;
        text-decoration: none;
    }
    a:HOVER {
        background-color: yellow;
        text-decoration: none;
    }
</style>
</head>
<body>
<a href="http://www.123.com">超链接</a>
</body>


2) 创建按钮式超链接 

<style type="text/css">
    body{
        margin: 20px;
    }
    a{
        font-family: Arial;
        margin: 5px;
    }
    a:LINK,a:VISITED {
        color:#A62020;
        padding:4px 10px 4px 10px;
        background-color:#DDD;
        text-decoration: none;
        border-top: 1px solid #EEEEEE;
        border-left: 1px solid #EEEEEE;
        border-bottom: 1px solid #717171;
        border-right: 1px solid #717171;
    }
    a:HOVER {
        color: #821818;
        padding: 5px 8px 3px 12px;
        background-color: #CCC;
        border-top: 1px solid #717171;
        border-left: 1px solid #717171;
        border-bottom: 1px solid #EEEEEE;
        border-right: 1px solid #EEEEEE;
    }
</style>
</head>
<body>
<a href="http://www.baidu.com">Java</a>
<a href="http://www.baidu.com">Php</a>
<a href="http://www.baidu.com">.Net</a>
</body>
分享到：
| css表格样式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics