CSS(十) 设置超链接样式

来源：互联网发布：mac怎么强制退出软件编辑：程序博客网时间：2024/05/24 01:02

使用CSS 伪类别来设置超链接样式

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

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>使用CSS伪类别来设置超链接样式</title><style type="text/css">    a:LINK {        color: red;        text-decoration: none;    }    a:VISITED {        color: blue;        text-decoration: none;    }    a:HOVER {        background-color: pink;        text-decoration: none;    }</style></head><body><a href="http://www.baidu.com">点我去百度</a></body></html>

没有点击的时候是红色，当鼠标移动上去的时候是粉色，当点击超链接之后变成蓝色

创建按钮式超链接

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>创建按钮式超链接</title><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></html>

点击超链接的时候会有凹凸感，就像点击按钮一样

阅读全文

0 0