Vlastnosť list-style-type

Vlastnosť list-style-type umožňuje pre zoznam ul namiesto značiek-bodiek vytvoriť štvorce alebo kružnice. Pre zoznam ol namiesto obyčajných číslic je možné vytvoriť rímske, číslovanie v podobe písmen: latinských alebo gréckych.

Syntax

selektor {
	list-style-type: hodnota;
}

Hodnoty pre ul

Hodnota	Popis
`circle`	Vytvára značky v podobe krúžkov.
`disc`	Vytvára značky v podobe vyplnených krúžkov.
`square`	Vytvára značky v podobe štvorčekov.
`none`	Odstraňuje značky.

Predvolená hodnota: disc.

Hodnoty pre ol

Hodnota	Popis
`armenian`	Tradičné arménske číslovanie.
`decimal`	Arabské čísla.
`decimal-leading-zero`	Arabské čísla s nulou vpredu pre číslice menšie ako desať.
`georgian`	Tradičné gruzínske číslovanie.
`lower-alpha`	Malé latinské písmená.
`lower-greek`	Malé grécke písmená.
`lower-latin`	Táto hodnota je analogická k lower-alpha.
`lower-roman`	Rímske čísla v dolnom registri.
`upper-alpha`	Veľké latinské písmená.
`upper-latin`	Táto hodnota je analogická k upper-alpha.
`upper-roman`	Rímske čísla v hornom registri.
`none`	Odstraňuje značky.

Predvolená hodnota: decimal.

Príklad

<ul>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
</ul>

ul {
	list-style-type: disc;
}

Príklad

<ul>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
</ul>

ul {
	list-style-type: circle;
}

Príklad

<ul>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
</ul>

ul {
	list-style-type: square;
}

Príklad

<ul>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
</ul>

ul {
	list-style-type: none;
}

Príklad

<ol>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
</ol>

ol {
	list-style-type: decimal;
}

Príklad

<ol>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
</ol>

ol {
	list-style-type: armenian;
}

Príklad

<ol>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
</ol>

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

Príklad

<ol>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
</ol>

ol {
	list-style-type: georgian;
}

Príklad

<ol>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
</ol>

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

Príklad

<ol>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
</ol>

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

Príklad

<ol>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
</ol>

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

Príklad

<ol>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
</ol>

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

Príklad

<ol>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
</ol>

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

Príklad

<ol>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
</ol>

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

Príklad

Tento príklad ukazuje, že vlastnosť color ovplyvňuje nielen farbu textu, ale aj farbu značiek:

<ul>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
	<li>položka zoznamu</li>
</ul>

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

Pozrite tiež

vlastnosť list-style-image,
ktorá nastavuje značky v podobe zadaných obrázkov
vlastnosť list-style-position,
ktorá nastavuje pozíciu značiek
vlastnosť list-style,
ktorá je skratkou pre značky