应用CSS去掉网页页面中超连接的下划线示例

2021-03-10 01:31 jianzhan
大家能够用CSS英语的语法来操纵超连接的方式、色调转变,为何连接1定要应用下划线和色调区别呢? 其关键缘故关键是考虑到到 1、眼睛视力差的人 2、色盲的人 。。。
下面大家做1个这样的连接:未被点一下时超连接文本无下划线,显示信息为蓝色;当电脑鼠标在连接上时有下划线,连接文本显示信息为鲜红色;当点一下连接后,连接无下划线,显示信息为翠绿色。
完成方式很简易,在源码的<head>和<head>之间再加以下的CSS英语的语法操纵:

拷贝编码
编码以下:

<style type="text/css">
   <!--
   a:link { text-decoration: none;color: blue}
   a:active { text-decoration:blink}
   a:hover { text-decoration:underline;color: red}
   a:visited { text-decoration: none;color: green}
   -->
   </style>

在其中:
  a:link 纠正常的未被浏览过的连接;
  a:active 纠正在点的连接;
  a:hover 指电脑鼠标在连接上;
  a:visited 指早已浏览过的连接;
  text-decoration是文本装饰实际效果的意思;
  none主要参数表明超连接文本无法显示下划线;
  underline主要参数表明超连接的文本有下划线
-------------------------------------------------------------------------
演试:让网页页面中的连接去掉下划线

拷贝编码
编码以下:

<style type="text/css">
<!--
A { text-decoration: none}
-->
</style>

将编码插进在<head></head>之间.<title>以前便可
-------------------------------------------------------------------------
应用CSS完成连接的虚线下推广划线\一般下划线实际效果

拷贝编码
编码以下:

a {
color:#3399FF;
font-weight:Normal; /*CSS字体样式实际效果 一般 能够改为bold粗体 假如除去此行那末默认设置是无法显示下划线的*/
text-decoration:none; /*CSS下划线实际效果:无下划线*/
}
a:hover {
color:#4499EE;
text-decoration:none; /*CSS下划线实际效果:无下划线*/
border-bottom: 1px #0099CC dotted /*CSS加1个仅有下边的框 边框为虚线*/
}

a{ } :是用来操纵联接的实际效果
a:hover{ }:是用来操纵电脑鼠标移上去的实际效果。