A list-style-type tulajdonság

A list-style-type tulajdonság lehetővé teszi, hogy a ul lista esetén a pont jelölők helyett négyzeteket vagy köröket használjunk. A ol lista esetén a szokásos számok helyett római számokat, betűkkel való számozást használhatunk: latin vagy görög betűkkel.

Szintaxis

szelektor {
	list-style-type: érték;
}

Értékek ul-hoz

Érték	Leírás
`circle`	Kör alakú jelölőket hoz létre.
`disc`	Kitöltött kör alakú jelölőket hoz létre.
`square`	Négyzet alakú jelölőket hoz létre.
`none`	Eltávolítja a jelölőket.

Alapértelmezett érték: disc.

Értékek ol-hoz

Érték	Leírás
`armenian`	Hagyományos örmény számozás.
`decimal`	Arab számok.
`decimal-leading-zero`	Arab számok, nullával az elején a tíznél kisebb számokhoz.
`georgian`	Hagyományos grúz számozás.
`lower-alpha`	Kisbetűs latin betűk.
`lower-greek`	Kisbetűs görög betűk.
`lower-latin`	Ez az érték megegyezik a lower-alpha értékkel.
`lower-roman`	Római számok kisbetűkkel.
`upper-alpha`	Nagybetűs latin betűk.
`upper-latin`	Ez az érték megegyezik az upper-alpha értékkel.
`upper-roman`	Római számok nagybetűkkel.
`none`	Eltávolítja a jelölőket.

Alapértelmezett érték: decimal.

Példa

<ul>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
</ul>

ul {
	list-style-type: disc;
}

Példa

<ul>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
</ul>

ul {
	list-style-type: circle;
}

Példa

<ul>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
</ul>

ul {
	list-style-type: square;
}

Példa

<ul>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
</ul>

ul {
	list-style-type: none;
}

Példa

<ol>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
</ol>

ol {
	list-style-type: decimal;
}

Példa

<ol>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
</ol>

ol {
	list-style-type: armenian;
}

Példa

<ol>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
</ol>

ol {
	list-style-type: decimal-leading-zero;
}

Példa

<ol>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
</ol>

ol {
	list-style-type: georgian;
}

Példa

<ol>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
</ol>

ol {
	list-style-type: lower-alpha;
}

Példa

<ol>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
</ol>

ol {
	list-style-type: lower-greek;
}

Példa

<ol>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
</ol>

ol {
	list-style-type: lower-latin;
}

Példa

<ol>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
</ol>

ol {
	list-style-type: lower-roman;
}

Példa

<ol>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
</ol>

ol {
	list-style-type: upper-alpha;
}

Példa

<ol>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
</ol>

ol {
	list-style-type: upper-roman;
}

Példa

Ez a példa azt mutatja, hogy a color tulajdonság nem csak a szöveg színére, hanem a jelölők színére is hatással van:

<ul>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
	<li>listaelem</li>
</ul>

ul {
	list-style-type: disc;
	color: red;
}

Lásd még

a list-style-image tulajdonság,
amely megadott képeket állít be jelölőkként
a list-style-position tulajdonság,
amely a jelölők pozícióját határozza meg
a list-style tulajdonság,
amely a jelölőkre vonatkozó rövidítés