用css样式控制超链接颜色显示

2016-02-19 21:21 15 1 收藏

下面是个简单易学的用css样式控制超链接颜色显示教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!

【 tulaoshi.com - Web开发 】

  很多人在网页上实现不同链接有不同的颜色上不知如何处理,如果改a的属性,好像所有的链接的颜色都改了。

  事实上,采用css样式实现这个效果比较简单。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

  先看一下常用设置:

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=line1a href="/"不同颜色的超链接/a/span,这样的话,这个链接的颜色就改变了。

Over~~

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

来源:https://www.tulaoshi.com/n/20160219/1625966.html

延伸阅读
标签: Web开发
测试代码如下 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / title无标题文档/title style type="text/css" .test1{ ...
标签: Web开发
群里的兄弟问的效果 无标题文档 p.p1{ background-color:#FF0000;font-size:22px;_ font-family:"方正舒体"; font-weight:100; } hello,this is a example of stylesheets hello,this is a example of stylesheets [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 网上搜到的不错的控制css JS控制样式 ...
    主页上的鼠标是不是就只有箭头和小手两种模样呢?如果鼠标移到“帮助”等字样上时,形状就变成求助的问号;鼠标移到可能需要较长时间等待的超链接时,鼠标形状就变成等待的样子……那该多好啊! 其实,借助我们的css,几句很简单的代码就可以实现这一切! 不信?把鼠标移到下面的演示文字上看看效果吧! ...
标签: 电脑入门
我们在一些网站上阅读文章或资讯的时候总会看到文章中有些特定的词、句或图片带有超链接,点击以后就会跳到与这些特定的词、句、图片相关的页面中,这样都是非常便于我们阅读的。当然,不仅是在网页中可以实现,我们在Word中也是可以实现的,给特定的词、句、图片加上超链接,点击就会打开另一个相关的文档,或者跳到指定的位置上。下面word教...
标签: Web开发
用css属性选择器可以有选择性地对链接样式进行控制,如让所有的外部链接都加一个小图标来标识其是一外部链接。 但用css有弊端: 1、只支持FireFox等对web标准支持很好的浏览器。 2、只能判断链接,不能判断锚点或javascript。如遇到就无能为力了。 这里可以结合js来完成,首先写一个样式: 以下是引用片段: a.other:...

经验教程

250

收藏

59
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部