zoukankan      html  css  js  c++  java
  • 【CSS】使用CSS改变超链接样式

    • 超链接代码
    1 <ahrefahref="http://www.divCSS5.com/"target="_blank"  
    2 title="关于divCSS的网站">DIV+CSS</a> 
    • 解析如下:

      href后跟被链接地址目标网站地址这里是http://www.divCSS5.com/
      target
        _blank--在新窗口中打开链接
        _parent--在父窗体中打开链接
        _self--在当前窗体打开链接,此为默认值
        _top--在当前窗体打开链接,并替换当前的整个窗体(框架页)

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

    • CSS可控制超链接样式-CSS链接样式如下

        a:active是超级链接的初始状态
        a:hover是把鼠标放上去时的状况
        a:link是鼠标点击时
        a:visited是访问过后的情况

    • 超链接样式案例

    1、通常对全站超链接样式化方法 

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

    2、通过链接内设置类控制超链接样式CSS方法

    案例超链接代码

    1 <ahrefahref="http://www.divCSS5.com/"class="yangshi"> 
    2 CSS  
    3 </a>

    对应CSS代码 

    1 a.yangshi{color:#333;text-decoration:none;}  
    2 a.yangshi:hover{color:#CC3300;text-decoration:underline;}  

    通过这样的设置可以控制链接内的CSS类名为“yangshi”超链接的样式

    3、通过对应超链接外的父级的CSS类的CSS样式来控制超链接的样式

    案例超链接代码

    1 <divclassdivclass="yangshi"> 
    2 <ahrefahref="http://www.divCSS5.com/"> 
    3 CSS</a> 
    4 </a> 

    对应CSS代码 

    1 .yangshia{color:#333;text-decoration:none;}  
    2 .yangshia:hover{color:#CC3300;text-decoration:underline;}  

    这里值得注意的是a.yangshi与.yangshia的样式CSS代码区别,这里就是常见的通过divCSS来对超链接样式设置案例及分析。

  • 相关阅读:
    让我偷偷的告诉你:运维加薪的杀手锏是啥?
    网站页面优化必然趋势—WebP 图片!
    如何监控 Tomcat?Zabbix 与 Cloud Insight 对比
    网页增重不可控?试试 OneAPM Cloud Test
    提高 ASP.NET Web 应用性能的 24 种方法和技巧
    OneAlert 入门(三)——事件分析
    Cloud Insight 客户案例-晨芯时代科技有限公司
    Java开发快速上手
    微信小程序快速开发上手
    微信小程序快速开发上手
  • 原文地址:https://www.cnblogs.com/zhengbin/p/4622245.html
Copyright © 2011-2022 走看看