css设置超链接样式_css如何设置超链接样式「建议收藏」

css设置超链接样式_css如何设置超链接样式「建议收藏」美化超链接样式一、使用动态伪类注意!!!超链接的四种状态样式的排列是固定的,一般不能随意调换正确的顺序时Link,visited,hover,active当鼠标经过超链接是,会先执行第一行声明

美化超链接样式

一、使用动态伪类

注意!!!超链接的四种状态样式的排列是固定的,一般不能随意调换
正确的顺序时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)

今天的文章css设置超链接样式_css如何设置超链接样式「建议收藏」分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/68979.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注