CSS a odrážky

Pomocou CSS dokážeme vytvárať efektné nečíslované aj číslované zoznamy. Pracovať budeme s nasledovnými vlastnosťami: list-style-type, list-style-position a list-style-image.

List-style-type

Pri nečíslovaných zoznamoch budeme používať nasledovné typy odrážok:

• disc - kruh v IE a Opere, plný kosoštvorec v Mozille a Netscape;
• circle - kružnica v IE a Opere, prázdny kosoštvorec v Mozille a Netscape;
• square - plný štvorec;
• none - bez odrážky

Pri číslovaných zoznamoch budeme používať nasledovné typy odrážok:

1. decimal - arabské číslice
2. lower-alpha - malé písmená
3. upper-alpha - veľké písmená
4. lower-roman - malé rímske číslice
5. upper-roman - veľké rímske číslice
6. none - bez odrážky

Existujú samozrejme aj ďalšie možnosti, ktoré ale nie sú podporované vo všetkých prehliadačoch. Viac sa dozviete na https://www.w3schools.com/Css/pr_list-style-type.asp.

Úloha:

Vytvorte ľubovoľný číslovaný aj nečíslovaný zoznam, pričom otestujte funkčnosť jednotlivých typov odrážok. Jednotlivé vlastnosti pre odrážky môžete definovať aj v externom súbore style.css, napr.

ul li {list-style-type:circle;}
ol li {list-style-type:upper-roman;}

List-style-position

Máme dve možnosti umiestnenia odrážok: inside (dovnútra textu) a outside (zvonka textu).

• použitie inside
• použitie outside

List-style-image

Táto vlastnosť vám umožní vytvárať obrázkové odrážky. Nezabudnite na veľkosť obrázka, ktorý chcete použiť ako odrážku. Určite by nemal mať rozmery 900x600px :)

Jednoduchý príklad:

Pozor na absolútnu a relatívnu adresu obrázka. Samozrejme odrážku si vytvorte svoju.

• Odrážka v tvare slovenskej vlajky
• A ďalšia odrážka

Úloha:

Vytvorte jednoduchý jedálny lístok, v ktorom použijete vhodné obrázkové odrážky. Samozrejme môžte pridať aj obrázky príslušných jedál.

Ďalší článok - Zahrajme sa s pozadím elementov.