锐歌网络 网站运营 建站教程 购物指南 健康知识 绿色军营欢迎您访问锐歌网络 设为首页 | 加入收藏 | 联系站长 
锐歌网络
专注网络技术

您的位置:首页 » css » CSS属性-文本属性-装饰超链接

  ※装饰超链接

  网页默认的链接方式是这样的:未访问过的链接是蓝色文字并带蓝色的下划线,访问过的超级链接是深紫色的文字并带深紫色的下划线。如果您所有的网页都是这种样式,是不是很单调呢?

  其实,利用文本属性中的Text-decoration属性就可以实现对超链接的修饰。我们先看下面的这段代码:

  <html>
   <title>link css</title>
   <head>
   <style>
   <!--

   //*定义伪类元素(a:),大括号内定义了前景色属性和文本装饰属性,
   hover加上‘font-size’属性目的是让鼠标激活链接时改变字体*//

   a:link{color:green;text-decoration:none}
   //*未访问时的状态,颜色为绿色(green),文本装饰属性(text-decoration)值
   为没有(none)*//

   a:visited{color:red;text-decoration:none}
   //*访问过的状态,颜色为红色(red),文本装饰属性值为没有*//
   a:hover{color:blue;text-decoration:overline;font-size:20pt}
   //*鼠标激活的状态,颜色为蓝色(blue), 文本装饰属性值为上划(overline),
   字体大小为20pt*//

   -->
   </style>
   </head>
   <body>
   <p style=“font-family:行书体;font-size:18pt”>
   <a href=“http://www.vegoo.net”>未访问的链接</a></p>

   //*加链接,显示三种不同状态,并且定义了链接文本的字体和大小*//
   <p> <a href=“http://www.vegoo.net”>访问过的链接</a></p>
   <p> <a href=“http://www.vegoo.net”>鼠标激活的链接</a></p>
   </body>
   </html>

  您如果想看上述代码的效果,请复制以上代码后保存为htm格式查看。

  我们从例子中看到没有访问过的链接以绿色显示,并且去掉了下划线;而访问过的链接以红色且没有下划线显示;另外,当鼠标激活链接时,链接以蓝色显示,并且加上了上划线。这种效果是怎么实现的呢?它除了运用了文本属性中的text-decoration属性,而且采用了伪类元素。
  通过上面的代码注释,相信您应该对伪类元素有一个大概认识。实际上我们用到的这种伪类应当称之为“锚伪类”,它规定了链接不同状态下的效果。

  怎么样,是不是很简单的就可以实现动态链接的效果,赶紧自己动手试一试吧!下一节我将向您介绍“容器”属性。

  • (分类:网络文章   关键词:健身知识,购物指南,建网站,域名注册,空间租用,企业邮箱,数据库租用,MSSQL数据库,MYSQL数据库,网站推广,网站运营)
  • 您已阅读:CSS属性-文本属性-装饰超链接 您还可以继续阅读↓  或 回到首页看看>>>
  • 上一篇CSS属性-文本属性

    3、文本属性   ※定义间距   前面说了如何用CSS定义字体、颜色和背景属性,那么定义好的文本我们怎么对它进行排版呢?   下面我们讲述一下CSS的文本属性,还是先来看一下文本属性的详细列表:   我们可以从表中看到在这里可以定义文本的文字间距、字母间距、装饰、对..

  • 下一篇CSS属性-“容器”属性

    4、“容器”属性   ※边距属性   听起来是不是很有趣,什么叫“容器”属性呢?CSS的容器属性包括边距、填充距、边框和宽度、高度、浮动、清除等属性。  您想,网页中的内容肯定是都需要“装”进这个“容器”里。“容器”属性是CSS中非常重要的一种属性,我们将分类进行学习。  ..