3つの簡単な例を使ってハイパーリンクの下線を削除する方法

ハイパーリンクの下線を削除するには、スタイルシート CSS を使用する必要があります。当面は CSS の概念を詳しく学習したくない場合は、ハイパーリンクの下線を制御する方法を示す 3 つの簡単な例を以下に示します。メモ帳を使用して Web ページのソースコードを開きます (最初に IE で Web ページを開き、IE メニューバーの [表示] → [ソースファイル] をクリックすることもできます)。すると、メモ帳ウィンドウがポップアップ表示されます。

<head> 行と </head> 行を見つけて、その間にスタイルシートステートメントを追加します。次のように：

コードをコピー

コードは次のとおりです。

<html>
<ヘッド>
<style>a{テキスト装飾:なし}</style>
</head><body>

1. headとheadの間に<style>a{ TEXT-DECORATION:none }</style>を追加するだけです。
この文はハイパーリンクの下線を削除します。これは最も簡単な例です。試してみると成功するでしょう。

2. 上記の例では、ハイパーリンクの下線を一度に削除する方法のみを説明しています。Web ページ上の一部のハイパーリンクに下線を付ける必要があり、他のハイパーリンクには下線を付ける必要がない場合はどうすればよいでしょうか。まず、Web ページ上のハイパーリンクのほとんどに下線が引かれているかどうかを検討する必要があります。
ほとんどのハイパーリンクに下線を付ける必要がない場合は、
<style> a{ TEXT-DECORATION:none }</style> とし、下線を付ける必要があるいくつかのハイパーリンクでこのメソッドを使用すると、下線が付けられます。
<a href=****><u>テキスト</a>。
ほとんどのハイパーリンクに下線を付ける場合は、上記の文を含める必要はありません。次のように変更します: <style>.n{ TEXT-DECORATION:none }</style>,
注: n の前にはクラスセレクターを示すドットがあります。これにより、Web ページのハイパーリンクで複数回参照することができ、個々のハイパーリンクを個別に削除できます。例:

コードをコピー

コードは次のとおりです。

<a class=n href=http://www.webshu.com>ウェブツリー</a>
<a class=n href=http://www.cctv.com>中国中央テレビ</a>
<a class=n href=http://www.ziyy.com>自由形水泳ネットワーク</a>

3. ハイパーリンクの下線を削除して、マウスをその上に置いたときに下線が残るようにするにはどうすればよいですか?
head と head の間に次のような文を追加できます: <style>a{ TEXT-DECORATION:none}a:hover{TEXT-DECORATION:underline }</style>
注: a はハイパーリンクを表し、a:hover はスタイルシート内の疑似クラスであり、マウスがホバーしているときの状態を示します。
Web ページ上のほとんどのハイパーリンクにどのような効果を持たせたいかを決定します。もう一つの例を挙げてみましょう。

コードをコピー

コードは次のとおりです。

この文を追加すると、Web ページ内のすべてのハイパーリンクに下線が付かなくなります。
上で見たように、CSS疑似クラスを再び使用しました。その定義形式は、セレクタ.クラスセレクタ{属性;属性値}です。たとえば、
a.xh{ テキスト装飾:なし }。

<<: HTMLの基本構造を包括的に理解する

>>: JavaScript でシンプルなクリスマスゲームを実装する