CSSリンク(リンク)2024 年の最新の入門チュートリアル。このコースでは リンクスタイル,例,一般的なリンクのスタイル,テキストの装飾,例,背景色,例,より多くの例, について学習できます。

CSSリンク(リンク)

異なるリンクは、異なるスタイルを有することができます。


リンクスタイル

スタイルリンクは、あなたが(そのような色、フォント、背景など)の任意のCSSプロパティを使用することができます。

特別リンクは彼らが何であるかの状態に応じて、異なるスタイルを持つことができます。

4リンクの状態は以下のとおりです。

  • A:リンク - ノーマル、未訪問のリンク
  • A:訪問 - ユーザーがリンクを訪問しました
  • :ホバー - リンク時を超えるユーザーマウスを置い
  • A:アクティブ - リンクは瞬間をクリックします

A:リンク{色:#FF0000の;} / *未訪問のリンク* /
A:訪問{色:#00FF00;} / *訪問済みリンク* /
A:ホバー{色:#1 FF00FF;} / *リンク*にマウスを移動/
A:アクティブ{色:#1 0000FF;} / *マウスクリック* /

»をお試しください

リンクステートのスタイルの数に設定すると、注文のいくつかのルールがあります。

  • A:linkや::後で訪問ホバーはAに従わなければなりません
  • A:アクティブに従う必要があります。背後にカーソルを移動

一般的なリンクのスタイル

リンクの色の変更上記の例によれば、それはであるものの状態を確認します。

リンクのスタイルにいくつかの他の一般的な方法を見てみましょう:

テキストの装飾

テキストの装飾の属性は、主にリンクの下線を削除するために使用されます。

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

»をお試しください

背景色

背景色プロパティは、リンクの背景色を指定します。

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

»をお試しください


例

より多くの例

ハイパーリンクの異なるスタイルを追加します。
この例では、ハイパーリンクに他のスタイルを追加する方法を示します。

[詳細] - [リンク]ボックスを作成します。
この例では、我々は、CSSプロパティの数がボックスとして表示される組み合わせ、より高度な例を示しています。

CSSリンク(リンク)
10/30