天天看点

html中修改超链接a标签的样式修改a标签的默认样式

修改a标签的默认样式

正常的超链接写法,未加任何自定义css样式:

<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >超链接</a>
           

点击链接之前的样式: 

html中修改超链接a标签的样式修改a标签的默认样式

点击链接之后的样式:

html中修改超链接a标签的样式修改a标签的默认样式

此时有第一个需求:

添加css样式,达到如下目的:

  • 设置字体颜色为黑色
  • 去掉点击链接以后的下划线
  • 设置字体大小为xx-large

此时需求代码实现如下:

<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  id="test">超链接</a>


<style>
	#test{
		color: black;
		text-decoration: none;
		font-size: xx-large;
	}
</style>
           

点击前的 样式:

html中修改超链接a标签的样式修改a标签的默认样式

点击后的样式:

html中修改超链接a标签的样式修改a标签的默认样式

很明显的观察到,需求i实现了。

此时再添加第二个需求:

  • 让链接到的页面在新打开的页面显示

实现代码如下:

<a href="https://www.baidu.com" target="_blank" rel="external nofollow"  id="test" target="_blank">超链接</a>
           

又来第三个需求了:

  • 点击超链接,此时链接没有发生跳转;换句话说,让超链接失去效果 

此时有两种解决方案,但两者之间有一定的差别:

第一种 :当我点击的时候,不会产生任何作用,我们称之为”死链接“

具体实现:

<a href="javascript:void(0)" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="mainframe" class="dropdown-toggle">
<span class="menu-text"> 商品中心 </span> 
</a>
           

 第二种:当我点击超链接的时候,也不会产生任何作用,但如果有id属性,还是会链接到id属性指向的位置

具体实现如下:

<a href="javascript:void(0)" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="mainframe" class="dropdown-toggle"> 
<span class="menu-text"> 商品中心 </span>
<h2 id="top">查看商品信息</h2>
</a>
           

第一种方法是保证超链接完全失去效果,使用在胶囊菜单这样的样式中会契合需求;而对于第二种方法,当我们设置好一个带有id属性的标签时,超链接的链接功能依然会让页面发生跳转,此时的跳转目的地就是id属性的参数值。 

好了,以上就是目前用到最多的超链接的样式啦,以后会慢慢补充的......