CSSでハイパーリンクのスタイルを設定する方法

王林
リリース: 2023-01-06 11:15:00
オリジナル
11507 人が閲覧しました

CSS では、疑似クラスを使用してハイパーリンクのスタイルを設定できます。たとえば、未訪問のハイパーリンクのスタイルを設定したい場合、コードは [a:link {color: #FF0000;} ]、訪問したハイパーリンクのスタイルを設定します。リンク スタイル、[a:visited {color: #00FF00;}] などのコード。

CSSでハイパーリンクのスタイルを設定する方法

#この記事の動作環境: Windows10 システム、css 3、thinkpad t480 コンピューター。

ハイパーリンクのスタイルを設定したい場合は、CSS 疑似クラスを通じて行うことができます。以下は CSS 疑似クラスの詳細な紹介です。

疑似クラスは、要素の特別な状態を定義するために使用されます。

たとえば、次の目的で使用できます。

  • マウスが要素上にあるときのスタイルを設定します。

  • 訪問済みです 未訪問のリンクから異なるスタイルを設定します

  • #要素がフォーカスを取得したときにスタイルを設定します
  • #構文:

selector:pseudo-class {
  property: value;
}
ログイン後にコピー

コード例:

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}
ログイン後にコピー

注: a:hover を有効にするには、CSS 定義の a:link および a:visited の後になければなりません。 a:active を有効にするには、CSS 定義の a:hover の後になければなりません。疑似クラス名は大文字と小文字を区別しません。

関連ビデオ共有:

css ビデオ チュートリアル

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート