ホームページ > 記事 > ウェブフロントエンド > CSS:list-style-typeの使い方を詳しく解説
この記事では、CSS list-style-type 属性の使用方法を主に紹介します。必要な場合は、オブジェクトの行項目マークの事前定義されたタイプの設定を参照してください。
構文{ list-style-type: sType }
disc
| デフォルト値。しっかりとした円。 |
circle
| 中空の円。 |
10進数
| 1、2、3、4など。 |
下位アルファ
| a、b、c、dなど。 |
下ローマ字
| i、ii、iii、ivなど。 |
none
| マーカーは表示されません。 |
スクエア
| ソリッドスクエア。 |
アッパーアルファ
| A、B、C、Dなど。 |
アッパーローマン
| I、II、III、IVなど。
です。このプロパティは継承されます。 注意事項
list-style-image
属性の値が none に設定されている場合、または URL が指す画像が表示できない場合、list-style-type 属性によって list-item タグの外観が決定されます。 list-style-type 属性は、margin 属性と display
:list-item 属性を適用した後、任意の要素に適用できます。 マージンプロパティのいずれかを使用して行項目の左マージンを 0 に設定すると、リスト項目のマークアップは表示されません。このマージンは少なくとも 30 ポイントに設定する必要があります。 例
次の例では、list-style-type 属性を使用してマークアップを設定します。この例では、UL 要素をインライン (グローバル) スタイル シートのセレクターとして使用して、マークアップ タイプを円に変更します。
<style> ul {list-style-type:circle} </style>
square: 正方形 10 進数: 数値 10 進数-先頭-ゼロ: 10 進数、2 桁未満は先行 0 で埋められます。例: 01、02、03、...、98、99
下位- roman : 小文字のローマ字、例: i、ii、iii、iv、v、...upper-roman: 大文字のローマ字、例: I、II、III、IV、V、...
lower- greek: 小文字のギリシャ文字、例: α(アルファ)、β(ベータ)、γ(ガンマ)、...
lower-latin: 小文字のラテン文字、例: a、b、c、... z
upper -latin: 大文字のラテン語、例: A、B、C、... Z
armenian: アルメニア数字
georgian: グルジア数字、例: an、ban、gan、...、he、tan、in、in -an、.. .
lower-alpha: 小文字のラテン語、例: a、b、c、... z
upper-alpha: 大文字のラテン語、例: A、B、C、... Z
none : なし (すべてのリスト スタイルをキャンセル)
継承: 継承
初期値: disc
継承: is
適用対象: list
list に属するすべての要素、中国語の「リスト」は .style を意味し、中国語の「スタイル」は .type を意味し、中国語の「タイプ」とは、
例
ul { list-style-type:disc; } ul#circle { list-style-type:circle; } ul#square { list-style-type:square; } ul#decimal { list-style-type:decimal; } ul#decimal-leading-zero { list-style-type:decimal-leading-zero; } ul#lower-roman { list-style-type:lower-roman; } ul#upper-roman { list-style-type:upper-roman; } ul#lower-greek { list-style-type:lower-greek; } ul#lower-latin { list-style-type:lower-latin; } ul#upper-latin { list-style-type:upper-latin; } ul#armenian { list-style-type:armenian; } ul#georgian { list-style-type:georgian; } ul#lower-alpha { list-style-type:lower-alpha; } ul#upper-alpha { list-style-type:upper-alpha; } ul#none { list-style-type:none; } ol { list-style-type:lower-roman; }を意味します。
以上がCSS:list-style-typeの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。