CSS：list-style-typeの使い方を詳しく解説-CSSチュートリアル-php.cn

CSS：list-style-typeの使い方を詳しく解説

黄舟

リリース： 2018-05-23 16:03:16

オリジナル

6149 人が閲覧しました

この記事では、CSS list-style-type 属性の使用方法を主に紹介します。必要な場合は、オブジェクトの行項目マークの事前定義されたタイプの設定を参照してください。

構文

{ list-style-type: sType }

ログイン後にコピー

可能な値

sType

次の値のいずれかを指定する
string
:

デフォルト値。しっかりとした円。中空の円。 1、2、3、4など。 a、b、c、dなど。 i、ii、iii、ivなど。マーカーは表示されません。ソリッドスクエア。 A、B、C、Dなど。 I、II、III、IVなど。このプロパティのデフォルト値は

disc
circle
10進数
下位アルファ
下ローマ字
none
スクエア
アッパーアルファ
アッパーローマン

disc

です。このプロパティは継承されます。 注意事項
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 サイトの他の関連記事を参照してください。