Tvorba webu » CSS » Seznamy v CSS

Seznamy v CSS

Pomocí CSS lze seznamům (elementy ul, ol a li) nastavit typ a umístění odrážek. Místo odrážky lze zvolit také obrázek.

Detailní popis všech vlastností seznamů je spolu s klasifikačními vlastnostmi shrnut v přehledných tabulkách.

List-style-type

Vlastnost list-style-type nastavuje typ odrážek v seznamu (kolečko, čtverec, kruh, velké římské číslice)

Hodnoty:

• disc - kolečko
• circle - kruh
• square - čtverec
• decimal - číslo
• lower-roman - římské číslice malými písmeny
• upper-roman - římské číslice velkými písmeny
• lower-alpha - abecedně malými písmeny a b c...
• upper-alpha - abecedně velkými písmeny A B C...
• none - bez odrážky

Podle příkladu se všechny seznamy ul zobrazí s velkými římskými číslicemi.

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

List-style-position

Vlastnost list-style-position určuje umístění odrážky. Odrážka může být před textem nebo uvnitř položky seznamu.

Hodnoty:

• inside - odrážka v textu položky seznamu
• outside - odrážka před textem

Podle příkladu bude odrážka uvnitř položky seznamu.

ul{ list-style-position : inside; }

List-style-image

Pomocí vlastnosti list-style-image lze místo obyčejné odrážky vložit obrázek.

Hodnoty:

• URL - cesta k obrázku
• none - bez obrázku

Podle následujícího příkladu se namísto odrážky zobrazí obrázek.

ul{ list-style-image : url(w3/logo.gif); }

List-style

Sdružená vlastnost list-style umožňuje ve zkráceném zápisu nastavit vlastnosti list-style-type, list-style-image a list-style-position. Lze je pomocí ní zapsat ve zkráceném tvaru.

Příklad zkráceného zápisu:

ul{ list-style : square inside none; }

Jako odrážka se použije čtverec, který bude umístěn uvnitř položky seznamu, a obrázek se nepoužije.

Reklama