• 河北定州:秸秆回收变废为宝 2019-05-14
  • 妹妹半个多世纪前嫁到安徽 八旬老人想再见她一面 2019-05-14
  • 在这里,读懂2017——人民日报十大评论文章 2019-05-14
  • 步飘恒的专栏作者中国国家地理网 2019-05-14
  • 【奋斗者说】银河麒麟孔金珠:核心技术只有靠自己干出来 2019-05-13
  • 建好欧美同学会 助力伟大中国梦 2019-05-13
  • 看把你高兴的屁颠屁颠的,光有赞有什么用?我给你个货真价实的 [大红包]。 2019-05-13
  • 不动产登记全国联网 名下多少套房一查就知道 2019-05-13
  • 晋城:八项重点打好水污染防治攻坚战 2019-05-12
  • 天津:社区志愿者织密村镇平安网 2019-05-12
  • 中央纪委紧盯“节点” 4年来通报曝光问题近4000起 2019-05-12
  • 遭受外来杨梅挑战 宁波宠果地产杨梅还能走多远 2019-05-11
  • 发达国家全这样,尊重个人的选择。[微笑][微笑] 2019-05-11
  • 第528期:你知道吗?二月份吃什么水果最适合 2019-05-11
  • 忻州召开“雪亮工程”建设现场会 2019-05-10
  • ?
    欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
    您的位置:时时彩走势图后一 > DIV+CSS实例 >

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

    时时彩走势图后一 www.cuhw.com.cn 用时时彩走势图后一控制超链接样式-css超链接

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

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

    超链接的代码
    <a href="//www.cuhw.com.cn/" target="_blank" title="关于时时彩走势图后一的网站">时时彩走势图后一</a>
    解析如下:
    href 后跟被链接地址目标网站地址这里是时时彩走势图后一
    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="//www.cuhw.com.cn/" 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="//www.cuhw.com.cn/">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="//www.cuhw.com.cn/shili/s57.shtml">CSS a样式</a>案例 
    4. </div> 

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

    3、案例软件中截图

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

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

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

    小结:
    一般a:active样式效果是瞬间效果观察不了,所以使用时候可以不用设置。同时超链接默认情况下是自动加下划线的,如果要去掉或再增加下划线可以设置css text-decoration//www.cuhw.com.cn/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="//www.cuhw.com.cn/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”)

    图片打包下载://pan.baidu.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)、在线样式:
    //www.cuhw.com.cn/yanshi/2013022302/

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

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

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

    我要分享到:

    必备CSS教程 Essential CSS Tutorials

    必备HTML基础教程 Essential HTML Tutorials

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

  • 河北定州:秸秆回收变废为宝 2019-05-14
  • 妹妹半个多世纪前嫁到安徽 八旬老人想再见她一面 2019-05-14
  • 在这里,读懂2017——人民日报十大评论文章 2019-05-14
  • 步飘恒的专栏作者中国国家地理网 2019-05-14
  • 【奋斗者说】银河麒麟孔金珠:核心技术只有靠自己干出来 2019-05-13
  • 建好欧美同学会 助力伟大中国梦 2019-05-13
  • 看把你高兴的屁颠屁颠的,光有赞有什么用?我给你个货真价实的 [大红包]。 2019-05-13
  • 不动产登记全国联网 名下多少套房一查就知道 2019-05-13
  • 晋城:八项重点打好水污染防治攻坚战 2019-05-12
  • 天津:社区志愿者织密村镇平安网 2019-05-12
  • 中央纪委紧盯“节点” 4年来通报曝光问题近4000起 2019-05-12
  • 遭受外来杨梅挑战 宁波宠果地产杨梅还能走多远 2019-05-11
  • 发达国家全这样,尊重个人的选择。[微笑][微笑] 2019-05-11
  • 第528期:你知道吗?二月份吃什么水果最适合 2019-05-11
  • 忻州召开“雪亮工程”建设现场会 2019-05-10