[分享]css不同超链接的样式

今天我们来学习一下关于CSS不同超链接的样式，当我们在HTML中创建一个超链接时，它们默认都有一个样式。但是，我们可以使用CSS来改变它们的外观，让它们看起来更个性化。 第一种超链接样式可以用以下代码...

今天我们来学习一下关于CSS不同超链接的样式，当我们在HTML中创建一个超链接时，它们默认都有一个样式。但是，我们可以使用CSS来改变它们的外观，让它们看起来更个性化。
第一种超链接样式可以用以下代码来编写：

p a {
   text-decoration:none;
   color:#000000;
}
p a:hover {
   text-decoration:underline;
   color:#FF0000;
} 

这段代码可以将所有链接的颜色改为黑色，当鼠标指向链接时，文字颜色会变成红色并加上下划线，这是一种很简单的样式，但是非常有用。
第二种超链接样式则是为了凸显重点，可以用以下代码来实现：

p a {
   text-decoration:none;
}
p a:hover {
   color:#FF0000;
   text-shadow:1px 1px 1px #000000;
} 

这个代码块能够将鼠标悬停在链接上的时候，文字颜色变成红色，并且加上了文本阴影。
第三种样式可以用以下代码来实现：

a:link {
   text-decoration:none;
}
a:visited {
   text-decoration:none;
}
a:hover {
   text-decoration:none;
}
a:active {
   text-decoration:none;
} 

这段代码能够改变链接的颜色，同时它们的文本装饰都被移除了。这种样式也可以让链接看起来更加简洁明了。
最后，我们介绍一种实现鼠标悬停链接时缩放的样式：

a:hover {
   transition:all .2s linear;
   transform:scale(1.2);
   color:#FF0000;
} 

这样，鼠标悬停时链接会放大1.2倍，并改变文字颜色变成红色。
以上就是几种不同超链接的样式，希望对您有所帮助。