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

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

この記事では、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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート