ホームページ >ウェブフロントエンド >htmlチュートリアル >aタグの使い方を整理する

aタグの使い方を整理する

零下一度オリジナル: 2017-06-24 14:05:323127ブラウズ

ウェブサイト作成時にまとめたaタグの使い方を次回使いやすいように整理しました。

1. ハイパーリンクのコード

DIV+CSS

は次のように解析されます:

target
_blank -- 新しいウィンドウでリンクを開きます
_parent -- 親フォームでリンクを開きます
_self -- 現在のフォームでリンクを開きます、これがデフォルトですvalue
_top - - 現在のフォームでリンクを開き、現在のフォーム (フレームページ) 全体を置き換えます

title の後に、ハイパーリンクにリンクされている URL の簡単な説明であるリンクターゲットの説明、またはタイトル

CSS はハイパーリンクのスタイルを制御できます - CSS のリンクスタイル は次のとおりです
a:link はハイパーリンクの初期状態です
a:hover はマウスを置いたときのステータスです
a:active はマウスを置いたときの状態ですクリックされました
a:visited は訪問後のステータスです

II、単純なハイパーリンクスタイル

1. 通常、サイト全体のハイパーリンクをスタイルする方法です
a{color:#333;text-decoration:none; /サイト全体へのリンクを含むテキストのカラースタイルは color:#333 ; すぐに下線は付きません text-decoration:none;
a:hover {color:#CC3300;text-decoration:underline;}//マウスを置きますハイパーリンクとテキストの色のスタイルが color:#CC3300; に変更され、テキストリンクが下線 text-decoration:underline;

2. リンクにクラスを設定してハイパーリンクスタイルの CSS メソッドを制御します
Case hyperlink codeCSS
対応する CSS コード
a.yangshi{color:#333;text-decoration:none}
a.yangshi :hover {color:#CC3300;text-decoration:underline;}
これにより、リンク内のcssクラスで「yangshi」という名前のハイパーリンクのスタイルを制御できるようになります

3.ハイパーリンクの外側の親 CSS クラスに対応する CSS スタイル
Case ハイパーリンクコード

CSS
対応する CSS コード
.yangshi a{color:#333; text-decoration:none; }
.yangshi a:hover {color:#CC3300;text-decoration:underline;}

価値があるものここで、a.yangshi と .yangshi a のスタイル CSS コードの違いに注意してください

3. 基本的な理解

これら 4 つの一般的な疑似クラスの機能と説明を紹介します
1. a:link
スタイルを設定します。オブジェクトがアクセスされる前 (クリックされておらず、マウスが通過されていない状態) のシート属性。つまり、HTML のコンテンツの初期スタイルはアンカーテキストタグです。

2. a:hover
マウスがホバーしているとき、つまりマウスが a ラベルを通過して A リンクに留まったとき、オブジェクトのスタイルシートプロパティを設定します。

3. a:active
ユーザーによってアクティブ化されたとき (マウスのクリックとリリースの間に発生するイベント)、A オブジェクトのスタイルシートプロパティを設定します。つまり、マウスの左ボタンで html A リンクオブジェクトをクリックしてからマウスの右ボタンを放すまでの短いスタイル効果です。

4. a:visited
リンクアドレスが訪問されたときに、訪問されたオブジェクトのスタイルシート属性を設定します。つまり、HTML ハイパーリンクテキストをクリックしてアクセスした後の CSS スタイルの効果です。

4. アプリケーションの使用例

ハイパーリンクを設定し、それに CSS スタイルを設定し、CSS A を通じてその 4 つのスタイル効果を設定します。テキストのCSSスタイルの簡単な設定を通じて、アンカーテキストスタイルのCSSを学びます。

1. Case CSS コード