CSS を使用してリンクされた画像の周囲の青い境界線を削除するにはどうすればよいですか?

ビジュアルのない Web サイトは退屈です。たとえデザインが優れていたとしても、多くの人はグラフィックが豊富な Web サイトを好むでしょう。なぜそうなるのでしょうか?画像は、Web サイトのユーザー エクスペリエンスを向上させるための迅速かつ簡単な方法です。私たちが知覚して脳に送る情報の 90% は視覚的なものです。画像を使用して注意を引き、訪問者の注意を再び集中させることができます。

重要な情報を伝えるときに非常に役立ちます。画像は、訪問者を魅了し、コンテンツを読み続けるために使用できる素晴らしい感情のトリガーです。

CSS を使用すると、これらの画像のスタイルを設定して配置し、素晴らしい視覚効果を作成できます。画像をハイパーリンクとして使用すると、一部の古いブラウザでは画像がデフォルトの青い枠線で表示されます。この記事では、CSSを使用してリンクされた画像の周囲の青い境界線を変更または削除する方法について説明します。

リンク画像とは何ですか?

リンクされた画像は、ハイパーリンクとして機能する Web ページに追加される画像です。ハイパーリンクを作成するには、 要素内に画像を追加する必要があります。 HTML ページに単純なハイパーリンク画像を作成してみましょう。

古いブラウザを使用してリンクされた画像を追加する

古いバージョンのブラウザ (Internet Explorer 6 ～ 8、Firefox 7 など) を使用して画像をハイパーリンクとして追加すると、デフォルトで画像の周囲に青い枠線が表示されます。これは、ハイパーリンク テキストに与えられる効果と似ています。デフォルトでは、ハイパーリンク テキストには青色の下線が引かれ、マウスオーバーでフォントの色が強調表示されます。

＃＃＃例＃＃＃

Internet Explorer 6 を使用して、画像をハイパーリンクとして追加してみましょう。

リーリー

注意

- このプログラムは Internet Explorer 6 で実行してください。そうしないと、他の最新のブラウザを使用している場合、デフォルトの青い境界線が表示されません。 ハイパーリンクされた画像のデフォルトの動作を排除するにはどうすればよいですか?

このデフォルトの動作を排除するには 2 つの方法があります。 1 つの方法は画像から枠線を完全に削除すること、もう 1 つの方法は画像に独自の枠線スタイルを追加することです。ハイパーリンクされた画像をすべて選択するには、CSS セレクターを使用します。

CSSセレクター

CSS セレクター

は、CSS ルールの最初の部分です。これは、(ルールで指定された) CSS プロパティ値を適用できるように、どの要素を選択する必要があるかをブラウザーに伝えるために使用される一連の要素またはその他の用語です。 CSS セレクターを使用すると、開発者は Web ページ内でスタイルを設定する HTML 要素を選択 (または一致) できます。 セレクターにはさまざまな種類があります。それらは次のとおりです -

• 単純なセレクター – 名前、ID、クラスを使用して要素を選択します。

• 複合セレクター – 要素間の関係 (親子関係など) を使用して要素を選択します。

• 擬似要素セレクター – スパンなどの要素の一部を選択します。

• 属性セレクター – 属性または属性値を使用して要素を選択します。

CSS セレクターの例としては、CSS 要素セレクター、CSS グループ セレクター、CSS ID セレクター、CSS ユニバーサル セレクターなどがあります。

ユニバーサルCSSセレクター

CSS アスタリスク (*)

CSS ユニバーサル セレクターとも呼ばれるセレクターは、Web ページ全体のすべての要素または要素の一部を一度に選択または一致させるために使用されます。選択すると、CSS カスタム プロパティを使用して、それに応じてスタイルを設定できます。これは、 、、、

などのあらゆるタイプの HTML 要素に一致します。また、親要素の子要素を選択してスタイルを設定するために使用することもできます。

＃＃＃文法＃＃＃ リーリー 親子セレクターを使用する

このセレクターは、親要素のすべての子孫要素と一致するために使用されます。

＃＃＃文法＃＃＃ リーリー

以下に示すように、CSS 親子セレクターを使用して

border: none

と記述することで、デフォルトの青い境界線スタイルを削除できます -

リーリー ＃＃＃例＃＃＃

例を見てみましょう - リーリー カスタム枠線スタイル ハイパーリンク画像のデフォルトの青い境界線を削除するには、独自の境界線スタイルでオーバーライドします。

リーリー ＃＃＃結論は＃＃＃

この記事では、ハイパーリンク画像の周囲に青い枠線が表示される古いブラウザと、デフォルトの動作を排除する方法について説明します。ただし、Chrome、Edge、Firefox などの最新のブラウザでは、デフォルトでは画像の周囲に境界線が表示されません。

以上がCSS を使用してリンクされた画像の周囲の青い境界線を削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。