Webページ上のリンクの色を変更する方法

色の例

以下は、HTMLとCSSを使用してWebページに表示されるリンクの色を変更する方法の手順です。リンクの色はHTMLで行うことができますが BODY日 、でスタイリング設定を行うことを常にお勧めします CSS 以下に示すように。

PCでダウンロードを削除する方法
ヒント

Webページ要素の色を定義するときは、次を使用する必要がある場合があります HTMLカラーコード 。主要な色については、カラーコードを使用する代わりに、それらの色の名前を指定することもできます。たとえば、尊重されるカラーコード値を使用する代わりに、赤、青、緑、黒などです。

さまざまな種類のハイパーリンクを理解する

ハイパーリンクはインタラクティブであるため、ページ上の特別な要素です。それらがインタラクティブであることを示すために、それらは状態に応じて異なる色になります。ハイパーリンクには、デフォルトの青色に加えて、3つの異なる状態を表す3つの特別な色があります。

  1. 訪問したリンク -訪問したリンクの色。ハイパーリンクがこの色の場合、ユーザーは、リンクをクリックすると、既に表示したページに移動することを期待できます。紫は、訪問したリンクのデフォルトのハイパーリンクの色です。
  2. ホバーリンク -ときの色 マウス リンクにカーソルを合わせています。ハイパーリンクがこの色の場合、ユーザーは、マウスの左ボタンを押して(クリックして)ボタンを離すと、リンクにアクセスできると期待できます。ホバーの色は、「アクティブ」リンクと「訪問済み」リンクの両方で同じです。
  3. アクティブリンク -クリックしたときのリンクの色。ユーザーがこの色を見ると、マウスボタンを離すとブラウザがリンクにアクセスすることが期待できます。
ヒント



私たちを参照してください ハイパーリンク ハイパーリンクへの詳細情報および関連する質問の定義。

CSSリンクの色の例

以下のCSSの例では、このページに表示されているものに似たハイパーリンクの色を設定しています。まず、すべてのアンカーが#2c87f0(青の色合い)、#636が紫の色合い、すべてのホバーとアクティブリンクの色:#c33(赤)に設定されます。以下のコードは、CSSスタイル要素または.cssファイルに追加できます。

a { color: #2c87f0; } a:visited { color: #636; } a:hover, a:active, a:focus { color:#c33; }

ページでCSSを使用していない場合、以下の手順は、CSSでこれを行う方法を示しています。 HTML BODYタグ。ただし、前述のように、bodyタグの代わりに上記のCSSコードを使用することを強くお勧めします。上記のコードをCSSファイルに追加し、すべてのWebページをそのCSSファイルにリンクできます。次に、その1つのCSSファイルのbackground-color値を変更して、それにリンクしているすべてのページの背景色を即座に変更できます。

HTML本文タグの例

非常にまれな状況では、CSSを使用できない場合があります。このような状況では、以下に示すように、HTMLのbodyタグで背景色、テキストの色、リンクの色、およびその他の値を定義することもできます。

以下は、bodyタグの各HTML属性の説明です。

テキスト =テキストの色。
リンク =リンクの色。
VLINK =訪問したリンクの色。
リンク =アクティブなリンクの色またはクリックしたときにリンクが変わる色。
BGCOLOR =ページの背景色。