HTML の基本 - ハイパーリンク スタイルを設定する簡単な例

HTML の基本 - ハイパーリンク スタイルを設定する簡単な例

*** ハイパーリンクのスタイル設定の例

a:link クリックされる前のハイパーリンクの状態

a:visited ハイパーリンクがクリックされた後の状態

a:hover ハイパーリンクの上にマウスを移動する

a:active ハイパーリンクをクリックしたとき

これらの状態を定義するには順序があります。

コード領域:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   
  2. < html   xmlns = "http://www.w3.org/1999/xhtml" >   
  3. <ヘッド>   
  4. <メタ  http-equiv = "コンテンツタイプ"  コンテンツ= "text/html; 文字セット = utf-8"   />   
  5. < title >無題の文書</ title >   
  6. <スタイル タイプ= "text/css" >   
  7. リンク
  8. {
  9. 色:#000;
  10. テキスト装飾:なし;}
  11. a:訪問した
  12. {
  13. 色:#000;
  14. テキスト装飾:なし;}
  15. ホバー
  16. {
  17. 色:#F00;
  18. テキスト装飾:下線;}
  19. a:アクティブ
  20. {
  21. 色:#F90;
  22. テキスト装飾:下線;}
  23. </スタイル>   
  24. <リンク  href = "無題-1.css"   rel = "スタイルシート"  タイプ= "テキスト/css"   />   
  25. </ヘッド>   
  26.   
  27. <本文>   
  28. <   href = "http://www.baidu.com/" > Baidu 検索</ a >   
  29. </本文>   
  30. </html>   

実行中の表示:マウスの矢印が「Baidu」上にない場合は黒色で表示され、上にある場合は赤色で表示され、「Baidu」リンクをクリックするとオレンジ色で表示され、クリック後は黒色で表示されます。

HTML の基本に関する上記の記事 - ハイパーリンクのスタイル設定の簡単な例 - が、私が皆さんに共有できるすべてです。これが皆さんの参考になれば幸いです。また、123WORDPRESS.COM をサポートしていただければ幸いです。

オリジナルURL: http://www.cnblogs.com/H2921306656/archive/2016/07/10/5658752.html

<<:  フロントエンド開発に必須:推奨されるブラウザ互換性テストツール 12 選

>>:  Dockerカスタムネットワークコンテナ相互接続

推薦する

MySQL における引用符とバックティックの違いと使い方の詳細な説明

序文そこでこのブログを書きました。このブログでは大物の記事からいくつかの知識も推奨しています。侵害が...

ユーザー名が使用可能かどうかを確認するVueメソッド

この記事では、ユーザー名が使用可能かどうかを確認するためのVueの具体的なコードを例として紹介します...

nginx で SSL 証明書を設定して https サービスを実装する方法

前回の記事では、openssl を使用して無料の証明書を生成した後、この証明書を使用してローカル ノ...

JavaScript クロージャの説明

目次1. クロージャとは何ですか? 1.2 クロージャのメモ化: 関数は定義された環境を記憶する1....

Linux の一般的な Java プログラム起動スクリプトのコード例

シェルを起動する頻度は非常に低いですが。 。 。しかし、書くたびに、多くの jar ファイル パスを...

MySQL ストアド プロシージャで case ステートメントを使用する詳細な例

この記事では、例を使用して、MySQL ストアド プロシージャでの case ステートメントの使用方...

Vue echarts は棒グラフの動的な表示を実現します

この記事では、棒グラフの動的な表示を実現するためのvue echartsの具体的なコードを参考までに...

CSS を使用して画像の下の空白を数ピクセル消去する方法の詳細な説明

最近、友人が私に質問をしました。ページをレイアウトすると、画像の下に 1 ~ 2 ピクセルの空白があ...

JavaScript 関数はランダムな色の検証コードをカプセル化します (完全なコード)

数字、文字、またはランダムな色の数字と文字の混合で構成される n 桁の確認コード。以下に完全なコード...

Linux で完全な Samba サーバーを構築する方法 (CentOS バージョン)

序文smb は、クライアントとサーバー間の Web 接続および情報通信に使用できるプロトコルの名前で...

Vue がコンポーネント通信を実装する 8 つの例

目次1. Props 親コンポーネント ---> 子コンポーネント通信2. $emit 子コン...

選択ドロップダウンメニューのテキストを左右にスクロールするように設定する

marquee タグを使用してフォントのスクロールを設定したいです。コードは次のように記述しましたが...

マウスの尾行効果を実現する JavaScript

マウス効果では、setTimeout を使用して固定時間にノードを生成し、ノードを削除し、生成された...

Reactの二次連携を実現する方法

この記事では、二次リンクを実現するためのReactの具体的なコードを参考までに共有します。具体的な内...

Red Hat Enterprise Linux 8 をベースにした CentOS 8 が正式にリリースされました

CentOS プロジェクトは、Red Hat の再配布要件に完全に準拠した、Red Hat Ente...