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

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 ページ上のほとんどのハイパーリンクにどのような効果を持たせたいかを決定します。もう一つの例を挙げてみましょう。

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

<style>a{ テキスト装飾:なし }a.xh{ テキスト装飾:なし }
a:hover.xh{ TEXT-DECORATION:underline }</style> は <style> と同等です。
a,a.xh{ テキスト装飾:なし }a:hover.xh{ テキスト装飾:下線 }</style>

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

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

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

推薦する

Mailtoを使えばHTMLでメールを送るのは簡単

最近、顧客のフッターメールボックスにクリックして送信するメール機能を追加しました。Baidu で検索...

XHTML の一般的なタグ

XHTML タグとは何ですか? XHTML タグ要素は、XHTML ドキュメントの基本的なコンポーネ...

Linux システムで時間を取得して使用する方法

Linux システム時間には 2 種類あります。 (1)暦上の時刻。値は、指定された時刻、1970 ...

Msyql トランザクション分離について知っておくべきこと

トランザクションとは何ですか?トランザクションは、データベース管理システムの実行プロセスにおける論理...

Dockerイメージの作成とプロジェクト全体のワンクリックパッケージングとデプロイ

一般的な Dockerfile 命令の紹介命令説明するから新しいイメージが構築される基となるイメージ...

W3C チュートリアル (10): W3C XQuery アクティビティ

XQuery は、XML ドキュメントからデータを抽出するための言語です。 XQuery は、XML...

JSメモリ空間の詳細な説明

目次概要1. スタックとヒープ2. 変数オブジェクトと基本データ型3. 参照データ型とヒープメモリメ...

Linux で open-vswitch をインストールおよびアンインストールする方法

1. ソースコードからovsをコンパイルしてインストールします。依存関係をインストールします: # ...

CSS スキル コレクション - 古典の中の古典

リンク上の点線のボックスを削除しますコードをコピーコードは次のとおりです。 a:アクティブ、a:フォ...

シンプルなビデオ連射機能を実装する JavaScript CSS3

この記事では、最も単純なビデオ連射機能をシミュレートするデモを作成します。アイデア:再生する動画と同...

ウェブページを作るときに注意すべき5つのポイント

1. 色合わせの問題<br />Web ページには 3 色以上使用しないでください。そう...

JavaScript を使用して QR コードを解析する 3 つの方法

目次1. JavaScriptを使用してQRコードを解析する1. QR コードとは何ですか? 2.q...

CSS ペイント API: CSS のような描画ボード

1. Canvas画像をCSS背景画像として使用するCSS ペイント API は、Canvas キャ...

Tomcat は、Springboot プロジェクトの WAR パッケージの起動時にエラーを報告します: 子の起動時にエラーが発生しました

今日、会社の Springboot プロジェクトは、テストのためにテスト サーバーにデプロイする準備...

ノードをMySQLデータベースに接続する際に発生する問題と解決策

今日、MySQL の新しいバージョン (8.0.21) をインストールしましたが、ノード フレームワ...