CSSページレイアウト（リスト形式）に関する常識まとめ

CSS には多くの知識があり、すべてを覚えるのは不可能です。暇なときに、CSS ページ レイアウトに関する一般的な知識をまとめました。この記事では、CSS リスト スタイルに関する一般的な知識を紹介します。困っている友達は参考にしていただければ幸いです。

1. 順序なしリスト

順序なしリストとは、リストの記号が数字ではなくドットまたはその他のグラフィックであることを意味します。順序なしリストの構文は次のとおりです。

<ul>
    <li>**</li>
    <li>**</li>
    ......
</ul>

ul の機能は、それに含まれるリストが順序なしリストであることを示し、li の各グループはリスト項目を含めるために使用されます。

2. 順序付きリスト

順序付きリストのリスト記号は数字です。順序付きリストの構文は次のとおりです。

<ol>
    <li>**</li>
    <li>**</li>
    ......
</ol>

ol の機能は、それに含まれるリストが順序付きリストであることを示すことであり、li の各グループはリスト項目を含めるために使用されます。

3. 定義リスト

定義リストが使用されることはほとんどありません。

<dl>
   <dt>
      <dd>**</dd>
   </dt>
   ......
</dl>

dl の機能は、それを示すことです。リストは定義のリストです。一般に、dt は概念を定義し、dd は概念の説明です。

4. リスト シンボルのスタイルを変更する

CSS には、リスト シンボルのスタイルを変更するための list-style-type、list-style-image、および list-style-position 属性が用意されています。リストシンボルのスタイル。

組み込みのリスト シンボルを使用します。

構文:

list-style-type：type;

type=none の場合、リストにはリスト シンボルがありません。一般的に使用されるタイプは次のとおりです。

square (黒の正方形)

disc (黒の円)

cicle (中空の円)

10 進数 (アラビア数字)

lower-roman (小文字のローマ字)

upper-roman (大文字のローマ字)

背景画像をリスト記号として使用します

必要に応じて、場合によっては、リスト シンボルをより小さな画像に置き換えることができます。構文は次のとおりです。

list-style-image：url(picture.png);

リスト シンボルの位置を変更する

リスト シンボルは、テキスト内またはテキスト コンテンツの外に埋め込むことができます。構文は次のとおりです:

list-style-position：inside/outside;

リスト属性の省略形

次のコード:

list-style-image：url(picture.png);
list-style-position：inside/outside;

は次のように省略できます:

list-style: url(picture.png) inside/outside;

注: 一般に、 list-style-type と list-style-image は、後者が前者をオーバーライドするため、同時に使用することはできません。

以上がCSSページレイアウト（リスト形式）に関する常識まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。