案例：CSS案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<style>
5
a.one:link {color:#ff0000;}
6
a.one:visited {color:#0000ff;}
7
a.one:hover {color:#ffcc00;}
8
​
9
a.two:link {color:#ff0000;}
10
a.two:visited {color:#0000ff;}
11
a.two:hover {font-size:150%;}
12
​
13
a.three:link {color:#ff0000;}
14
a.three:visited {color:#0000ff;}
15
a.three:hover {background:#66ff66;}
16
​
17
a.four:link {color:#ff0000;}
18
a.four:visited {color:#0000ff;}
19
a.four:hover {font-family:'微软雅黑';}
20
​
21
a.five:link {color:#ff0000;text-decoration:none;}
22
a.five:visited {color:#0000ff;text-decoration:none;}
23
a.five:hover {text-decoration:underline;}
24
</style>
25
</head>
26
​
27
<body>
28
<p>请把鼠标指针移动到下面的链接上，看看它们的样式变化。</p>
29
​
30
<p><b><a class="one" href="/index.html" target="_blank">这个链接改变颜色</a></b></p>
31
<p><b><a class="two" href="/index.html" target="_blank">这个链接改变字体尺寸</a></b></p>
32
<p><b><a class="three" href="/index.html" target="_blank">这个链接改变背景色</a></b></p>
33
<p><b><a class="four" href="/index.html" target="_blank">这个链接改变字体</a></b></p>
34
<p><b><a class="five" href="/index.html" target="_blank">这个链接改变文本的装饰</a></b></p>
35
</body>
36
​
37
</html>
38
​