ホームページ > 記事 > ウェブフロントエンド > CSSを使用して動的ハイパーリンクを設定する方法（コードが添付されています）
CSSを使用して動的ハイパーリンクを設定する方法（コードが添付されています）
- yuliaオリジナル
- 2018-09-26 15:46:143528ブラウズ
この記事では、CSSを使用して動的ハイパーリンクを設定する方法を主に紹介します。コードとテキストの説明がわかりやすくなっています。興味のある方は参考にしていただければ幸いです。
HTML では、ハイパーリンクはマーク 3499910bf9dac5ae3c52d5ede7383485 によって実装され、特定のアドレスはマーク 3499910bf9dac5ae3c52d5ede7383485 の href 属性を使用します。
2027a75694c4961b064ca4941c50a15aali のブログ5db79b134e9f6b82c0b36e0489ee08ed
デフォルトでは、閲覧中のハイパーリンクは青色で下線付きで統一されています、クリックされたハイパーリンクは紫色になり、下線も付きます。
CSS は、フォント、色、背景など、ハイパーリンクのさまざまな属性を設定でき、疑似カテゴリを通じて多くの動的な効果を作成できます。
まず、ハイパーリンクの下線を削除します。
a{ text-decoration:none; }この時点で、ハイパーリンク自体と、クリックされたハイパーリンクの下線の両方が削除されます。
CSS 疑似カテゴリ - 疑似クラスをアンカーします。疑似カテゴリを使用して動的ダウンロードを作成します。特定の属性は次のとおりです:
A:link - 通常のブラウザでのハイパーリンクの通常のスタイルスタイル。
A:visited——クリックされたハイパーリンクのスタイル。
A:hover——マウス ポインタがハイパーリンク上を通過するときのスタイル。
A:active - ハイパーリンクをクリックしたとき、つまり現在アクティブなときのハイパーリンクのスタイル。
<html>
<head>
<title>
</title>
<style>
<!--
a:link{
color:#005799;
text-decoration:none;
}
a:visited{
color:#0000;
text-decoration:none;
}
a.hover{
color:#ffff00;
text-decoration:underline;
}
-->
</style>
</head>
<body>
<table width="600px"cellpadding="2" class="chara1" align="center">
<tr>
<td><a href="#">首页</a></td>
<td><a href="#">心情日记</a></td>
<td><ahref="#">Free</a></td>
<td><a href="#">一起走到</a></td>
<td><a href="#">从明天起</a></td>
<td><a href="#">纸飞机</a></td>
<td><a href="#">下一站</a></td>
</tr>
</table>
</body>
</html>ハイパーリンク自体は、下線のない濃い青ですが、マウス ポインタが通過すると、ハイパーリンクは黄色に変わり、下線が付きます。
さらに、ハイパーリンクのいくつかの疑似属性にさまざまな背景、境界線、タイポグラフィー効果を追加できます。現在のアクティブ化ステータスは、通常、非常にまれに表示され、使用されることはほとんどありません。
ユーザーがハイパーリンクをクリックすると、フォーカスは新しく開いたウィンドウなどの他の場所に簡単に移動します。この時点で、ハイパーリンクは現在アクティブではありません。
以上がCSSを使用して動的ハイパーリンクを設定する方法（コードが添付されています）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。