Home >> CSS návod >> CSS Seznamy

CSS Seznamy

V této lekci se naučíme upravovat HTML seznamy pomocí CSS.

Typ seznamu

V CSS existuje seznam typů seznamů. Každý seznam ma jiný vzhled. Vzhled seznamu se určí pomocí atributu list-style.

Příklad seznamu:


<ul style="list-style:square;">

<li>Položka seznamu 1</li>

<li>Položka seznamu 2</li>

<li>Položka seznamu 3</li>

</ul>

Výsledek:

Položka seznamu 1
Položka seznamu 2
Položka seznamu 3

Možné hodnoty atributu list-style:

* disc
* circle
* square
* decimal
* decimal-leading-zero
* lower-roman
* upper-roman
* lower-greek
* lower-alpha
* lower-latin
* upper-alpha
* upper-latin
* hebrew
* armenian
* georgian
* cjk-ideographic
* hiragana
* katakana
* hiragana-iroha
* katakana-iroha
* inherit

Obrázek jeko odrážka v seznamu

Pro odrážku v seznamu můžete také použít malý obrázek pomocí atributu list-style-image a adresy příslušného obrázku.


<ul style="list-style-image:url(http://www.klikzone.cz/obrazky/star.gif);">

<li>Položka seznamu 1</li>

<li>Položka seznamu 2</li>

<li>Položka seznamu 3</li>

</ul>

Výsledek:

Položka seznamu 1
Položka seznamu 2
Položka seznamu 3

Pozice seznamu

Pozice seznamu se určí pomocí atributu list-style-position, který nabývá hodnoty inside nebo outside.


<ul style="list-style-position:outside;">

<li>Položka seznamu 1</li>

<li>Položka seznamu 2</li>

<li>Položka seznamu 3</li>

</ul>

<ul style="list-style-position:inside;">

<li>Položka seznamu 1</li>

<li>Položka seznamu 2</li>

<li>Položka seznamu 3</li>

</ul>

Výsledek:

Položka seznamu 1
Položka seznamu 2
Položka seznamu 3

Položka seznamu 1
Položka seznamu 2
Položka seznamu 3

Zkratka kódu

Příklad:


<ul style="list-style:circle inside;">

<li>Položka seznamu 1</li>

<li>Položka seznamu 2</li>

<li>Položka seznamu 3</li>

</ul>

Výsledek:

Položka seznamu 1
Položka seznamu 2
Položka seznamu 3

Další lekce >>

<< Předchozí lekce