変更するCSSタイプの順序を調整する
通常のリンク (通常)、アクセス、反転、アクティブ化など、リンクごとに異なるスタイルを指定することで 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) に注目してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック

ブートストラップリストのデフォルトスタイルは、CSSオーバーライドで削除できます。より具体的なCSSルールとセレクターを使用し、「近接原理」と「重量原理」に従って、ブートストラップのデフォルトスタイルをオーバーライドします。スタイルの競合を避けるために、よりターゲットを絞ったセレクターを使用できます。オーバーライドが失敗した場合は、カスタムCSSの重量を調整します。同時に、パフォーマンスの最適化に注意を払い、重要な!の過剰使用を避け、簡潔で効率的なCSSコードを書いてください。

ブートストラップフレームワークを作成するには、次の手順に従ってください。CDN経由でブートストラップをインストールするか、ローカルコピーをインストールします。 HTMLドキュメントを作成し、ブートストラップCSSを< head>にリンクしますセクション。 bootstrap javascriptファイルを< body>に追加するセクション。ブートストラップコンポーネントを使用して、ニーズに合わせてスタイルシートをカスタマイズします。

ブートストラップボタンの使用方法は?ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ファイルアップロード機能は、Bootstrapを介して実装できます。手順は次のとおりです。BootstrapCSSおよびJavaScriptファイルを紹介します。ファイル入力フィールドを作成します。ファイルアップロードボタンを作成します。ファイルのアップロードを処理します(FormDataを使用してデータを収集し、サーバーに送信します)。カスタムスタイル(オプション)。

Bootstrapを使用してWebサイトをレイアウトするには、グリッドシステムを使用してページをコンテナ、行、列に分割する必要があります。最初にコンテナを追加し、その中の行を追加し、行内の列を追加し、最後に列にコンテンツを追加します。ブートストラップのレスポンシブレイアウト関数は、ブレークポイント(XS、SM、MD、LG、XL)に従ってレイアウトを自動的に調整します。レスポンシブクラスを使用することで、異なる画面サイズの下の異なるレイアウトを実現できます。

ブートストラップの日付を確認するには、次の手順に従ってください。必要なスクリプトとスタイルを紹介します。日付セレクターコンポーネントを初期化します。 Data-BV-Date属性を設定して、検証を有効にします。検証ルール(日付形式、エラーメッセージなどなど)を構成します。ブートストラップ検証フレームワークを統合し、フォームが送信されたときに日付入力を自動的に検証します。
