推荐专题
最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
利用css样式控制超链接颜色显示
时间:2022-06-25 09:27:39 编辑:袖梨 来源:一聚教程网
很多人在网页上实现不同链接有不同的颜色上不知如何处理,如果改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定义,像这样:不同颜色的超链接,这样的话,这个链接的颜色就改变了。
相关文章
- b网交易所app官网 for Android v5.12.8 安卓版 04-19
- imtoken钱包app for Android v2.14.1 官方安卓版 04-19
- 易欧交易所app v6.55.1 最新安卓版 04-19
- 《鸣潮》七连跳攻略 04-19
- 塞尔达传说王国之泪无限复制料理方法介绍 04-19
- 女神异闻录夜幕魅影mona武器该怎么选择 04-19