Tvorba webu » CSS » Seznamy v CSS

Seznamy v CSS

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

Detailní popis všech vlastností seznamů je shrnut spolu s klasifikačními vlastnostmi 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í 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 v textu seznamu.

Hodnoty:

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

Podle příkladu bude odrážka v textu 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 vlastností: list-style-type, list-style-image a list-style-position dají se 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 bude umístěn v textu položky seznamu a bez obrázku.

Reklama