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

修改a标签的默认样式

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

<a href="#">超链接</a>

点击链接之前的样式：

点击链接之后的样式：

此时有第一个需求：

添加css样式，达到如下目的：

设置字体颜色为黑色

去掉点击链接以后的下划线

设置字体大小为xx-large

此时需求代码实现如下：

<a href="#" id="test">超链接</a>

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

点击前的 样式：

点击后的样式：

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

此时再添加第二个需求：

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

实现代码如下：

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

又来第三个需求了：

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

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

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

具体实现：

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

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

具体实现如下：

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

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