CSS タイプの順序を調整してリンクのスクロール効果を変更する_CSS/HTML

通常のリンク (通常)、アクセス、反転、アクティブ化など、リンクごとに異なるスタイルを指定することで CSS スクロール効果を作成できることに気づいたかもしれません。また、CSS タイプの順序によってパフォーマンスに違いが生じる可能性があることもご存知かもしれません。CSS コードのポストオーダー スタイルは、同じ要素のプレオーダー スタイルを置き換えます。ロール エフェクトの種類を作成する順序は非常に重要です。
次に、競合を引き起こすことなく通常のタンブリング効果をサポートするためにリンク状態のタイプを配置する方法と、これらのタイプの順序を並べ替えて異なるタンブリング効果を得る方法を見てみましょう。

リンクステータス

一般的な CSS スクロール効果は、ハイパーリンク内の 4 つの状態のいずれかの独立したタイプに依存します。 (ハイパーリンク) タイプは、リンク状態を指定する CSS プリクラスを使用して作成できます:

a:link - 通常のアクセスできないハイパーリンク

a:visited——訪問済みハイパーリンク

a:hover - 訪問者が

にマウスを移動したときのリンク

a:active—リンクをクリックします

一般的な CSS スクロール効果が適切に機能するためには、外部タイプ テーブルであっても、HIML ページのタイトル バーに埋め込まれたタイプ ルールであっても、CSS コード内の CSS タイプの順序が非常に重要です。

a:link タイプはすべてのリンクに適用できるため、最も早く表示されます。 a:visited タイプは 2 番目にあり、リンクの a:link 形式を置き換えます。 (a:link タイプの後に a:visited が続く場合、a:link は a:visited タイプを置き換えることができます。) a:hover タイプの後にこのタイプを使用するのは、マウス下のリンクにアクセスする場合のみです。最後に、a:active があるため、リンクをクリックすると、他のすべてのタイプが置き換えられます。

a:link {

カラー: #0000FF;

テキスト装飾: 下線;

フォントの太さ: 標準;

フォント スタイル: 標準;

}

a:訪問しました {

カラー: #3399FF;

テキスト装飾: 下線;

背景色: #FFFFFF;

フォントの太さ: 標準;

フォント スタイル: イタリック;

}

a:ホバー {

カラー: #0000FF;

テキスト装飾: 下線;

背景色: #FFFF00;

フォントの太さ: 太字;

フォント スタイル: 標準;

}

a:アクティブ {

色: #FF0000;

テキスト装飾: なし;

背景色: #CCCCCC;

フォントの太さ: 太字;

フォント スタイル: 標準;

}

CSS コード内の型の順序によって、各型が他の型をどのように置き換えるかが決まります。つまり、より多くの型を特定の要素に適用できるようになります。通常、a:hover タイプは a:link および a:visited タイプの後に来るため、ホバー状態タイプは通常のリンクと訪問済みリンクの両方に適用できます。ただし、このようにする必要はありません。タイプの順序を変更して、さまざまな効果を得ることができます。

未訪問のリンクにスクロール効果を使用したいが、他の訪問済みリンクには影響を与えたくない場合、この外観の変更をコードで処理することを考えるかもしれませんが、しなければならないのは再編成することです。 CSSコード。

訪問済みリンクからのスクロール効果の削除は、a:visited タイプを削除することで簡単に行うことができます。

a:visited タイプには、a:hover と同じ属性をすべて指定するためのルールが含まれていることに注意してください。それ以外の場合、訪問者のマウスが訪問リンクを通過すると、a:visited によって置き換えられないすべての a:hover タイプ属性が使用されます。タイプは今後も再登場します。

出典: Web Teaching Network