HTMLのタグの色を設定するにはどうすればよいですか?ハイパーリンクの色設定まとめ（CSS風）-CSSチュートリアル-php.cn

HTMLのタグの色を設定するにはどうすればよいですか?ハイパーリンクの色設定まとめ（CSS風）

寻∝梦

リリース： 2018-09-04 13:40:16

オリジナル

105792 人が閲覧しました

ハイパーリンク a タグについては、この記事で主に 4 つの色の変更について説明していますので、ぜひ一緒に読んでみてください。まず、HTML の a タグの色の設定を知る必要があります:

Web ページ上の HTML の a タグのデフォルトの色は誰でも知っています。次に、コードを試して確認してください:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<a href="#">php中文网</a>
</body>
</html>

ログイン後にコピー

これは次のとおりです。基本的な HTML ドキュメントのコードをブラウザで確認します。

クリックされていない URL は、クリックすると紫色になります。 aタグの色を設定します。たとえば、クリックされていない URL の色を設定したい場合、クリックされる前は赤、クリックされた後は黒とします。効果を加えてみましょう: HTMLのタグの色を設定するにはどうすればよいですか?ハイパーリンクの色設定まとめ（CSS風）

<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
a:link{color:red;}
a:visited{color:black;}
</style>
</head>
<body>
<a href="#">php中文网</a>
</body>

ログイン後にコピー

これは簡単な CSS コードです。効果を見てみましょう:

アクセスされていないときは次のようになります。 HTMLのタグの色を設定するにはどうすればよいですか?ハイパーリンクの色設定まとめ（CSS風）

こんな感じです訪問スタイルはブラックです。コードを説明しましょう: HTMLのタグの色を設定するにはどうすればよいですか?ハイパーリンクの色設定まとめ（CSS風）

a:link: これは、下線の削除、色の変更、その他の機能など、さまざまな機能を追加できるスタイルです。クリックした後、多くの要素を追加したり、下線を削除したり、色を変更したり、その他の機能を追加することもできます。

a:hover : これはマウスホバーのスタイルです。これについては後で例に挙げますので、最初に理解しましょう。マウスがハイパーリンクの位置に止まったときに色が変化するように設定できます。これはアクティブ化されたスタイルと言われます。簡単に言うと、この時点ですぐに表示されるスタイルです

<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
a:link{color:red;}
a:visited{color:black;}
a:hover{color:pink;}
a:active{color:#ccc;}
</style>
</head>
<body>
<a href="#">php中文网</a>
</body>

ログイン後にコピー

では、ブラウザに表示される効果を見てみましょう:

CSS ビデオチュートリアル

HTMLのタグの色を設定するにはどうすればよいですか?ハイパーリンクの色設定まとめ（CSS風）

この a タグの 4 つのアンカー疑似クラス CSS スタイルが導入されました。その 4 つの用途を思い出してください。 : 1 つはクリックされていないスタイル、つまりクリックされていないときに通常表示されるスタイルで、もう 1 つはラベルをクリックした後のスタイルで、もう 1 つはマウスオーバー時のスタイルです。マウスをクリックするとエフェクトが変化します。このエフェクトは後で使用することがわかります。最後のエフェクトは、この 4 つです。タグに必要なスタイルです。これはより良い設定です。 HTMLのタグの色を設定するにはどうすればよいですか?ハイパーリンクの色設定まとめ（CSS風）