【前端】css笔记（4）

足足一米58

已于 2022-07-27 17:27:24 修改

阅读量66

点赞数 3

分类专栏： css 文章标签：前端 css html

于 2022-07-26 14:02:57 首次发布

本文链接：https://blog.csdn.net/weixin_61731785/article/details/125987741

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何使用CSS来控制链接的颜色、下划线、背景以及鼠标形状，展示了不同状态下链接的样式设置，包括未访问链接、已访问链接、鼠标悬停和活动链接。同时，还演示了如何创建具有边框和填充的链接框，以增强链接的视觉效果。通过对这些属性的调整，可以实现链接在网页中更加吸引用户的注意力并提供良好的交互体验。

摘要由CSDN通过智能技术生成

目录：

链接颜色

对链接颜色的控制：

<style>
a:link {color:#FF0000;} /* unvisited link（未访问过的链接） */
a:visited {color:#00FF00;} /* visited link（用户已访问过的链接） */
a:hover {color:#FF00FF;} /* mouse over link（当用户鼠标放在链接上时） */
a:active {color:#0000FF;} /* selected link（链接被点击的那一刻） */
</style>

ps：当设置为若干链路状态的样式，也有一些顺序规则：

a:hover 必须跟在 a:link 和 a:visited 后面
a:active 必须跟在 a:hover 后面

链接下划线

对链接下划线的控制：

<style>
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
</style>

链接背景

对链接背景的控制：

<style>
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
a:active {text-decoration:underline;}
</style>

鼠标形状

鼠标形状控制：

default	默认光标，箭头
pointer	超链接的指针，手型
wait	指示程序正在忙
help	指示可用的帮忙
text	指示文本
crosshair	鼠标呈现十字状

<style>
   a:hover {
   color: green;
   cursor: crosshair;
   }
</style>

链接框

创建链接框：

<style>
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>css整理</title>
</head>
<body>
    <style>
        a:link {
            color: #FF0000;
        }

        a:visited {
            color: #00FF00;
        }

        a:hover {
            color: #FF00FF;
        }

        a:active {
            color: #0000FF;
        }
    </style><!--颜色-->

    <style>
        a:link {
            text-decoration: none;
        }

        a:visited {
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        a:active {
            text-decoration: underline;
        }
    </style><!--下划线-->

    <style>
        a:link {
            background-color: #B2FF99;
        }

        a:visited {
            background-color: #FFFF85;
        }

        a:hover {
            background-color: #FF704D;
        }

        a:active {
            background-color: #FF704D;
        }

        a:active {
            text-decoration: underline;
        }
    </style><!--背景-->

    <style>
        a:hover {
            color: green;
            cursor: crosshair;
        }
    </style><!--鼠标-->

    <style>
            a:link, a:visited
            {
                display:block;
                font-weight:bold;
                color:#FFFFFF;
                background-color:#98bf21;
                width:120px;
                text-align:center;
                padding:4px;
                text-decoration:none;
        }
            a:hover, a:active
            {
                background-color:#7A991A;
        }
    </style><!--链接框-->


</body>
</html>