• 月薪过万白领辞职回乡养鸡 亏数十万后回城找工作 2020-01-20
  • 拉美国家新闻官员与记者宁夏考察采访活动结束 2020-01-06
  • 荆楚网互联网出版机构 2020-01-06
  • 北京限价房项目开闸 百亿货值将入市 ——凤凰网房产北京 2019-12-08
  • 秘鲁侨界研讨两岸关系和平发展 2019-12-02
  • 西安紫云溪小区深夜有人竟高空扔粪便 律师:违法行为 2019-11-29
  • 罗品禧的专栏作者中国国家地理网 2019-11-29
  • 市委把全国两会精神原汁原味传达到基层 2019-11-28
  • 西南铁路端午假期发送400余万人次 两人不文明乘车或受失信惩戒 2019-11-20
  • 四件汉白玉螭头回归圆明园 2019-11-20
  • 人的本质的演变规律:从原始母系氏族社会的公有者经过父系氏族社会私有和公有双重所有者而演变为私有制阶级社会的私有者,然后经过现代社会公有和私有双重所有者... 2019-11-06
  • 这样的帖子写主贴反驳,实在丢不起人! 2019-11-06
  • “道德瘾君子”侮辱了杨女士的善良 2019-10-30
  • 候选案例:“天使之心”儿童先心病救助项目 2019-10-23
  • 卢靖姗穿蓝色吊带笑容甜美 和粉丝合影花式比心 2019-10-12
  • 欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

    香港买马资料大全控制超链接样式-css超链接

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

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

    超链接的代码
    <a href="//www.ziixf.tw/" 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.ziixf.tw/" 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.ziixf.tw/">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.ziixf.tw/shili/s57.shtml">CSS a样式</a>案例 
    4. </div> 

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

    3、案例软件中截图

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

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

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

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

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

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

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

  • 月薪过万白领辞职回乡养鸡 亏数十万后回城找工作 2020-01-20
  • 拉美国家新闻官员与记者宁夏考察采访活动结束 2020-01-06
  • 荆楚网互联网出版机构 2020-01-06
  • 北京限价房项目开闸 百亿货值将入市 ——凤凰网房产北京 2019-12-08
  • 秘鲁侨界研讨两岸关系和平发展 2019-12-02
  • 西安紫云溪小区深夜有人竟高空扔粪便 律师:违法行为 2019-11-29
  • 罗品禧的专栏作者中国国家地理网 2019-11-29
  • 市委把全国两会精神原汁原味传达到基层 2019-11-28
  • 西南铁路端午假期发送400余万人次 两人不文明乘车或受失信惩戒 2019-11-20
  • 四件汉白玉螭头回归圆明园 2019-11-20
  • 人的本质的演变规律:从原始母系氏族社会的公有者经过父系氏族社会私有和公有双重所有者而演变为私有制阶级社会的私有者,然后经过现代社会公有和私有双重所有者... 2019-11-06
  • 这样的帖子写主贴反驳,实在丢不起人! 2019-11-06
  • “道德瘾君子”侮辱了杨女士的善良 2019-10-30
  • 候选案例:“天使之心”儿童先心病救助项目 2019-10-23
  • 卢靖姗穿蓝色吊带笑容甜美 和粉丝合影花式比心 2019-10-12
  • 菠萝彩票苹果 新浪围棋客户端官方下载 晓风彩票软件招聘 辽宁11选5 英雄杀孙武 陕西快乐十分直播 四川时时彩推荐 吉林11选5走势图 体彩大乐透中奖规则 福州娱乐场所