ホームページ  >  記事  >  ウェブフロントエンド  >  CSS:list-style-typeの使い方を詳しく解説

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

黄舟
黄舟オリジナル
2018-05-23 16:03:165909ブラウズ

この記事では、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>

list-style-type -- リスト スタイルを定義します。平方 | 10 進数 | ローマ字 | ラテン語 | アルファ | Circle: 円

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。