大家好，又见面了，我是你们的朋友全栈君。
美化超链接样式
一、使用动态伪类
注意！！！超链接的四种状态样式的排列是固定的，一般不能随意调换
正确的顺序时Link，visited,hover,active
当鼠标经过超链接是，会先执行第一行声明，
但是紧接着第三行声明会覆盖掉第一行和第二行声明的样式，
所以无法看到鼠标经过和被激活时的效果
<style type="text/css">
a:link{color: red;} /*超链接默认样式*/
a:visited{color: blue;} /*超链接被访问后的样式*/
a:hover{color: green;} /*鼠标经过超链接的样式*/
a:active{color: yellow;} /*超链接被激活时的样式*/
</style>
<ul class="p1">
<li><a href="#" class="a1">首页</a></li>
<li><a href="#" class="a2">新闻</a></li>
<li><a href="#" class="a3">博客</a></li>
</ul>
<ul class="p2">
<li><a href="#" class="a1">关于</a></li>
<li><a href="#" class="a2">版权</a></li>
<li><a href="#" class="a3">友情链接</a></li>
</ul>
样式效果：
二、定义下划线样式
完全清楚超链接下划线样式，加一下代码：
a{/*完全清除超链接下划线效果*/
text-decoration: none;
}
鼠标经过时显示下划线结果，加以下代码：
a{
text-decoration:underline;
}
样式效果：
三、定义样式特效
设计如何为超链接文本设计立体视觉效果，主要时借助边框颜色的深浅错落模拟一下凹凸变化的立体效果。
定义一个超链接在欧仁黄台下显示灰色右边和底边边框线效果、白色顶边和左边框线效果。而当鼠标移过时，则清除右侧和底部边框线，并定义左侧和顶部边框效果，代码如下：
<style type="text/css">
body{
background: #fcc; /*浅色页面背景*/
}
ul{
list-style-type: none; /*清楚项目符号*/
}
li{
margin: 0 2px; /*并列显示*/
float: left;
}
a:hover{
color: green;
background: transparent;
border-color: #bbb#fff#fff#aaa;
} /*鼠标经过超链接的样式*/
a{/*完全清除超链接下划线效果*/
text-decoration: none;
border:solid 1px;
padding: 0.4em 0.8em;
color: #444;
background: #f99; /*超链接背景颜色*/
border-color: #fff#aaa#aaa#fff;
zoom: 1; /*解决IE浏览器无法显示问题*/
}
</style>
<ul class="p1">
<li><a href="#" class="a1">首页</a></li>
<li><a href="#" class="a2">新闻</a></li>
<li><a href="#" class="a3">博客</a></li>
</ul>
<ul class="p2">
<li><a href="#" class="a1">关于</a></li>
<li><a href="#" class="a2">版权</a></li>
<li><a href="#" class="a3">友情链接</a></li>
</ul>
样式图如下：
四、定义光标样式
在默认情况下，鼠标指针经过超链接显示为手形。使用cursor属性可以改变这种默认效果。
表12.1
cursor属性取值说明
auto
基于上下文决定应该显示什么光标
crosshair
十字线光标(+)
default
基于平台的默认光标样式。通常消染为一个箭头
pointer
指针光标，表示一个超链接
move
十字箭头光标，用于标示对象可被移动
e-resize、ne-resize 、nw-resize 、
n-resize、se-resize、 sw-resize、
表示正在移动某个边，如se resize光标用来表示框的移动开始于东南角
s-resize、w-resize
表示可以选择文本。通常渲染为I形光标
text
表示程序正忙，需要用户等待，通常渲染为手表或沙漏
wait
光标下的对象包含有帮助内容，通常渲染为一个问号或一个气球
help
自定义光标类型的图标路径
< uri>URL
如果自定义光标样式，建议使用绝对或相对URL地址指定光标文件(后缀为.cur或者.ani)
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/161735.html原文链接：https://javaforall.net
![直通线和交叉线[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg)
