如何用CSS工具为链接设置样式

2025-10-20 14:03:01

1、链接样式。对于链接来说,我们可以为这些链接设置不同的样式。

普通的链接样式:

a:link {color:#FF0000;}

访问过的链接样式:

a:visited {color:#00FF00;}

如何用CSS工具为链接设置样式

2、链接样式互动。在实际的使用当中,我们可以让链接与鼠标互动起来。

a:hover {color:#FF00FF;}

当鼠标移动到链接上面的时候,这个链接样式就有了改变。

a:active {color:#0000FF;}

这是链接被点击了之后的新样式。

如何用CSS工具为链接设置样式

3、更多链接样式。我们对于链接在点击前后的样式的改变,不仅仅局限于颜色,它也可以在文本上作一些变化,比如下划线。

a:visited {text-decoration:none;} 

a:hover {text-decoration:underline;}

如何用CSS工具为链接设置样式

4、链接在点击后它的背景色发生变化。

a:visited {background-color:#FFFF85;} 

a:hover {background-color:#FF704D;}

如何用CSS工具为链接设置样式

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;

}

如何用CSS工具为链接设置样式

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>

如何用CSS工具为链接设置样式

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢