CSSを使用して動的ハイパーリンクを設定する方法（コードが添付されています）-CSSチュートリアル-php.cn

CSSを使用して動的ハイパーリンクを設定する方法（コードが添付されています）

yulia

リリース： 2018-09-26 15:46:14

オリジナル

3602 人が閲覧しました

この記事では、CSSを使用して動的ハイパーリンクを設定する方法を主に紹介します。コードとテキストの説明がわかりやすくなっています。興味のある方は参考にしていただければ幸いです。

HTML では、ハイパーリンクはマークによって実装され、特定のアドレスはマークの href 属性を使用します。

ali のブログ

デフォルトでは、閲覧中のハイパーリンクは青色で下線付きで統一されています、クリックされたハイパーリンクは紫色になり、下線も付きます。

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