Css-links
提供：Dev Guides
CSS-リンク
この章では、CSSを使用してハイパーリンクのさまざまなプロパティを設定する方法について説明します。 あなたはハイパーリンクの次のプロパティを設定することができます-
CSSの疑似クラスについて説明するときに、同じプロパティを再検討します。
- *：link *は、未訪問のハイパーリンクを示します。
- *：visited *は、訪れたハイパーリンクを意味します。
- *：hover *は、現在ユーザーのマウスポインターが上にある要素を示します。
- *：active *は、ユーザーが現在クリックしている要素を示します。
通常、これらのプロパティはすべて、HTMLドキュメントのヘッダー部分に保持されます。
効果的であるためには、CSS定義でa：linkとa：visitedの後にa：hoverを指定する必要があります。 また、a：activeは、次のようにCSS定義でa：hoverの後に来なければなりません-
<style type = "text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>次に、これらのプロパティを使用してハイパーリンクにさまざまな効果を与える方法を見ていきます。
リンクの色を設定する
次の例は、リンクの色を設定する方法を示しています。 有効な値は、有効な形式の色名です。
<html>
<head>
<style type = "text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>それは次の黒いリンクを生成します-
訪問済みリンクの色を設定する
次の例は、訪問済みリンクの色を設定する方法を示しています。 有効な値は、有効な形式の色名です。
<html>
<head>
<style type = "text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href = ""> link</a>
</body>
</html>次のリンクが生成されます。 このリンクをクリックすると、色が緑に変わります。
マウスが上にあるときにリンクの色を変更する
次の例は、リンクの上にマウスポインターを置いたときにリンクの色を変更する方法を示しています。 有効な値は、有効な形式の色名です。
<html>
<head>
<style type = "text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>次のリンクが生成されます。 次に、このリンクの上にマウスを移動すると、色が黄色に変わることがわかります。
アクティブリンクの色を変更する
次の例は、アクティブなリンクの色を変更する方法を示しています。 有効な値は、有効な形式の色名です。
<html>
<head>
<style type = "text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>次のリンクが生成されます。 ユーザーがクリックすると、色がピンクに変わります。
