a超链接标签的4个样式:
a:link 超链接的默认样式。
a:visited 访问过的(已经看过的)链接样式。
a:hover 鼠标处于鼠标悬停状态的链接样式。
a:active 当鼠标左键按下时,被激活(就是鼠标按下去那一瞬间)的链接样式。
简写:
a{}
a:hover{}
<style> /* a:link 超链接的默认样式 */ a:link{ color: green } /* a:visited 访问过的(已经看过的)链接样式。 */ a:visitde{ color: blue } /* a:hover 鼠标处于鼠标悬停状态的链接样式 */ a:hover{ color: yellow } /* a:active 当鼠标左键按下时,被激活(就是鼠标按下去那一瞬间)的链接样式。 */ a:active{ color:pink } </style> </head> <body>
a 超链接标签的特点:
(1)是行元素,行元素与行元素之间,内容可以”并排”存在。
(2)行元素,本身不能设置”宽度和高度”
如果在某些场景下,需要把 超链接 由 行元素 转成 块元素,我们的操作方法:
<style> .list a{ /* 文本颜色 */ color:#515151; /* 去除下划线 */ text-decoration: none; /* 将行元素转换为块元素 */ display: inline-block; /*宽度*/ width: 200px; /*高度*/ height: 100px; /*轮廓线(我们在网页布局中,写给开发人员自己看的,看完之后可以把它删了)*/ outline: 5px dashed red; } .list a:hover{ color: blue; text-decoration: underline; } </style> </head> <body> <div class="list"> <a href="">网易</a> <a href="">早安</a> <a href="">你好</a> </div>
版权声明:本文为weixin_72303943原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。