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

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

yulia

Sep 26, 2018 pm 03:46 PM

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7554

CakePHP チュートリアル

1382

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。