CSS を使用してリンク スタイルを操作する方法

この記事ではCSSでハイパーリンクのスタイルを制御する方法を詳しく説明します。ここでは主に、ハイパーリンクに下線が付いているかどうか、ハイパーリンク テキストの色、その他のスタイルなど、テキスト タイプのハイパーリンクについて説明します。

ハイパーリンクとは何ですか?

ハイパーリンクは通常、Web ページからターゲットへの接続関係を指します。このターゲットは、別の Web ページ、同じ Web ページ上の別の場所、または写真、電子メール アドレス、ファイルなどの場合があります。アプリケーションでもあります。 Web ページ内のハイパーリンクに使用されるオブジェクトは、テキストまたは画像です。閲覧者がリンクされたテキストまたは画像をクリックすると、リンク ターゲットがブラウザ上に表示され、ターゲットの種類に基づいて開かれるか実行されます。

ハイパーリンク

<a href="http://www.php.cn/" target="_blank" title="关于div css的网站">DIV+CSS</a>

のコードは次のように分析されます。

href の後にリンクされたアドレスが続き、ターゲット Web サイトのアドレスは http://www.php.cn/

target です

_blank --新しいウィンドウでリンクを開きます

_parent - 親フォームでリンクを開きます

_self - 現在のフォームでリンクを開きます、これがデフォルト値です

_top - 現在のフォームでリンクを開き、現在のフォーム全体を置き換えます(フレーム ページ)

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

CSS はハイパーリンクのスタイルを制御できます - css リンクスタイルは次のとおりです

a:linkはハイパーリンクの初期状態です

a:Hoverはマウスを置いた時のホバーリングの状態です

a:activeはマウスクリックの状態です

a:visitedは状態です訪問後

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 code8248c0085ba6301a1b6c4984f4b0e39aCSS5db79b134e9f6b82c0b36e0489ee08ed

対応するCSSコード

a.yangshi{color:#333;text-decoration:none; }

a.yangshi:hover {color:#CC3300 ;text-decoration:underline;}

この設定を通じて、リンク内の CSS クラス名を制御できます。「yangshi」ハイパーリンクのスタイル

3. CSS クラスの CSS スタイルを通じてハイパーリンクのスタイルを制御します。ハイパーリンクの外側の親に対応します

Case ハイパーリンク コード0a9af51c14cdc756fef819e32a4a19aa0fb5dc1eb35f706b04f8b46adbfdc058CSS5db79b134e9f6b82c0b36e0489ee08ed5db79b134e9f6b82c0b36e0489ee08ed

対応するCSSコード

.yangshi a{color:#333;text-decoration:none; }

.yangshi a:hover {color:#CC3300;text-decoration:underline;}

ここで注目すべき点a.yangshi と .yangshi a のスタイル CSS コードの違いです

ここにハイパーリンク スタイルの共通 CSS があります。必要な友達は設定方法を保存できます。このサイトの他の更新にも引き続き注目してください。

関連書籍:

HTMLが文字化けする理由とその解決方法

DivとCSSを学ぶ方法

CSSで位置を使用する方法

以上がCSS を使用してリンク スタイルを操作する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。