• 【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来对超链接样式设置案例及分析。

  • 相关阅读:
    Service Workers里的CacheStorage和Cache
    application cache和localstorage的区别
    localStorage和sessionStorage区别
    Ubuntu软件的安装和使用
    C++之数据类型
    C++之C++的词法单位
    C++之语言概述
    Ubuntu双系统无法挂载Windows10 硬盘的解决方法
    opencv 显示摄像头数据
    Ubuntu 中使用git 上传代码
  • 原文地址:https://www.cnblogs.com/zhengbin/p/4622245.html
Copyright © 2020-2023  润新知