简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

HTMLハイパーリンクのフォントの色を変更するにはどうすればよいですか?ハイパーリンクの文字色を変更する方法まとめ

寻∝梦
リリース： 2018-09-03 17:28:08
オリジナル
47831 人が閲覧しました

この記事では、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 つのレンダリングがあります:

HTMLハイパーリンクのフォントの色を変更するにはどうすればよいですか?ハイパーリンクの文字色を変更する方法まとめ

これは、クリックされておらず、下線もなく、グレーで表示されている場合にどのように見えるかです。

HTMLハイパーリンクのフォントの色を変更するにはどうすればよいですか?ハイパーリンクの文字色を変更する方法まとめ

マウスを上に移動したときのスタイルです。下線が引かれて赤色で表示されます。

HTMLハイパーリンクのフォントの色を変更するにはどうすればよいですか?ハイパーリンクの文字色を変更する方法まとめ

これは、クリック後のスタイルで、下線はなく、黄色のテキストで表示されます。

上記は上記のコードの実験結果です。これで先ほどのタスクが完了し、上記のコードが理解しやすくなります。

ここで、上記のコードの具体的な意味を理解しましょう。

  • a:link は通常の未訪問のリンクを指します。

  • a :hover は、クリックされたリンクを指します。

  • a:visited は、アクセスされたリンクを意味します。

  • none パラメータは、ハイパーリンクテキストが変更されないことを意味します。 underlined;

  • underline パラメータは、ハイパーリンクのテキストに下線が引かれていることを意味します

  • さて、理解できましたが、上記のコードを理解する、つまり、これらを 1 つずつ取り込んだ方が良いでしょうか。

    • 別の例として、ハイパーリンクが div タグ内にある場合、div タグ内のハイパーリンクのテキストの色を変更する必要があります。

  • 説明コードを見てみましょう:

1. CSS コード: 

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 画像を同じ比率に拡大縮小するにはどうすればよいですか? HTML img 画像の拡大縮小方法のまとめ（例付き）

以上がHTMLハイパーリンクのフォントの色を変更するにはどうすればよいですか?ハイパーリンクの文字色を変更する方法まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
a div html
ソース：php.cn
前の記事：HTMLのハイパーリンクの下線を消す方法は？ a タグから下線を削除するすべての方法は次のとおりです。 次の記事：HTMLのインクルードタグとは何ですか? html include は構成解析を実装します
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
クエリと式は、新しい列を含むテーブル全体を形成します。新しい列は、他の条件列の値を含む式です。 編集: 式は「値」列、つま​​りカテゴリに基づいて最も低い user_id を持つ「値」列である必要があります。カテゴリ「A」の最も低い「user_id」の「value」列が 0....
から 2024-04-06 21:23:40
0
2
530
アンカーポイント内の画像に対して境界線の半径が機能しない 次の HTML コードを使用しています: <aclass="-video-detail-qualifiers-branding"><imgsr...
から 2024-04-06 17:20:25
0
1
347
JavaScript 関数はボタンのクリックには影響しません インターネットを検索して多くのことを試しましたが、比較的単純な問題で立ち往生しています。以下のコードは私の質問の全範囲です <script> //最終的に行全体を別のテ...
から 2024-04-05 13:14:53
0
2
1433
`:after` 疑似要素をスタイル付きコンポーネントに正しく適用するための React.js ガイド この美しい下線アニメーションを見つけました。 <ul><li><ahref="#">概要</a></li&...
から 2024-04-04 22:28:08
0
1
1322
2つの異なるテーブルの2つの列の値を比較しようとしています tableA と tableB という 2 つのテーブルがあります。テーブル A には 4 つの列があり、テーブル B には 3 つの列があります。テーブル A の最後の列は空白で...
から 2024-04-04 20:05:03
0
1
280
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！