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 codeCSS

対応するCSSコード

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

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

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

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

Case ハイパーリンク コード

< a href="http://www.php.cn/">CSS

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

関連ラベル：

css スタイル

ソース：php.cn

前の記事：HTMLスクロールバーのスタイル設定 次の記事：HTMLでのbrの使い方

このウェブサイトの声明

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

著者別の最新記事

• 最新の PHP Programmer Toolbox v1.0 バージョンの紹介
  2018-06-11 11:57:34
• vue.js ルーティングの失敗に対処する方法
  2018-06-15 15:55:18
• js を使用してデータベースを解析する方法 (コード付き)
  2018-06-15 15:49:00
• js を使用してプロジェクト内の DOM イベントをバインドする方法
  2018-06-15 15:46:15
• JS文字列と特殊文字の操作方法
  2018-06-15 15:42:38
• プロジェクト内の jQuery 内で各メソッドを使用する方法
  2018-06-15 15:40:34
• jqueryを使用してファイルをアップロードする方法
  2018-06-15 15:39:32
• JSプロトタイプとプロトタイプチェーンの使い方
  2018-06-15 15:37:14
• Angular CLI+Angular 5 の実践的なプロジェクトのデモンストレーション
  2018-06-15 15:34:21
• jQueryを使用してノード要素を置き換えます（コードは添付されています）
  2018-06-15 15:22:51

最新の問題

WordPress 6.0 (add_editor_style) が Gutenberg エディターで style.css を読み込まない カスタムWordPressブロックテーマを作成するためにUdemyWordPressコースを受講しています。 function.php にブロック タイプが正常に登録され、Gute...

から 2023-11-12 20:37:50

0

2

261

CSS の小数点の先頭のゼロが大きな数値では機能しない 最近、100 を超えるリスト項目を含む順序付きリストを作成したときに問題が発生しました。 list-style:10 進数先頭ゼロ;ol{list-style:10 進数先頭ゼロ;...

から 2023-11-07 10:35:53

0

1

236

Sass エラー: ファイルはすでにロードされています: @import '~src/css/quasar.variables.scss', 'quasar/src/css/variables.sass'; src\css\quasar.variables.scss 私は quasar フレームワークを使用しており、プロジェクトのコンパイル中に上記のエラーが発生しました。モジュールのビルドに失敗しました (./node_modules/sass...

から 2023-11-06 21:38:55

0

1

219

HTML/CSSに背景ビデオを埋め込むにはどうすればよいですか? 皆さん、こんにちは。最近問題が発生しました。自分のサイトにビデオの背景を設定しようとしていますが、中央揃えのテキストが一番下まで表示されます。理由はわかりませんが、ナビゲーション ...

から 2023-11-06 13:59:13

0

1

240

JavaScriptでCSS/HTMLの名前付きcolorのRGB値を取得する方法 [name-rgb] という名前の Javascript オブジェクトを作成しました。 Basic:namedColors={AliceBlue:[240,248,255],Ant...

から 2023-11-06 09:05:50

0

2

210

関連トピック

詳細>

• css
• CSS中心
• CSSに画像を挿入する方法
• CSSが表示を超えています...
• CSSフォントの色
• CSSとは何ですか
• CSSで三角形を書く方法
• CSSで文字の色を設定する