多语言展示
当前在线:970今日阅读:103今日分享:49

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

链接如果看作一个文本,它在网页有着多种不同的样式,如果看作一个互动的模块,那么在访客的不同点击状态下也是不同的样式,这一章我们就来研究一下网页中的链接样式。
工具/原料

dreamweaver

方法/步骤
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 流程。W3School

推荐信息