スタイルシート(CSS)の技

Aタグに直接スタイルを設定する方法です。

CSS

a:link.test1 { background-color:blue;color:white; }
a:visited.test1 { background-color:blue; color:white; } 
a:hover.test1 { background-color:green;color:white; } 

a.test2 { background-color:red; color:white; } 
a:hover.test2  { background-color:pink; color:white; } 

HTML

<a href="./blank.html" class="test1">あいえお</a>
<a href="./blank.html" class="test2">かきくけこ</a>

実行例

ブロックなどに Aタグのスタイルを設定する方法。 例では、.test3 .test4 それぞれのブロックにAタグのスタイルを設定しています。

CSS

.test3 a { background-color:blue; color:white; } 
.test3 a:hover { background-color:skyblue; color:white; } 

.test4 a:link { background-color:red; color:white; padding:5px; } 
.test4 a:hover { background-color:pink; color:white; padding:5px; }

HTML

<div class="test3">
<a href="./blank.html">あいえお</a>
</div>
<div class="test4">
<a href="./blank.html">かきくけこ</a>
</div>

実行例