a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a

      <noframes id="LVXRHZN"><address id="LVXRHZN"><nobr id="LVXRHZN"></nobr></address>

      <noframes id="LVXRHZN"><noframes id="LVXRHZN"><address id="LVXRHZN"><listing id="LVXRHZN"></listing></address>
      <sub id="LVXRHZN"></sub>

        <sub id="LVXRHZN"></sub>
        <address id="LVXRHZN"><listing id="LVXRHZN"><menuitem id="LVXRHZN"></menuitem></listing></address>

        <sub id="LVXRHZN"></sub>

        <address id="LVXRHZN"></address>

        <address id="LVXRHZN"></address>
        <noframes id="LVXRHZN">

          <noframes id="LVXRHZN">
          <sub id="LVXRHZN"></sub>
              <address id="LVXRHZN"><listing id="LVXRHZN"><menuitem id="LVXRHZN"></menuitem></listing></address>
            1. 820466150 2017-11-04
            2. 388113149 2017-11-04
            3. 740898148 2017-11-04
            4. 892683147 2017-11-04
            5. 540252146 2017-11-04
            6. 888745145 2017-11-04
            7. 981419144 2017-11-04
            8. 544637143 2017-11-04
            9. 454205142 2017-11-04
            10. 212476141 2017-11-04
            11. 39821140 2017-11-04
            12. 170835139 2017-11-03
            13. 37766138 2017-11-03
            14. 538854137 2017-11-03
            15. 926181136 2017-11-03
            16. 18188135 2017-11-03
            17. 420335134 2017-11-03
            18. 553276133 2017-11-03
            19. 4149132 2017-11-02
            20. 883561131 2017-11-02
            21. 891189130 2017-11-02
            22. 649552129 2017-11-02
            23. 950957128 2017-11-02
            24. 295914127 2017-11-02
            25. 781243126 2017-11-02
            26. 682892125 2017-11-02
            27. 829649124 2017-11-02
            28. 168426123 2017-11-01
            29. 406171122 2017-11-01
            30. 724134121 2017-11-01
            31. “砥砺奋进的五年”大型成就展
            32. “总书记的回信说到了我们心坎上”
            33. 德媒:拒绝“洋垃圾”——肮脏的游戏,中国不玩了
            34. 求实创造 为人师表
            35. 家长群里质疑老师收礼排座位 被班主任踢出家长群
            36. 两手抓两促进 打造坚强战斗堡垒
            37. 新论:党章,每个党员都需时刻铭记
            38. 谁击落了MH17?各方互相指责
            39. 互联网用户公众账号信息服务管理规定
            40. 台籍律师在大陆 就业+创业不是“梦”
            41. 法国总统说政治对话是保证叙利亚实现可持续和平的唯一办法
            42. 天胶“保险+期货”精准扶贫首批给付500万 惠及云南临沧400余建档贫困户
            43. [征集]资深网友看这里 新时代老人们希望何种"夕阳红"
            44. 近千家A股公司三季报业绩预喜
            45. 台媒吹台特种兵“斩首”能力一流:堪比海豹三角洲
            46. 欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
              您的位置:DIVCSS5学习网 > DIV+CSS实例 >

              CSS A link hover active visited伪类超链接锚文本样式教程

              DIVCSS5学习网控制超链接样式-css超链接

              本文将讲解通过css样式或通过css来控制超链接样式。这里主要讲文字类型的超链接,超链接的样式包括通过CSS来控制设置超链接有无下划线、超链接文字颜色等样式。

              什么是超链接?
              超链接通俗地指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。而在一个网页中用来超链接的对象,可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上,并且根据目标的类型来打开或运行。

              超链接的代码
              <a href="http://www.tommstudio.com/" target="_blank" title="关于DIVCSS5学习网的网站">DIVCSS5学习网</a>
              解析如下:
              href 后跟被链接地址目标网站地址这里是DIVCSS5学习网
              target
              _blank -- 在新窗口中打开链接
              _parent -- 在父窗体中打开链接
              _self -- 在当前窗体打开链接,此为默认值
              _top -- 在当前窗体打开链接,并替换当前的整个窗体(框架页)

              title 后跟链接目标说明,也就是超链接被链接网址情况简要说明,或标题

              CSS可控制超链接样式-css链接样式如下
              a:link是超级链接的初始状态
              a:hover是把鼠标放上去时悬停的状况
              a:active 是鼠标点击时
              a:visited是访问过后的情况

              一、简单超链接样式案例   -   TOP

              1、通常对全站超链接样式化方法
              a{color:#333;text-decoration:none; } //对全站有链接的文字颜色样式为color:#333;并立即无下划线text-decoration:none;
              a:hover {color:#CC3300;text-decoration:underline;}//对鼠标放到超链接上文字颜色样式变为color:#CC3300;并文字链接加下划线text-decoration:underline;

              2、通过链接内设置类控制超链接样式css方法
              案例超链接代码<a href="http://www.tommstudio.com/" class="yangshi">CSS</a>
              对应CSS代码
              a.yangshi{color:#333;text-decoration:none; }
              a.yangshi:hover {color:#CC3300;text-decoration:underline;}
              通过这样的设置可以控制链接内的css类名为“yangshi”超链接的样式

              3、通过对应超链接外的父级的css类的css样式来控制超链接的样式
              案例超链接代码<div class="yangshi"><a href="http://www.tommstudio.com/">CSS</a></a>
              对应CSS代码
              .yangshi a{color:#333;text-decoration:none; }
              .yangshi a:hover {color:#CC3300;text-decoration:underline;}

              这里值得注意的是a.yangshi与.yangshi a的样式css代码区别

              你可能希望了解html a,html超链接,html锚文本

              这里就是常见的通过div css来对超链接样式设置案例及分析。

              以下为详细CSS A超链接锚文本样式教程

              css a:link hover active visited伪类样式教程篇

              DIVCSS5这里讲解html a超链接标签,a:hover、a:link、a:active、a:visited伪类样式经验教程,通过CSS设置这几种a锚文本的CSS样式。无论控制超链接文本文字各种鼠标事件样式,可以控制超链接对象背景图片的变化。

              扩展阅读:
              1、html a标签语法结构
              2、css a锚文本样式

              二、基础认识   -   TOP

              介绍这4个常见伪类作用与解释
              1、a:link
              设置a对象在未被访问前(未点击过和鼠标未经过)的样式表属性。也就是html a锚文本标签的内容初始样式。

              2、a:hover
              设置对象在其鼠标悬停时的样式表属性,也就是鼠标刚刚经过a标签并停留在A链接上时样式。

              3、a:active
              设置A对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式表属性。也就是鼠标左键点击html A链接对象与释放鼠标右键之间很短暂的样式效果。

              4、a:visited
              设置a对象在其链接地址已被访问过时的样式表属性。也就是html a超链接文本被点击访问过后的CSS样式效果。

              三、应用用法案例   -   TOP

              我们设置一个超链接,对其设置CSS样式,通过CSS A设置其四种样式效果。通过一个简单的对文本设置css a样式情况了解学习CSS a锚文本样式。

              1、案例css代码

              1. <style> 
              2. .divcss5 a:link{ color:#F00}/* 链接默认为红色 */ 
              3. .divcss5 a:hover{ color:#000}/* 鼠标悬停黑色 */ 
              4. .divcss5 a:active{ color:#03F}/* 鼠标点击与释放时蓝色 */ 
              5. .divcss5 a:visited{ color:#F0F}/* 访问过为粉红 */ 
              6. /* divcss5对象内 a超链接设置样式 */ 
              7. </style> 

              2、案例html代码

              1. <div class="divcss5"> 
              2. DIVCSS5关于 
              3. <a href="http://www.tommstudio.com/shili/s57.shtml">CSS a样式</a>案例 
              4. </div> 

              这里为了排版截图,特地对有的地方进行换行

              3、案例软件中截图

              css设置a链接样式截图
              CSS A链接样式案例截图

              4、浏览器实际各种样式截图

              浏览器中各种css A样式截图
              浏览器中各种A样式截图

              小结:
              一般a:active样式效果是瞬间效果观察不了,所以使用时候可以不用设置。同时超链接默认情况下是自动加下划线的,如果要去掉或再增加下划线可以设置css text-decorationhttp://www.tommstudio.com/rumen/r129.shtml)。

              扩展阅读:
              1、css 下划线
              2、css text-decoration下划线
              3、html a标签
              4、a标签结构

              四、常用CSS A应用   -   TOP

              为了大家灵活掌握css a锚文本样式设置,我们整理三种使用情况的A超链接样式控制设置案例,分别为:带超链接文字本身css color颜色样式与访问后颜色样式相同,没有下划线,鼠标悬停时候文字颜色color变化,并添加下划线;未访问时候带超链接文本文字颜色是一种并且没有下划线,鼠标悬停经过时候是另外一种颜色有下划线,激活或访问(过)后文本颜色为另外一种并有下划线(三种情况三种颜色);还有一种情况,本身一个图片背景,鼠标经过悬停另外一种背景图片。通过这三种情况案例教程让大家通过对css a锚文本超链接样式控制掌握其知识。

              1、带超链接文字本身css color颜色样式与访问后颜色样式相同,没有下划线,鼠标悬停时候文字颜色color变化,并添加下划线

              1)、CSS样式代码:

              1. .divcss5 a{ color:#F00; text-decoration:none}/* 链接默认为红色 */ 
              2. .divcss5 a:hover{ color:#000; text-decoration:underline}/* 鼠标悬停黑色 */ 
              3. /* divcss5对象内 a超链接设置样式 */ 
              4. 这里可以不用a:link伪类,可以直接对象“CSS命名+空格+a{}”即可。 

              2)、案例html div代码片段:

              1. <div class="divcss5"> 
              2. DIVCSS5关于 
              3. <a href="http://www.tommstudio.com/shili/s57.shtml">CSS a样式</a>案例 
              4. </div> 

              3)、截图

              对文字加超链接设置其css样式截图
              css a样式说明图

              浏览器测试结果需要大家动手测试观察,这样利用学习与掌握,DIVCSS5在这里就不给出浏览器测试结果截图了。

              2、未访问时候带超链接文本文字颜色是一种并且没有下划线,鼠标悬停经过时候是另外一种颜色有下划线,激活或访问(过)后文本颜色为另外一种并有下划线(三种情况三种颜色)

              此实例与我们教程第二大点“二、应用用法案例”相同,大家可以查看根据实例进行实践,此案例提到了css下划线样式设置,大家可灵活试着CSS添加下划线text-decoration:underline)或CSS去掉下划线text-decoration:none)应用。

              3、本身一个图片背景,鼠标经过悬停另外一种背景图片
              此种情况常常用于网站导航条,本身一种CSS背景样式,鼠标经过背景图片又变另外图片。

              扩展阅读:
              1)、html img图片
              2)、css 背景
              3)、css background
              4)、css 背景颜色
              5)、css 背景图片

              css a链接背景图片变化案例效果图
              A超链接设置背景图片变化效果图

              这个案例我们需要准备2张图片一张是鼠标未经过时候图片,另外一张鼠标经过时候图片。

              DIVCSS5提供给大家

              案例素材图片截图
              A链接案例需要准备素材图片截图

              一张命名为a.gif,另外一张命名hover.gif
              (这里显示扩展名“.gif”)

              图片打包下载:http://www.tommstudio.com/share/link?shareid=313316&uk=268571848

              具体实践步骤如下:
              1)、新建一个文件夹桌面,命名为"divcss5"

              新建文件夹DIVCSS5
              新建文件夹截图

              2)、打开新建的“divcss5”文件夹,再里新建一个命名为“images”装图片文件夹

              新建装图片素材images文件夹
              新建装图片images文件夹截图

              3)、将下载2张图片素材放入“images”文件夹内

              拷入图片素材到images文件夹
              图片素材放入images文件夹里

              4)、DW新建一个html文件并且命名为index.html,保存于“divcss5”文件夹下

              新建html文件
              新建html文件夹

              5)、CSS代码片段

              1. li,ul{ border:0; padding:0; margin:0; list-style:none} 
              2. /* CSS初始化标签 */ 
              3. ul.divcss5-img{ margin-top:10px} 
              4. ul.divcss5-img li{text-align:center; float:left;width:121px; 
              5. height:71px; line-height:70px;font-size:14px; font-weight:bold} 
              6. /* 这里为了便于截图所以对li列表样式代码进行CSS换行,实际中可以CSS不换行 */ 
              7.  
              8. ul.divcss5-img li a{ display:block; width:100%; height:100%; font-size:14px; 
              9. color:#FFF; text-decoration:none; background:url(images/a.gif) no-repeat 0 0} 
              10.  
              11. /* 默认链接设置颜色为白色,背景图片,字体加粗,字体大小为14px */ 
              12. ul.divcss5-img li a:hover{background:url(images/hover.gif) no-repeat 0 0} 
              13. /* 因为宽度字体大小字体加粗继承a样式,所以我们只设置变化图片即可 */ 

              6)、HTML代码片段

              1. <ul class="divcss5-img"> 
              2. <li><a href="#">公司介绍</a></li> 
              3. <li><a href="#">服务项目</a></li> 
              4. <li><a href="#">成功案例</a></li> 
              5. </ul> 

              7)、截图

              a链接背景图片改变
              CSS A链接的图片背景改变案例截图 Html a超链接样式图片背景变化案例截图

              浏览器测试结果需要大家动手测试观察,这样利用学习与掌握,DIVCSS5在这里就不给出浏览器测试结果截图了。

              8)、在线样式:
              http://www.tommstudio.com/yanshi/2013022302/

              9)、完整CSS A超链接锚文本案例打包下载:

              百度网盘下载 (DIVCSS5整理到百度网盘,大家直接进入点击即可高速放心下载)

              如需转载,请注明文章出处和来源网址:http://www.tommstudio.com/shili/s57.shtml

              我要分享到:

              必备CSS教程 Essential CSS Tutorials

              必备HTML基础教程 Essential HTML Tutorials

              如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
              DIVCSS5学习网文章修订日期:2013-02-23 12:12 原创:DIVCSS5学习网
              本文www.tommstudio.com DIVCSS5版权所有。