CSSリスト属性では、リスト項目フラグを配置、変更したり、画像をリスト項目フラグとして使用したりできます.

2102 ワード

CSSリスト


ある意味では,記述的なテキストではないいかなる内容もリストと見なすことができる.国勢調査、太陽系、家譜、見学メニュー、さらにあなたのすべての友达はリストやリストのリストとして表すことができます.
リストがこのように多様であるため、リストはかなり重要であるため、CSSではリストスタイルがあまり豊富ではないのは残念なことである.

リストの種類


リストのスタイルに影響を与えるには、フラグのタイプを変更することが最も簡単です(同時にサポートが最も十分です).
たとえば、無秩序なリストでは、リスト・アイテムのフラグ(marker)は、各リスト・アイテムの横に表示される円点です.整列リストでは、フラグは、アルファベット、数値、または他のカウントシステムのシンボルである可能性があります.
リスト・アイテムに使用するフラグ・タイプを変更するには、プロパティlist-style-typeを使用します.
ul {list-style-type : square}

上の宣言は、無秩序リストのリスト項目フラグをブロックに設定します.

リストアイテム画像


通常のマークが足りない場合があります.各フラグに画像を使用したい場合があります.これはlist-style-imageプロパティを使用して行います.
ul li {list-style-image : url(xxx.gif)}

url()値を1つ簡単に使用するだけで、画像をフラグとして使用できます.

リストフラグ位置


CSS2.1リスト・アイテムのコンテンツの外にフラグが表示されるか、コンテンツの内部にフラグが表示されるかを決定できます.これはlist-style-positionを用いて完成した.

簡易リストスタイル


簡単にするために、上記の3つのリストスタイルプロパティを便利なプロパティにまとめることができます:list-style、このようにします.
li {list-style : url(example.gif) square inside}

List-styleの値は任意の順序でリストでき、これらの値は無視できます.1つの値が指定されている限り、他の値はデフォルト値に入力されます.

CSSリストの例:


無秩序リスト内の異なるタイプのリストタグ
この例では、CSSで異なるタイプのリスト項目タグを示します.
順序付きリスト内の異なるタイプのリストアイテムタグ
この例では、CSSで異なるタイプのリスト項目タグを示します.
すべてのリストスタイルタイプ
この例では、CSS内のすべての異なるタイプのリスト項目タグを示します.
画像をリストアイテムとしてマークする
この例では、画像をリスト・アイテムとしてマークする方法を示します.
リストタグの配置
この例では、リストタグをどこに配置するかを示します.
宣言ですべてのリスト属性を定義する
この例では、リストのすべてのプロパティを1つのスケッチプロパティに設定します.
Refre from http://www.w3school.com.cn/css/css_list.asp