CSS-链接

最新推荐文章于 2023-09-21 15:52:55 发布

weixin_30849403

最新推荐文章于 2023-09-21 15:52:55 发布

阅读量36

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/benbenma/p/7148532.html

本文详细介绍了CSS中针对链接的不同状态设置样式的具体方法，包括未访问、已访问、活动状态及鼠标悬停效果等，并通过示例展示了如何为a标签及div元素应用这些样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>针对链接的CSS样式</title>
<style>
:link{   /*a:link网站未被访问时的样式，这里的a标签可以不写，因为link只针对a标签，下面两个一样*/
　　color:red;/*未访问时a标签里的字体是红色*/
}
:visited{   /*a:visited网站已被访问过的样式*/
　　color:yellow;/*访问后a标签里的字体变黄色*/

}
:active{   /*a:active按住鼠标不撒手时的状态，激活网站*/
　　color:green;/*点击时a标签里的字体变成绿色*/
}
a:hover{ 　　　　　 /*a:hover鼠标经过字体时出现的样式*/
　　background:red;/*鼠标经过字体时，有红色背景，即鼠标悬停时样式*/
}
div:hover{ 　　　　　　　 /*hover不仅针对a标签，其他标签也适用*/
　　background-color:blue;/*background后面加不加color都是表示背景颜色*/
cursor:progress;
/*cursor:鼠标样式，auto（正常鼠标样式）、default（默认鼠标）和move（移动鼠标）都显示的是默认时的鼠标样式,crosshair是十字鼠标，pointer是点状鼠标，text是文字鼠标,wait是等待鼠标，help是求助鼠标，progress是过程鼠标*/
}
div{
width:200px;
height:300px;
border:1px solid #000000;
}