CSS-a标签的四种状态

最新推荐文章于 2024-04-28 19:44:56 发布

大雾肆起

最新推荐文章于 2024-04-28 19:44:56 发布

阅读量7k

点赞数

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

本文链接：https://blog.csdn.net/qq_56930747/article/details/124363866

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在HTMl中写一个a标签。

<!DOCTYPE html>
<html>
    <head>
		<meta charset="utf-8">
        <title>a标签的四种状态的样式</title>
    </head>
    <body>
        <a href="#">超链接</a>
    </body>
</html>

默认状态下的样式 a:link

去除a标签默认的下划线，更改文字属性

a:link {
    /* 去除a 标签默认的下划线 */
    text-decoration: none;
    /* 设置字体样式 */
    font-size: 14px;
    color: red;
}

浏览过的样式 a:visited

a:visited{
    /* 更改文字属性 */
	color: red;
}

按下连接时 a:active

a:active{
    /* 更改文字属性 */
	color: orange;
}

鼠标移动到a标签上时 a:hover

1. 设置文字属性

a:hover {
    /* 设置文字属性 */
    color: blue;
}

2. 设置鼠标箭头的样式

a:hover{
	/*  crosshair 十字体  */
    cursor: crosshair;
	/* s-resize 箭头向下 */
    cursor: s-resize;
	/*  move：十字箭头 */
    cursor: move;
	/* help: 加一个问号  */
    cursor: help;
	/* se-resize：箭头斜右下  */
    cursor: se-resize;
	/* sw-resize 箭头斜左下 */
	cursor: sw-resize;
}

优惠劵

大雾肆起

关注关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
CSS-a标签的四种状态

在HTMl中写一个a标签。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>a标签的四种状态的样式</title> </head> <body> <a href="#">超链接</a> </body></html>默认
复制链接

扫一扫