a:link {color: #FF0000} /* 未访问的链接*/
a:visited {color: #00FF00} /* 已访问的链接*/
a:hover {color: #FF00FF} /* 鼠标移动到链接上*/
a:active {color: #0000FF} /* 选定的链接*/介于hover之后visited之前
text-decoration属性值none代表无下划线,underline代表有下划线,line-through代表删除线。四种状态的顺序一定不能颠倒,否则有些不生效
1)增大点击区域
链接在默认状态下是内联元素,转换块级元素可以获得更大的点击区域,设置宽度和高度,display属性设置为block,具体如下:
a { display: block; height:30px; width: 100px; line-height: 30px; text-align: center;background: #CCC; }
2)制作css按钮
把超链接转换为块级元素后,增加一个按钮背景即可实现,如下所示:
a { display: block; height:34px; width: 107px; line-height: 2; text-align: center;background:url(https://blog.csdn.net/upload/2010-08/14/014304_btn_bg.gif) no-repeat 0px 0px; color:#d84700;font-size: 14px; font-weight: bold; text-decoration: none; padding-top: 3px; }
a:hover { background:url(https://blog.csdn.net/upload/2010-08/14/014304_btn_bg_hover.gif) no-repeat 0px 0px;}
本文介绍了如何使用CSS对链接进行美化,包括设置链接的不同状态样式、增大点击区域及制作CSS按钮的方法。通过简单的代码示例,展示了如何改变链接的颜色、下划线,并将链接转换为具有特定尺寸和样式的按钮。
2999

被折叠的 条评论
为什么被折叠?



