CSS リンク（链接）

リンクまたは超リンクは、1つのWebリソースページから別のWebリソースページにリンクしています。

CSSスタイルリンク

リンクには4つの異なる状態があります- リンク、訪問済み、アクティブ、およびホバー。リンクまたは超リンクのこれらの4つの状態は、アンカー要素の擬似クラスCSS属性を設定して、状態によって異なるスタイルを設定します。

これはHTMLと <a>関連するCSSの擬似クラスをマークし、超リンクの異なる状態に異なるスタイルを定義するために使用できます。

• a：リンク マウス指が表示されない通常のリンクや未訪問のリンクにスタイルを設定します。

• a：visited-ユーザーが訪問したがマウス指を置いていないリンクのスタイルを設定します。

• a：hover —ユーザーがリンクにマウス指を置いたときにリンクのスタイルを設定します。

• a：active-クリックしているリンクにスタイルを設定する

CSS属性に指定できます。例えば：color、font-family、backgroundなど、これらの選択リンクのスタイルを再定義することは、通常のテキストのように行います。

a:link　{　　　　/*　訪問していないリンク　　　*/
　　　　color: #FF0000;
　　　　text-decoration: none;
}
a:visited　{　　　　/*　訪問したリンク　*/
　　　　color: #00FF00;
}
a:hover　{　　　　/*　リンクにマウスを合わせたとき　*/
　　　　color: #FF00FF;
　　　　text-decoration: underline;
}
a:active　{　　　　/*　クリックしているリンク　　*/
　　　　color: #0000FF;
}

複数のリンク状態に対してスタイルを設定する順序は重要です。なぜなら、最後に定義されたものが先のCSSコードよりも優先されるからです。

標準リンクスタイル

すべての主要なWebブラウザで、特別なスタイルが設定されていない場合、ウェブページのリンクには下線が付いており、ブラウザのデフォルトのリンク色が使用されます。

例えば、Geckoに基づくWebブラウザ（Firefoxなど）のデフォルトのリンク色は- 青未訪問を表します。紫訪問済みを表します。赤色クリックしているリンクを表します。

リンクの色を設定する

以下はリンクの色を設定する例です。

a:link　{　　　　/*　訪問していないリンク　　*/
　　　　color: #FF0000;
}
a:visited　{　　　　/*訪問したリンク　*/
　　　　color: #00FF00;
}
a:hover　{　　　　/*　リンクにマウスを合わせたとき　*/
　　　　color: #FF00FF;
}
a:active　{　　　　/*　クリックしているリンク　*/
　　　　color: #0000FF;
}

リンクからデフォルトの下線を削除する

text-decoration CSS属性は一般的にリンクからデフォルトの下線を削除するために使用されます。以下の例では、textを削除したり設定する方法を示します。-超リンクの異なる状態の属性。

a:link　{　　　　/*　訪問していないリンク　*/
　　　　color: #FF0000;
　　　　text-decoration: none;
}
a:visited　{　　　　/*　訪問したリンク　*/
　　　　color: #00FF00;
　　　　text-decoration: none;
}
a:hover　{　　　　/*　リンクにマウスを合わせたとき　*/
　　　　color: #FF00FF;
　　　　text-decoration: underline;
}
a:active　{　　　　/*　クリックしているリンク　*/
　　　　color: #0000FF;
　　　　text-decoration: underline;
}