`

html中css样式的a标签

    博客分类:
  • html
阅读更多
CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”。其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是:

    :link
    :visited
    :hover
    :active

  因为我们要定义链接样式,所以其中必不可少的就是超级链接中的锚标签--a,锚标签和伪类链接起来书写的方法就是定义链接样式的基础方法,它们的写法如下:

    a:link,定义正常链接的样式;
    a:visited,定义已访问过链接的样式;
    a:hover,定义鼠标悬浮在链接上时的样式;
    a:active,定义鼠标点击链接时的样式。


  示例:


  a:link {
    color:#FF0000;
    text-decoration:underline;
    }
    a:visited {
    color:#00FF00;
    text-decoration:none;
    }
    a:hover {
    color:#000000;
    text-decoration:none;
    }
    a:active {
    color:#FFFFFF;
    text-decoration:none;
    }


  上面示例中定义的链接颜色是红色,访问过后的链接是绿色,鼠标悬浮在链接上时是黑色,点击时的颜色是白色。

    如果正常链接和已访问过的链接样式相同,鼠标悬浮和点击时的样式相同,也可以将它们合并起来定义:


  a:link,
    a:visited     {
    color:#FF0000;
    text-decoration:underline;
    }   
    a:hover,
    a:active    {
    color:#000000;
    text-decoration:none;
    }


链接定义的顺序
  没有规矩不成方圆,虽然链接定义写好了,但它也是有规则的,如果这四项的书写顺序稍有差错,链接的效果可能就没有了,所以每次定义链接样式时务必确认定义的顺序,link--visited--hover-active,也就是我们常说到的LoVe HAte原则(大写字母就是它们的首字母)。

定义局部链接样式
  在CSS中写上a:link{}这样的定义会使整个页面的链接样式改变,但有些局部链接需要特殊化,这个问题也不难解决,只要在链接样式定义的前面加上指定的id或class就可以了。

  示例:

  #sidebar a:link,
    #sidebar a:visiteid  {
    color:#FF0000;
    text-decoration:none;
    }
    #sidebar a:hover,
    #sidebar a:active  {
    color:#000000;
    text-decoration:underline;
    }



本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/tian_fang/archive/2009/11/12/4802552.aspx
分享到:
评论

相关推荐

    清除修改删除Vue自带的CSS样式

    清除删除修改Vue自带的CSS样式,在Vue项目中写样式时发现总是出现一些奇怪的样式和字体颜色,后来发现是Vue自带了默认的CSS样式导致的,只要修改Vue自带的CSS样式即可。文件中附有修改样式的css文件以及详细教程。

    HTML标签的默认CSS样式汇总

    HTML标签的默认CSS样式汇总 这样你在编写的时候就可以省掉许多不必要的代码 简化你的css样式

    html标签样式重置reset.css文件

    html标签样式重置reset.css文件,取消标签原来特殊样式方便自定义,例如a标签下划线,span标签前面的小圆点,清除浮动解决塌陷的兼容样式

    HTML标签默认样式重置文件reset.css

    每一个HTML标签都有它的默认样式,例如标签有上下边距,body自带外边距等等。这些默认样式在不同的浏览器中可能会不一样,这就导致浏览器默认样式会给我们带来很大的麻烦,从而影响开发效率,所以最好的解决方案就是...

    邮件内css样式的引用规则

    【错误引用】将css样式写在引用于body内<style type=”text/css”> body,td,th { font-family: Arial; font-size: 12px;} </style> 【错误引用】引用外部的css样式 <link rel=”stylesheet” type=”...

    css样式HTML空间JS脚本

    用JS脚本配合CSS样式 许多HTML标签的使用特效

    HTML5&CSS3网页制作:CSS样式规则.pptx

    在HTML编写过程中我们除了应用基本的标签元素还会使用css样式来丰富界面使之有不同的呈现效果。 未设置css样式 设置css样式 单击此处添加副标题内容 CSS样式规则 01 CSS样式规则 CSS 代码规范还是有存在的必要的,...

    reset.css 重置浏览器标签的样式表

    在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别,例如ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现...

    css样式表----html/php学习

    css样式表 php/html学习资料 tag标签完整内容 https/http区别与协议

    css样式重置文件reset.css

    css样式重置文件,去除默认样式。html标签存在一些默认样式,这些样式会影响我们设计网页。css样式重置文件,去除默认样式。html标签存在一些默认样式,这些样式会影响我们设计网页。css样式重置文件,去除默认样式...

    网页常用html标签与css样式.pdf

    网页常用html标签与css样式.pdf

    CSS样式源码

    HTML5学习的小伙伴走过路过千万不要错过,这个源码是CSS样式,用LINK标签加载之后就可以用了,由于大多数小伙伴在使用时并不需要看样式。所以我上传的是企业开发版(后缀是.min),如果有需要开发者模式的小伙伴可以...

    CSS表格边框50多种精美标签样式(边框也精彩)

    CSS表格边框50多种精美标签样式(边框也精彩) 直接复制就可以用,几乎都是标签样式

    html标签大全、css样式大全、DHTML参考大全(chm格式)

    网页制作大全(chm格式)包括: html标签大全、css样式大全、DHTML参考大全、及各种事件等等,说明详细得不能再详细了 如果您却得好就给我好评,反之

    纯css半圆角tab标签切换代码

    纯CSS实现的tab标签切换代码,其实是由六个html文件组成,相互切换的效果。懒人之家推荐下载

    html和css部分标签属性用法

    自己整理的部分HTML的元素属性用法和一些css样式

    HTML (css样式规范)必看篇

    CSS样式规范 1.类选择器 ...写的位置:在css样式的标记中调用方法在HTML标签内部写上 class=类名 4.命名规范 建议是纯字母或字母后面加数字,请勿数字开头,其它虽然可以使用请问使用 5.为什么要把

    基础css样式,设置了大量特殊的html标签的初始化样式,用起来很舒服

    基础css样式,设置了大量特殊的html标签的初始化样式,用起来很舒服

    微信小程序中css样式media标签

    在css中我们使用media标签来区分调用哪个css样式,比如使用media=”print”来表示当执行打印文档时,使用print.css样式。这样使得文档更有得于打印,如将页面宽度增宽、或屏蔽掉一些不需要打印的内容。   <link ...

Global site tag (gtag.js) - Google Analytics