如何用CSS样式工具创建不同样式的链接效果

1、定义链接的颜色。在这样的一个案例当中，我们要先分别给这些链接进行一个颜色上的指定。

a.one:link {color:#ff0000;}

a.one:visited {color:#0000ff;}

a.one:hover {color:#ffcc00;}

2、定义链接的大小。在这样的一个语句当中，我们对于链接的文字大小作出一定的改变。

a.two:link {color:#09470C;}

a.two:visited {color:#0000ff;}

a.two:hover {font-size:150%;}

3、定义链接的背景色。在这样的一个语句当中，我们对于链接的一个背景色作出一定的改变。

a.three:link {color:#ff0000;}

a.three:visited {color:#0000ff;}

a.three:hover {background:#09470C;}

4、定义链接的字体。在这样的一个语句当中我们把链接的字体大小作出一定的改变。

a.four:link {color:#ff0000;}

a.four:visited {color:#0000ff;}

a.four:hover {font-family:monospace;}

5、定义链接的风格。我们通过这样的一个CSS语句为鼠标移动上方的链接加上一个下划线。

a.five:link {color:#ff0000;text-decoration:none;}

a.five:visited {color:#0000ff;text-decoration:none;}

a.five:hover {text-decoration:underline;}

6、效果实现。分别在内容中实现这样的一个过程。

<b><a class="one" href="/css/" target="_blank">变颜色</a></b>

<b><a class="two" href="/css/" target="_blank">变字体大小</a></b>

<b><a class="three" href="/css/" target="_blank">变背景颜色</a></b>

<b><a class="four" href="/css/" target="_blank">变字体类型</a></b>

<b><a class="five" href="/css/" target="_blank">变文字修饰</a></b>