HTMLハイパーリンクのフォントの色を変更するにはどうすればよいですか?ハイパーリンクの文字色を変更する方法まとめ
この記事では、HTML ハイパーリンク テキストのフォントの色を変更する方法について説明します。1 つは純粋な a タグのテキストを変更する方法、もう 1 つは a タグを div タグの中に入れて CSS スタイルを変更する方法です。それでは、記事の内容を一緒に見ていきましょう
まず、ハイパーリンクのフォントの色を変更する例から始めましょう:
私たちがやりたいのは、ハイパーリンクのテキストがクリックされていないときに、ハイパーリンクのフォントの色が変更されるということです。下線は引かれず、マウスを押すと灰色で表示されます。リンクに下線が引かれている場合、リンクをクリックするとリンク テキストが赤色で表示され、リンクは下線が引かれずに黄色で表示されます。
完全な実験コードを見てみましょう:
<html>
<head>
<title>PHP中文网：取消下划线实例</title>
<style>
a:link{text-decoration: none;color: gray}
a:active{text-decoration:blink}
a:hover{text-decoration:underline;color: red}
a:visited{text-decoration: none;color: yellow}
</style>
</head>
<body>
欢迎来到<a href="www.php.cn">php中文网</a>
</body>
</html>3 つのレンダリングがあります:
これは、クリックされておらず、下線もなく、グレーで表示されている場合にどのように見えるかです。
マウスを上に移動したときのスタイルです。下線が引かれて赤色で表示されます。
これは、クリック後のスタイルで、下線はなく、黄色のテキストで表示されます。
上記は上記のコードの実験結果です。これで先ほどのタスクが完了し、上記のコードが理解しやすくなります。
ここで、上記のコードの具体的な意味を理解しましょう。
- a:link は通常の未訪問のリンクを指します。
- a :hover は、クリックされたリンクを指します。
- a:visited は、アクセスされたリンクを意味します。
- none パラメータは、ハイパーリンクテキストが変更されないことを意味します。 underlined;
- underline パラメータは、ハイパーリンクのテキストに下線が引かれていることを意味します
- さて、理解できましたが、上記のコードを理解する、つまり、これらを 1 つずつ取り込んだ方が良いでしょうか。 別の例として、ハイパーリンクが div タグ内にある場合、div タグ内のハイパーリンクのテキストの色を変更する必要があります。
説明コードを見てみましょう:
a{ color:#00F}
a:hover{ color:#F00}/* 鼠标经过悬停字体颜色 */
/* css 注释说明：以上代码为设置html中超链接统一字体颜色 */
.div a{ color:#090}
.div a:hover{ color:#090}
/* css注释说明：以上代码为设置html中.div对象内超链接字体颜色2.html コード:
<p>测试内容我是统一设置的颜色蓝色<a href="http://www.php.cn">php中文网</a></p> <div class="div">我在div对象内，超链接颜色为<a href="#">我是超链接绿色</a></div>
このコードの効果は次のとおりです:
上記のテキストが青色にプログラムされている場合、下のテキストが緑色に変わります。効果は明らかです。
これは、CSS スタイルを使用して HTML のハイパーリンク テキストを変更する方法です。ご不明な点がございましたら、以下よりお問い合わせください
【編集者のおすすめ】HTML空間コードの書き方は？ HTML 空間コードの表現方法の概要
HTML 画像を同じ比率に拡大縮小するにはどうすればよいですか? HTML img 画像の拡大縮小方法のまとめ（例付き）
以上がHTMLハイパーリンクのフォントの色を変更するにはどうすればよいですか?ハイパーリンクの文字色を変更する方法まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7549
15
1382
52
83
11
22
90
HTMLの表の境界線
Sep 04, 2024 pm 04:49 PM
HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。
HTML 左マージン
Sep 04, 2024 pm 04:48 PM
HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。
HTML のネストされたテーブル
Sep 04, 2024 pm 04:49 PM
これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。
HTML テーブルのレイアウト
Sep 04, 2024 pm 04:54 PM
HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。
HTML入力プレースホルダー
Sep 04, 2024 pm 04:54 PM
HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。
HTML 内のテキストの移動
Sep 04, 2024 pm 04:45 PM
HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。
HTML の onclick ボタン
Sep 04, 2024 pm 04:49 PM
HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。
