CSS 僞類的效果

<html>
<head>
<style type="text/css">
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}


a.two:link {color: #ff0000}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}


a.three:link {color: #ff0000}
a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}


a.four:link {color: #ff0000}
a.four:visited {color: #0000ff}
a.four:hover {font-family: monospace}


a.five:link {color: #ff0000; text-decoration: none}
a.five:visited {color: #0000ff; text-decoration: none}
a.five:hover {text-decoration: underline}
</style>
</head>


<body>
<p>請把鼠標移動到這些鏈接上,以查看效果:</p>


<p><b><a class="one" href="/index.html" target="_blank">這個鏈接改變顏色</a></b></p>
<p><b><a class="two" href="/index.html" target="_blank">這個鏈接改變字體大小</a></b></p>
<p><b><a class="three" href="/index.html" target="_blank">這個鏈接改變背景顏色</a></b></p>
<p><b><a class="four" href="/index.html" target="_blank">這個鏈接改變字體系列</a></b></p>
<p><b><a class="five" href="/index.html" target="_blank">這個鏈接改變文本裝飾</a></b></p>
</body>


</html>
發佈了27 篇原創文章 · 獲贊 8 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章