利用CSS设置文字超链接效果

1、打开页面属性对话框,点击“链接(CSS)”分类,可以设置关于超链接的各项参数,将链接颜色、已访问链接和活动链接都设为黑色(#000),将变换图像链接设为不同的颜色(#F99),将下划线样式设为“仅在变换图像时显示下划线”,如下图所示:

2、设置完成后,我们会在CSS样式面板中看到多了四条规则,分别是:a:linka:visiteda:activea:hover,如下图所示:

3、上面的CSS规则已经可以做到当我们把鼠标放到超链接文字上时文字会变色,并且出现下划线。我们还需要增加一个效果,就是文字变粗,方法是:在CSS样式面板中点击a:hover规则,然后点击面板下方的修改规则按钮,在弹出的规则定义对话框中,将Font-weight设为bold(即粗体),如下面两幅图所示:


4、设置好后,我们输入文字并选择文字,然后在属性面板中的HTML设置中输入超链接,如下图所示:

5、保存页面后通过在浏览器中查看就可以预览效果了,点击查看效果

6、本例所定义的CSS样式规则如下:

<style type="text/css">
a:link {
  color: #000;
  text-decoration: none;
}
a:visited {
  color: #000;
  text-decoration: none;
}
a:active {
  color: #000;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  font-weight: bold;
  color: #F99;
}
</style>