@counter スタイルのルールを使用して CSS を使用してリスト項目をカスタマイズするにはどうすればよいですか?

リストは Web 開発の重要な部分であり、情報を組織的かつ構造的に提示するために使用されます。 HTML には、順序付きリスト、順序なしリスト、定義リストの 3 種類のリストがあります。ただし、要件に従ってリストを設計する必要がある場合、これらのリストのスタイルを設定するのは難しい場合があります。 CSS は @counter スタイル ルールを提供しており、これによりリスト項目のマークアップをより柔軟かつ創造的な方法でカスタマイズできます。

この記事では、@counter スタイルのルールを使用して、CSS を使用してリスト項目をカスタマイズする方法を学びます。 @counter-style ルールは、事前定義されたスタイル セットの一部ではないカウンター スタイルを定義するために使用され、カウンター値が文字列表現に変換される方法を定義します。

@カウンタースタイルとは何ですか?

@counter-style ルールは、CSS カウンター プロパティと組み合わせて使用​​できるカウンター スタイルを定義するために使用されます。このルールは、カスタム リスト項目マーカー スタイルを定義するために使用されます。カウンター プロパティを使用すると、増加または減少できます。 :before や :after などの疑似要素のコンテンツを生成するために使用されるカウンター。 ＃＃＃文法＃＃＃ リーリー

name パラメーターは、定義しているカウンター スタイルの名前を指定するために使用されます。中括弧内で、カウンターの外観を制御するプロパティと値のセットを定義できます。 include −

を使用できます

System
• -10 進数、小文字、大文字のローマ数字など、使用する番号付けシステムを指定します。

Symbol
• - カウンタの各レベルに使用されるシンボルを指定します。

Suffix
• -カウンター値の後に追加されるサフィックスを指定します。

Prefix
• -カウンター値の前に追加するプレフィックスを指定します。

Pad
• -カウンター値を表示するときに使用する最小桁数を指定します。
  CSS で @counter-styles ルールを使用する手順

CSS で @counter-styles ルールを使用する手順は次のとおりです -

ステップ 1: 順序付きリストを作成する

最初のステップは、順序付きリストを作成し、独自のリスト項目タグを使用してカスタマイズすることです。以下の例では、デフォルトの番号付けシステムの代わりにローマ数字を使用します。以下はリストの HTML コードです −

リーリー

ステップ 2: @counter スタイルを定義する

リーリー

上記のコードでは、my-numerals という名前のカウンター スタイルを定義し、システム プロパティを upper-roman に設定しています。これは、カウンターがリスト内で大文字のローマ数字を使用するように設定されることを意味します。また、シンボルのプロパティを I から X までのローマ数字の文字列に設定します。

ステップ 3: CSS スタイル

リーリー

上記のコードでは、counter-reset 属性が ol 要素のセクションに設定されています。これは、カウンターが 0 から開始することを意味します。ここでは、各 li 要素のセクションの counter-increment 属性も設定します。

例 1

は次のように翻訳されます:

例 1

リーリー

上の例では、@counter-style ルールを使用して my-roman という名前のカスタム カウンター スタイルを定義しました。ここでは、大文字のローマ数字を使用するためにシステム プロパティを upper-roman に設定し、シンボルのプロパティを I から X までのローマ数字の文字列にします。

この後、counter-reset 属性を使用してカスタム カウンタ スタイルを順序付きリストに適用し、counter-increment 属性を使用して各リスト項目のカウンタをインクリメントし、list-style 属性の項目タグを使用してデフォルトのリストを削除しました。 。

最後に、ローマ数字を使用してカスタム リスト項目マークアップを表示するには、content 属性と counter 関数 (カウンターの名前 (この場合はセクション) の 2 つのパラメーターを受け取ります) を介して :before 疑似要素を使用します。およびカウンタのスタイル名 (この場合はローマ数字))。

例 2

の中国語訳は次のとおりです:

例 2

リーリー

上記の例では、list-style 属性を使用して、順序なしリスト要素のデフォルトのリスト項目マークアップを削除しました。さらに、:before 擬似要素も使用して、content 属性と空の文字列を利用してリスト項目を表示します。

画像が正しく表示されるように表示属性を inline-block に設定し、幅と高さの属性をマーカー画像のサイズに設定しました。タグ付けされた画像の URL を指定するには、background-image 属性を使用し、画像の重複を防ぐために、background-repeat 属性を使用します。最後に、margin-right プロパティを使用して画像の右側にマージンを追加しました。

＃＃＃結論＃＃＃

HTML リストを扱う場合、CSS で @counter-style ルールを使用してリスト項目タグの外観をカスタマイズできます。このルールは、順序付きリストのカスタム スタイルを定義する簡単かつ柔軟な方法を提供します。 @counter スタイルのルールの構文には、システム、シンボル、サフィックス、プレフィックス、パッドなどのいくつかのパラメーターが含まれています。これらのパラメータを使用すると、リスト項目マーカーの外観を変更できます。 @counter スタイル ルールを使用すると、現在のプロジェクト設計のニーズに合ったリスト項目マークアップを簡単に作成できます。

以上が@counter スタイルのルールを使用して CSS を使用してリスト項目をカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。