HTML ハイパーリンクの下線を削除する方法についての詳細な図による説明-CSSチュートリアル-php.cn

HTML ハイパーリンクの下線を削除する方法についての詳細な図による説明

yulia

リリース： 2018-09-19 17:48:59

オリジナル

9581 人が閲覧しました

ページレイアウトでは、a タグがよく使用されます。a タグにはデフォルトで下線が付いており、ページの美しさを保つために、一部のハイパーリンクの下線を削除するか、変更する必要があることは誰もが知っています。ハイパーリンクの色、この効果を実現する方法を知っていますか?この記事では、HTML ハイパーリンクの下線を削除する方法を説明します。知らない友人も参考になれば幸いです。

まず例を見てみましょう: このハイパーリンクがクリックされていない場合、ハイパーリンクのテキストは下線が引かれず、青色で表示されます。マウスがリンクの上を通過すると、下線が引かれ、リンクが表示されます。リンクをクリックすると、テキストは赤色で表示され、リンクは下線が引かれず緑色で表示されます。実装方法は非常に簡単です。

との間に次の CSS コードを追加します。

<style type="text/css">
	a:link { text-decoration: none;color: blue} 
	a:active { text-decoration:blink} 
	a:hover { text-decoration:underline;color: red} 
	a:visited { text-decoration: none;color: green} 
</style>

ログイン後にコピー

このうち

a:link は、訪問されていないリンク;

a:active はクリックされているリンクを指します。

a:visited はリンク上のマウスを指します。訪問したリンク。

テキスト装飾は、テキストの変更効果を意味します。

none パラメーターは、ハイパーリンクテキストに下線が引かれないことを示します。ハイパーリンクテキストに下線が引かれることを示します

マウス通過のレンダリング:

ハイパーリンクの下線を削除する方法 HTML ハイパーリンクの下線を削除する方法についての詳細な図による説明

{ text-decoration:none;} を使用するだけです。デフォルトで下線を削除するようにハイパーリンクラベルを設定できます。コードは次のとおりです。

<style type="text/css">
	a{text-decoration: none;color: red;}
</style>
<body>
	生活不止眼前的苟且，<a href="#">还有诗和远方的田野</a>
</body>

ログイン後にコピー

下線を削除しない場合の効果:

下線を削除して色を赤に設定した場合の効果:

HTML ハイパーリンクの下線を削除する方法についての詳細な図による説明

概要: HTML ハイパーリンクの下線を削除するのは非常に簡単で、属性 text-decoration:none を追加するだけです。他のテキスト装飾属性については、ここではあまり紹介しませんので、必要な方は Web サイトにアクセスして使用方法を確認してください。

HTML ハイパーリンクの下線を削除する方法についての詳細な図による説明

以上がHTML ハイパーリンクの下線を削除する方法についての詳細な図による説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

HTML ハイパーリンクの下線を削除する方法についての詳細な図による説明