Ominaisuus list-style-type

Ominaisuus list-style-type mahdollistaa listalle ul ympyröiden sijasta neliöiden tai ympyröiden tekemisen. Listalle ol tavallisten numeroiden sijasta voidaan tehdä roomalaiset, numeroinnin kirjaimin: latinalaisin tai kreikkalaisin.

Syntaksi

valitsija {
	list-style-type: arvo;
}

Arvot ul:lle

Arvo	Kuvaus
`circle`	Luo merkitsijät pienenä ympyröinä.
`disc`	Luo merkitsijät täytettyinä ympyröinä.
`square`	Luo merkitsijät neliöinä.
`none`	Poistaa merkitsijät.

Oletusarvo: disc.

Arvot ol:lle

Arvo	Kuvaus
`armenian`	Perinteinen armenialainen numerointi.
`decimal`	Arabialaiset numerot.
`decimal-leading-zero`	Arabialaiset numerot nollalla edessä numeroille, jotka ovat pienempiä kuin kymmenen.
`georgian`	Perinteinen georgialainen numerointi.
`lower-alpha`	Pienet latinalaiset kirjaimet.
`lower-greek`	Pienet kreikkalaiset kirjaimet.
`lower-latin`	Tämä arvo on vastaava kuin lower-alpha.
`lower-roman`	Roomalaiset numerot pienillä kirjaimilla.
`upper-alpha`	Isot latinalaiset kirjaimet.
`upper-latin`	Tämä arvo on vastaava kuin upper-alpha.
`upper-roman`	Roomalaiset numerot isoilla kirjaimilla.
`none`	Poistaa merkitsijät.

Oletusarvo: decimal.

Esimerkki

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

ul {
	list-style-type: disc;
}

Esimerkki

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

ul {
	list-style-type: circle;
}

Esimerkki

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

ul {
	list-style-type: square;
}

Esimerkki

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

ul {
	list-style-type: none;
}

Esimerkki

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

ol {
	list-style-type: decimal;
}

Esimerkki

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

ol {
	list-style-type: armenian;
}

Esimerkki

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

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

Esimerkki

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

ol {
	list-style-type: georgian;
}

Esimerkki

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

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

Esimerkki

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

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

Esimerkki

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

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

Esimerkki

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

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

Esimerkki

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

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

Esimerkki

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

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

Esimerkki

Tämä esimerkki osoittaa, että ominaisuus color vaikuttaa paitsi tekstin väriin, myös merkitsijöiden väriin:

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

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

Katso myös

ominaisuus list-style-image,
joka asettaa merkitsijät annettuina kuvina
ominaisuus list-style-position,
joka asettaa merkitsijöiden sijainnin
ominaisuus list-style,
joka on lyhenne merkitsijöille