CSS控制超链接出现指定的效果

要求:

(1) 默认样式是黑色,24px,没有下划线;

(2) 当鼠标移动到超链接时,自动出现下划线,字号变为40px,颜色变为绿色;

(3) 点击后,超链接变成红色

html页面内容:

<html>
<head>
<title>CSS控制超链接的例子</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<a href="http://www.bianceng.cn">链接到www.bianceng.cn</a>
</body>
</html>

test.css的内容:

a:link{
  color:black;
  text-decoration:none;
  font-size:24px;
  }
  a:hover{
  text-decoration:underline;
  font-size:40px;
  color:green;
  }
  a:visited{
  color:red;
  }

效果如下图:

更多精彩内容:http://www.bianceng.cnhttp://www.bianceng.cn/web/Css/

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索内容
, 链接
, color
, 效果
, 下划线
font-size
css超链接去掉下划线、css超链接、css 超链接样式、好看的超链接css样式、css超链接颜色,以便于您获取更多的相关知识。

时间: 2024-11-03 02:13:13

CSS控制超链接出现指定的效果的相关文章

网站制作如何用CSS控制超链接样式

  网站制作用CSS可控制超链接样式,一般分为四个部分:a:active是超级链接的初始状态:a:hover是把鼠标放上去时的状况:a:link 是鼠标点击时:a:visited是访问过后的情况. CSS控制超链接的三种方法 1.通过对应超链接外的父级的css类的css样式来控制超链接的样式 案例超链接代码<div class="yangshi"><a href="http://www.wangqi.com/">CSS</a>&l

关于css控制鼠标滑过时的效果

问题描述 <tdonMouseOver="this.style.background='#ff6600'"onMouseOut="this.style.background='#CCCCCC';"bgcolor="#CCCCCC"></td> 上面的代码是鼠标滑过时候表格背景色变化,离开的时候会恢复默认的背景色.我现在有个问题,就是上面这段代码.因为我的背景是图片.所以上面关于背景色的地方我该如何改成图片的形式呢.back

CSS控制字体效果的思考

css|控制 字体的处理在网页设计中无论怎么强调也不为过,毕竟网页使用来传递信息的,而最经典最直接的信息传递方式就是文字,所以,了解一点字体的基本知识对于设计来说还是非常重要的. 中文和英文的最大区别就是中文是方块字,英文是拼音文字,这对字体的处理的影响是巨大的.看看下面的图示就会发现,英文字体里的那些变化在中文字体里都弱化了. 作为中文的读者,习惯性的接受方块形状做为阅读的单元,其实对于眼睛来说,这是一种容易疲劳的方式,阅读的时候你的视线实际上是跟随整行文字的外形.看看这个例子. NOW I'

css控制不同段落出现不同的效果

css控制不同段落出现不同的效果,即对同一种html元素分类: html页面内容: <html> <head> <title>对同一种html元素分类</title> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body> <p class="cls1&quo

XML用CSS控制属性时,在chrome打开有效果,但是在IE打开就没有用

问题描述 XML用CSS控制属性时,在chrome打开有效果,但是在IE打开就没有用 <?xml version=""1.0"" encoding=""UTF-8"" ?><?xml-stylesheet type=""text/css"" href=""config.css""?> 中国美国英国德国 #a1{ font-s

通过CSS类型的顺序改变翻滚效果

css 你也许已经意识到,你可以通过指定每一键接的不同风格以建立CSS翻滚效果,这些链接包括普通的链接link (normal), 访问,翻转,以及激活.并且,你可能也知道CSS类型的顺序可以产生效果上的差别,CSS代码后顺序的风格将会取代针对于相同元素的前顺序的风格.建立翻滚效果的类型顺序显得相当重要.  现在让我们看看如何安排链接状态的类型在不产生冲突的情况下支持正常的翻滚效果,并且如何重新安排这些类型顺序以获得不同的翻滚效果. 链接状态 典型的CSS翻滚效果依赖于超链接中四个状态之一的独立

巧用CSS控制鼠标样式变换

css|控制|鼠标样式 主页上的鼠标是不是就只有箭头和小手两种模样呢?如果鼠标移到"帮助"等字样上时,形状就变成求助的问号:鼠标移到可能需要较长时间等待的超链接时,鼠标形状就变成等待的样子--那该多好啊! 其实,借助我们的css,几句很简单的代码就可以实现这一切! 不信?把鼠标移到下面的演示文字上看看效果吧! 演示:手形 源代码:<P style="CURSOR: hand">演示:手形</P> 演示:移动 源代码:<p style=c

用css控制标题字符溢出,用省略号表示

 css控制文章列表,让标题溢出的文字以省略号方式表现. <div style="width:300px; height:22px;line-height:22px; white-space: nowrap;text-overflow:ellipsis; overflow:hidden;">测试一下效果看能不能达到只逼供逼供逼供逼供珍贵逼供蚶见多识广薯在时工楞革革工进而杳碴国圆顶 </div> 用上面这段代码就可以实现,但如果要实现效果就得结合多个css的定义才

用CSS控制输入框input悬停交互样式

制作表单的时候,实现鼠标悬停交互效果有多种方法: 1.在xhtml中直接写入onmouseover.onmouseout脚本就可以实现了,但这样就违背了web标准所倡导的内容.表现相分离的原则.以后若要对此进行修改也将会很繁琐.这样直接写入xhtml也会让页面代码增加,如果只是一个input输入框或许是无所谓的,如果是几十个几百个,增加的字节数就很宠大了. 2.在xhtml中加入小脚本,鼠标经过时可以切换CSS.具体内容请看这篇文章.虽然实现了内容.表现相分离,以后的修改也会很方便.但同样会让页