利用css样式控制超链接颜色显示
很多人在网页上实现不同链接有不同的颜色上不知如何处理,如果改a的属性,好像所有的链接的颜色都改了。
四中超链接状态分别对应的css属性:a{}、a:hover{} 、a:visited{}、a:active{},通常只写a{}、a:hover{}即可,如果你需要其他两种字体颜色设置请参照一下顺序来书写
a{color:red;}
a:visited{color:green;}
a:hover {color:yellow;background:blue;}
a:active {color:lime;background:red;}
放出一个其他字体颜色设置技巧:当文本在被选中时的字体和背景颜色(默认为蓝底白字),通过下面的设置可以改变这种默认效果。
::-moz-selection { background:#d3d3d3; color:#555;}
::-webkit-selection { background:#d3d3d3; color:#555;}
::selection { background:#d3d3d3; color:#555;}
事实上,采用css样式实现这个效果比较简单。
先看一下常用设置:
a:link 超链接的普通样式
a:visited 点击过的
a:hover 鼠标经过时的
a:active 单击时
a:link{text-decoration:none;} 无下划线
a:link{text-decoration:underline;} 有下划线
为了实现不同链接不同效果,我们要为不同效果的那个链接专门定义一个css规则。
比如:
我们常规css是这样的:
a:link{color:#ff0000}
那么网页上所有链接的颜色都是:#ff0000。
现在我们改一下:
a:link{color:#ff0000}
.line1 a:link{color:#000000}
同时,在要改变颜色的链接前加上css定义,像这样:<span class=line1><a href="/">不同颜色的超链接</a></span>,这样的话,这个链接的颜色就改变了。
相关文章
- 本文实例讲述了jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果。分享给大家供大家参考,具体如下:这里演示jQuery实现鼠标移动到链接上,滑动展开/隐藏图片效果,鼠标放在“上一页”“下一页”上,立即浮现出所对应的图...2015-10-30
- 这篇文章主要介绍了解决vant-UI库修改样式无效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-03
- 这篇文章主要介绍了vant 解决tab切换插件标题样式自定义的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-14
elementui的el-popover修改样式不生效的解决
在使用element-ui的时候,有一个常用的组件,那就是el-popover,本文就介绍一下elementui的el-popover修改样式不生效的解决方法,感兴趣的可以了解一下...2021-07-01- 这篇文章主要为大家详细介绍了JavaScript实现颜色查看器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-04-13
- 这篇文章主要为大家详细解析了BootStrap图片样式、辅助类样式和CSS组件源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-23
- 这篇文章主要介绍了详解基于Vue cli开发修改外部组件Vant默认样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-04
安卓利用按钮Button更改的字体大小、字体颜色、背景颜色代码
本文章来介绍在android开发中,我们通过button按钮来动态改变字体大小、字体颜色、背景颜色代码,有需要了解的朋友可参考参考。 实现的逻辑:通过遍历View的方式,判断Vi...2016-09-20- 大家用百度搜索的时候,可能会发现,结果链接用的还是百度的链接,点击之后才会跳转到另外一个页面,另外一个页面的真实链接如何获取到呢?? 通过分析发现: 可以看出,返回...2016-05-19
- 这篇文章主要介绍了基于leaflet.js实现修改地图主题样式的流程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-05-16
- 这篇文章主要介绍了vue-router为激活的路由设置样式操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18
- 这篇文章主要介绍了jQuery获得字体颜色16位码的方法,涉及jQuery样式操作及正则表达式使用技巧,非常简单实用,需要的朋友可以参考下...2016-02-23
- 这篇文章主要介绍了PyCharm设置注释字体颜色以及是否倾斜的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-16
- 这篇文章主要为大家详细介绍了JavaScript实现鼠标经过表格行给出颜色标识,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-04-12
- 这篇文章主要介绍了R ggplot2 修改默认颜色的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-05-06
ASP.NET中iframe框架点击左边页面链接 右边显示链接页面内容
这篇文章主要介绍了ASP.NET中iframe框架点击左边页面链接,右边显示链接页面内容的实现代码,感兴趣的小伙伴们可以参考一下...2021-09-22- 今天小编在这里要教大家的是美图秀秀的这一款软件修改颜色的方法,各位想知道到底该怎么样才能够修改颜色的使用者们,那么下面就快来跟着小编一起看看教程吧。 给各...2016-09-14
- 这篇文章主要介绍了python docx的超链接网址和链接文本操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-06
- 今天小编在这里就来给photoshop的这一款软件的使用者们来说下图层样式详解之斜面和浮雕,各位想知道具体信息的使用者们,那么下面就快来跟着小编一起看一看教程吧。 ...2016-09-14
- ...2016-09-20