ビデオ: 【HTML入門】#12.リンクを表す要素 2024
一般に、ブラウザは青い下線付きテキストとしてリンクを表示します。もともと、このデフォルトの動作は、ページ上のコンテンツと対話型リンクの混乱を最小限に抑えました。今日、ほとんどすべてのウェブサイトスタイルが独自の方法でリンクしています。一部のWebサイトはリンクに下線を引いていません。青色以外の色の下線付きのスタイルリンクもあります。等々。
リンクを作成するには、HTMLアンカー要素(
)を使用します。開始アンカータグと終了アンカータグの間のテキストはリンク記述であり、
href
属性で設定されたURLは、リンクがクリックされたときにブラウザが訪れるアドレスです。
リンク
-
:ユーザがクリックしていないか訪問したリンク
訪問済み -
:A - > - >
アンカータグは、ユーザがクリックまたは訪問したリンク -
ホバー
:クリックしないでマウスカーソルをホバーするリンク -
アクティブ
:ユーザがクリックを開始したがまだリリースしていないリンクマウスボタン
CSSは、これらの4つの状態のそれぞれを、ほとんどの場合、これらのプロパティと値を使用してスタイル設定することができます。
プロパティ名 | 可能な値 | 説明 |
色
|
名前
|
( color:rgb(0、0、255);
color:#0000FF;
)またはRGB値( >)。
テキスト装飾
なし
<! - 3 - >
underline |
リンクに下線を付ける(またはしない)ように設定します。
|
以下のサンプルスタイルのリンクは、Wikipediaの記事でスタイルを設定した方法と似た方法でリンクされています。リンクはデフォルトで青く表示され、マウスのホバーには下線が引かれ、アクティブのときはオレンジ色になります。以下に示すように、米国のCTO(Chief Technology Officer)との最初のリンクは、マウスがマウスの上に乗っていた場合と同じように下線付きです。また、Googleへのリンクは、アクティブでマウスがクリックした場合と同じようにオレンジ色で表示されます。 a:リンク{
色:rgb(6,69,173);
|
} |
a:活性{色:rgb(250,167,0)
Wikipedia。リンク、訪問、ホバー、アクティブ状態を示すorgページ。
セレクタとリンク状態の間にコロンを含めることを忘れないでください。
なぜこの本の範囲を超えているのか説明していますが、CSS仕様ではリンク、訪問、ホバー、アクティブの順にさまざまなリンクステートを定義しなければなりません。ただし、この順序が保持されている限り、リンク状態を定義しないでもかまいません。様々なリンク状態は、
擬似クラスセレクタ
として知られている。擬似クラスセレクタは、CSSセレクタにキーワードを追加し、選択した要素の特別な状態をスタイルすることができます。