如何用CSS工具为链接设置样式
1、链接样式。对于链接来说,我们可以为这些链接设置不同的样式。
普通的链接样式:
a:link {color:#FF0000;}
访问过的链接样式:
a:visited {color:#00FF00;}
2、链接样式互动。在实际的使用当中,我们可以让链接与鼠标互动起来。
a:hover {color:#FF00FF;}
当鼠标移动到链接上面的时候,这个链接样式就有了改变。
a:active {color:#0000FF;}
这是链接被点击了之后的新样式。
3、更多链接样式。我们对于链接在点击前后的样式的改变,不仅仅局限于颜色,它也可以在文本上作一些变化,比如下划线。
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
4、链接在点击后它的背景色发生变化。
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
5、创建复杂链接框。我们的网页上的链接有时是以一个漂亮 的链接框的形式出现。我们可以详细的定义一下。字体、形状、外框、边距、对齐
a:link,a:visited
{
display:block;
font-weight:bold;
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
6、一个详细的创建链接框的style 流程。
<style>
a:link,a:visited
{
display:block;
font-weight:bold;
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<a href="/index.html" target="_blank">W3School</a>
</body>