链接上的CSS应用

最新推荐文章于 2023-01-18 22:17:41 发布

会开花的树-

最新推荐文章于 2023-01-18 22:17:41 发布

阅读量436

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/u013830811/article/details/48545133

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

/**
    关于a的各种样式：
        1. a:link 普通的 未被访问的链接
        2. a:visited 已经被访问的链接
        3. a:hover 鼠标位于链接上方
        4. a:active 链接被点击的时刻
        5. text-decoration：none用于去掉下划线
    */


    a.one:link {color:#ff0000; text-decoration:none;}
    a.one:visited {color:#0000ff;}
    a.one:hover {color:#ffcc00;}

    a.two:link {color:#ff0000;}
    a.two:visited {color:#0000ff;}
    a.two:hover {font-size:150%;}

    a.three:link {color:#ff0000;}
    a.three:visited {color:#0000ff;}
    a.three:hover {background:#66ff66;}

    a.four:link {color:#ff0000;}
    a.four:visited {color:#0000ff;}
    a.four:hover {font-family:'微软雅黑';}

    a.five:link {color:#ff0000;text-decoration:none;}
    a.five:visited {color:#0000ff;text-decoration:none;}
    a.five:hover {text-decoration:underline;}
/*下面加一个链接框：*/
    a.link:link,a.link:visited
    {
        display:block;
        font-weight:bold;
        font-size:14px;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        color:#FFFFFF;
        background-color:#98bf21;
        width:120px;
        text-align:center;
        padding:4px;
        text-decoration:none;
    }

        a.link:hover,a.link:active
    {
        background-color:#7A991A;
    }
    </style>
</head>

<body>
<p>请把鼠标指针移动到下面的链接上，看看它们的样式变化。</p>

<p><b><a class="one"    href="/index.html" target="_blank">这个链接改变颜色  没有下划线</a></b></p>
<p><b><a class="two"    href="/index.html" target="_blank">这个链接改变字体尺寸</a></b></p>
<p><b><a class="three"  href="/index.html" target="_blank">这个链接改变背景色</a></b></p>
<p><b><a class="four"   href="/index.html" target="_blank">这个链接改变字体</a></b></p>
<p><b><a class="five"   href="/index.html" target="_blank">这个链接改变文本的装饰</a></b></p>

<!-- 链接框 -->
<h5 ><a href="" class="link">Link</a></h5>
</body>

</html>

会开花的树-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
链接上的CSS应用

<!DOCTYPE html><html><head><meta charset="utf-8"><style>/** 关于a的各种样式： 1. a:link 普通的未被访问的链接 2. a:visited 已经被访问的链接 3. a:hover 鼠标位于链接上方 4. a:active 链接被点击的时刻
复制链接

扫一扫