CSSを使用して注文されたリストをスタイリングする方法

CSSを使用して、順序付けられたリストのスタイルを完全に制御します。 1.リストスタイルタイプの属性を使用して、小数、下部アルファ、アッパーアルファ、ロワーローマン、アッパーローマンなどの番号付きスタイルを変更します。 2。CSSカウンターを使用して、番号付け後のシンボルや太字のディスプレイの追加など、高度なカスタマイズを実現します。 3.パディングとマージンを使用して、リスト項目の間隔とレイアウトを制御します。 4.ネストされたリストを使用して、10進数、ol ol ol ol ol ol ol ol ol ol ol ol ol olなどのレイヤーごとに異なるスタイルのレイヤーを設定して、階層構造を形成します。これらの方法により、設計ニーズを満たし、クロスブラウザーの一貫性を維持するために、順序付けられたリストを作成できます。

CSSを使用した順序付けられたリストのスタイルは簡単で、数字とリストの項目がどのように表示されるかを完全に制御できます。デフォルトでは、注文されたリスト（ <ol></ol> ）は、単純なシーケンス（1、2、3など）で番号を表示しますが、番号付けスタイル、間隔、アライメントなどをカスタマイズできます。

list-style-typeで数字スタイルを変更します

list-style-typeプロパティを使用して、リストマーカー（数値）が表示される方法を変更できます。一般的なオプションは次のとおりです。

• decimal - 標準番号（1、2、3） - これはデフォルトです
• lower-alpha - 小文字（a、b、c）
• upper-alpha - 大文字（a、b、c）
• lower-roman - 小文字ローマ数字（I、II、III）
• upper-roman - 大文字ローマ数字（I、II、III）

 ol {
  リストスタイルタイプ：アッパーローマン。
}

これにより、I、II、IIIなどとしてリストが表示されます。

CSSカウンターでカウンターをカスタマイズする（高度なスタイル化）

プレフィックスの追加、カスタムフォーマット、ネストされたリストスタイルなど、さらに制御するには、CSSカウンターを使用します。

例：数字の後の期間を追加して太字にします。

 ol {
  カウンターリセット：セクション。
  リストスタイル：なし;
}

ol li {
  カウンターインクリメント：セクション;
}

ol li :: before {
  コンテンツ：カウンター（セクション） "。";
  font-weight：bold;
  マージン右：8px;
}

この方法では、テキストやシンボルを組み合わせるなど、数値の外観を完全にカスタマイズできます。

間隔とレイアウトを制御します

デフォルトでは、ブラウザはマージンとパディングを<ol>に適用します。デザインに合わせてこれらを調整できます。

 ol {
  パディング左：20px;
  マージンボトム：20px;
}

ol li {
  マージン：10px 0;
  ラインハイト：1.5;
}

padding-leftを使用して、数字とテキストの間のスペースを制御します。マーカーを誤って調整できるため、 li要素にmargin-leftを使用しないでください。

ネストされたリストスタイリング

注文されたリスト内の注文リストには、異なるスタイルを持つことができます。このようなネストされたレベルをターゲットにすることができます。

 ol {
  リストスタイルタイプ：小数。
}

ol ol {
  リストスタイルタイプ：低アルファ;
}

ol ol {
  List-Style-Type：Lower-Roman;
}

これにより、階層が作成されます：1→a→iは、概要や法的文書に最適です。

基本的に、 list-style-type 、 CSS counters 、適切な間隔を使用すると、任意のデザインに一致するように順序付けられたリストを作成できます。ブラウザ全体で読みやすさと一貫性をテストすることを忘れないでください。

以上がCSSを使用して注文されたリストをスタイリングする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。