リンクはウェブページでは非常に一般的ですが、多くのWebデザイナーは、リンクを効果的に操作して管理するためにCSSで持つ力を理解していません。ビジター、ホバー、アクティブな状態のリンクを定義できます。また、ボーダーや背景を使ってリンクにピザを付けるか、ボタンや画像のように見せることもできます。
ほとんどのWebデザイナーは、まず a タグ：
a {色：赤; }
これにより、リンクのすべての側面がスタイルされます（ホバー、訪問済み、アクティブ）。各部分を別々にスタイルするには、リンク擬似クラスを使用する必要があります。
リンク擬似クラス
定義できるリンク擬似クラスには、次の4つの基本的なタイプがあります。
- ：link - これはリンクのデフォルトのスタイルです
- ：訪問済み - リンクがクリックされた後
- ：ホバー - マウスがリンク上に置かれている（プレクリック）
- ：アクティブ - リンクがクリックされている間右
リンク擬似クラスを定義するには、 a タグをCSSセレクタに追加します。だから、灰色にあなたのすべてのリンクの訪問された色を変更するには、書く：
a：訪問した{色：灰色; }
1つのリンク擬似クラスをスタイルする場合は、それらをすべてスタイルすることをお勧めします。そうすれば、無関係な結果に驚かれることはありません。そのため、訪問した色を灰色に変更するだけで、リンクの他のすべての擬似プロパティが黒色のまま残っている場合は、次のように記述します。
a：リンク、a：ホバー、a：アクティブ{color：black; } a：訪問した{色：灰色; }
リンクの色を変更する
リンクをスタイルする最も一般的な方法は、マウスをマウスの上に置いたときに色を変更することです。
a {color：＃00f; } a：ホバー{色：＃0f0; }
ただし、：activeプロパティを使用してリンクをクリックしたときの表示方法に影響を与えることができることを忘れないでください：
a {color：＃00f; } a：アクティブ{カラー：＃f00; }
：visitedプロパティでリンクを訪問した後のリンクの見方：
a {color：＃00f; } a：visited {color：＃f0f; }
すべてをまとめるには：
a {color：＃00f; } a：visited {color：＃f0f; } a：ホバー{色：＃0f0; } a：アクティブ{カラー：＃f00; }
アイコンや箇条書きを追加するリンクに背景を置く
背景を少しずつ演奏することで、関連するアイコンを持つリンクを作成することができます。テキストが大きい場合を除き、約15ピクセル×15ピクセルの小さいアイコンを選択します。バックグラウンドをリンクの片側に置き、繰り返しオプションをno-repeatに設定します。次に、リンク内のテキストが左または右に十分に移動してアイコンが表示されるように、リンクを貼り付けます。
a {パディング：0 2px 1px 15px;背景：#fff url（ball.gif）左中央ノーリピート。色：＃c00; }
アイコンを取得したら、ホバー、アクティブ、および訪問したアイコンとして別のイメージを設定して、リンクを変更できます。
a {パディング：0 2px 1px 15px;背景：#fff url（ball.gif）左中央ノーリピート。色：＃c00; } a：ホバー{背景：#fff url（ball2.gif）left center no-repeat; } a：アクティブ{バックグラウンド：#fff url（ball3.gif）left center no-repeat; }
リンクがボタンのように見えるようにする
ボタンは非常に人気がありますが、CSSが登場するまで、画像を使ってボタンを作成しなければならなかったので、ページの読み込みに時間がかかります。幸いなことに、CSSを使用してボタンのような効果を簡単に作成できるようにする境界線スタイルがあります。
a {border：4pxの始まり;パディング：2ピクセル;テキスト装飾：なし; } a：アクティブ{border：4pxのインセット; }
注意しておきますが、最初に色を付けたり、スタイルをインセットしたりすると、ブラウザは期待通りにレンダリングされません。だから、ここに色のついた罫線が付いた魅力的なボタンがあります：
a {border-style：solid; border-width：1px 4px 4px 1px;テキスト装飾：なし;パディング：4px;ボーダーカラー：＃69f＃00f＃00f＃69f; }
また、ボタンリンクのホバーやアクティブなスタイルにも影響を与えることができます。ちょうどそれらの擬似クラスを使用してください：
a：link {border-style：solid; border-width：1px 4px 4px 1px;テキスト装飾：なし;パディング：4px;ボーダーカラー：＃69f＃00f＃00f＃69f; } a：hover {border-color：#ccc; }
