ホームページ  >  記事  >  ウェブフロントエンド  >  変更するCSSタイプの順序を調整する

変更するCSSタイプの順序を調整する

黄舟
黄舟オリジナル
2016-12-15 13:44:591495ブラウズ

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

ここで、競合を引き起こすことなく通常のタンブリング効果をサポートするためにリンク状態のタイプを配置する方法と、これらのタイプの順序を並べ替えて異なるタンブリング効果を得る方法を見てみましょう。

リンク状態

典型的な CSS スクロール効果は、ハイパーリンク内の 4 つの状態のうちの 1 つの個別のタイプに依存します。 CSS プリクラスを使用して (ハイパーリンク) タイプを作成して、リンク ステータスを指定できます:

a:link - 通常の非訪問ハイパーリンク

a:visited - 訪問ハイパーリンク

a:hover - 訪問者のアクション マウスが通過したときのリンクover

a:active - リンクをクリックしてください

典型的な CSS スクロール効果を適切に機能させるには、CSS コード内の CSS タイプの順序が非常に重要です。CSS コードが外部タイプ テーブルであるか、HIML タイプに埋め込まれているかに関係なく、ページのタイトルバーのルール。

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

CODE:

以下は引用です:
a:link {
color: #0000FF;
font-weight:normal;
font-style:normal;
a:visited {
色: #3399FF;
背景色: #FFFFFF; フォント スタイル: 斜体;
色: #0000FF;下線;
背景色: #FFFF00; フォントスタイル: 標準;
色: #FF0000;
font-weight:bolold;
font-style:normal;
}


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

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

訪問済みリンクからスクロール効果を削除するには、a:visited タイプを削除するだけです。

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

上記は、CSS タイプの順序を調整してリンク状態を変更する内容です。その他の関連記事については、PHP 中国語 Web サイト (www.php.cn) に注目してください。


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