18. diel - Zoznamy v CSS 3

V minulej lekcii, Pozadia elementov - veľkosť, pozícia a prichytenie v CSS 3 , sme sa naučili ako u pozadí elementov nastaviť veľkosť, pozíciu, prichytenie a prípadne opakovania.

Vitajte u ďalšej lekcie ohľadom nastavenia v CSS 3, v ktorej si ukážeme, ako nastaviť vlastné vzhľady zoznamov a ako pracovať s ich vlastnosťami. V tejto lekcii si urobíme základ navigačnej lišty:

Vlastnosť list-style

Pomocou CSS 3 vlastnosti list-style nastavujeme štýl odrážok zoznamov. Vlastnosť je zhrnutím a umožňuje nastaviť 3 vlastnosti odrážok a to typ, pozíciu a obrázok.

Syntax CSS 3 vlastnosti list-style je nasledovné:

list-style: typ pozice obrázek;

Pre každú zložku odrážok existuje zvlášť CSS vlastnosť, ktorá ju nastavuje. Sú to:

• list-style-type - Nastavenie typu odrážok
• list-style-position - Nastavenie pozície odrážok
• list-style-image - Nastavenie obrázka odrážok

Ako hodnotu môžeme uviesť aj inherit, tým zdedíme vlastnosť list-style od rodičovského elementu. Vytvoríme si teda v našom HTML dokumente nový list pomocou <ul> a <li> tagov:

<ul>
    <li><a href="uvod">Úvod</a></li>
    <li><a href="clanky">Články</a></li>
    <li><a href="o-nas">O nás</a></li>
    <li><a href="kontakt">Kontakt</a></li>
    <li><a href="pobocky">Pobočky</a></li>
</ul>

Vzhľad odrážok zoznamu

Teraz môžeme náš zoznam upraviť pomocou CSS. Najskôr sa pozrieme na prednastavené typy, ktoré možno jednoducho použiť. Ak by sme chceli nastaviť iba typ, použijeme vlastnosť list-style-type. Vyberať vzhľad môžeme z nasledujúcej tabuľky:

• disc - (predvolené) - Vyplnený kruh
• none - Bez odrážok
• circle - Kruhové
• square - Štvorcové
• decimal - Číslované
• decimal-leading-zero - Číslované na 2 miesta (pred čísla menšie ako 10 pridá nulu)
• lower-alpha - Malé písmená latinskej abecedy
• lower-greek - Malé písmená gréckej abecedy
• lower-latin - Malé písmená latinskej abecedy
• lower-roman - Rímske číslice malými písmenami
• upper-alpha - Veľké písmená latinskej abecedy
• upper-greek - Veľké písmená gréckej abecedy
• upper-latin - Veľké písmená latinskej abecedy
• upper-roman - Grécke číslice veľkými písmenami
• armenian - arménsky číslica
• cjk-ideographic - ideografickom číslica
• georgian - Gregorovej číslica
• hebrew - Hebrejské číslica
• inherit - Zdedí typ odrážok od rodičovského elementu

Pre všetky elementy s tagom ul nastavíme teda miesto bodiek treba čísla:

ul {
  list-style-type: decimal;
}

výstup:

Alebo môžeme použiť napríklad veľké grécke číslice:

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

Ak sa nám nepáči žiadne z prednastavených možností, môžeme použiť vlastnosť list-style-image, ktorá nám dovoľuje nastaviť miesto zarážky vlastný obrázok. Tu sú jednotlivé hodnoty, ktoré môžeme u tejto vlastnosti nastaviť:

• url('url obrázku') - URL obrázka s zarážkou.
• none (predvolené) - Odrážky nemajú obrázok a vykresľujú sa podľa vlastnosti list-style-type.
• inherit - Obrázok odrážok sa zdedí z rodičovského elementu.

Zmeníte nastavenie teda náš CSS súbor tak, aby namiesto čísel boli malé šípky:

ul {
  list-style-image: url('arrow.png');
}

Výstup v prehliadači:

Samozrejme nesmieme zabudnúť na to, že pri použití obrázku bude mať obrázok svoju originálnu veľkosť. Je preto lepšie používať obrázky s veľkosťou zodpovedajúce výške prvkov v zozname. V našom prípade teda len asi 6x6 pixelov. Ikonky na stránke sa väčšinou vkladajú cez štýl písma (font) a do HTML elementu sa potom vkladá iba trieda. Takéto písmo je napr. Font-Awesome. Vhodné je dobré využívať tiež škálovateľnú grafiku, mám tým na mysli formát SVG. Rozoberať túto problematiku dopodrobna však v tejto lekcii nebudeme.

Pozície zoznamu

Posledná vlastnosť ktorú môžeme nastaviť zarážkam v zozname je ich pozície. Pre lepšiu prehľadnosť najprv nastavíme všetkým našim prvkom (li) v zozname okraj, vnútorné odsadenie (padding) a štýl na odkaz (element <a>):

li {
    border: 1px solid black;
    padding: .5rem;
}
a {
  text-decoration: none;
  color: #545454;
}

Teraz pridáme k nášmu zoznamu vlastnosť list-style-position: outside;:

ul {
  list-style-image: url('arrow.png');
  list-style-position: outside;
}

Ako môžeme vidieť, odrážky sú mimo okraje našich prvkov. Nastavíme teda miesto hodnoty outside hodnotu inside:

ul {
  list-style-image: url('arrow.png');
  list-style-position: inside;
}

A zarážky sa nám teraz posunuli dovnútra okrajov našich prvkov. Keď teraz vieme, ako sa robia zoznamy, poďme si urobiť jednoduchú navigačnú lištu pomocou zoznamov. Z pôvodného kódu odstránime iba okraja (vlastnosť border) a vlastný obrázok (list-style-image) elementu <li>. Ďalej elementy iba zoradíme vedľa seba, to urobíme vlastností display na hodnotu inline u elementu <li>:

li{
    padding: .5rem;
    display: inline;
}

A máme navigačnú lištu!

Nezabudnite, že nastavujeme štýly elementom <ul>, <li> a <a> ! Štýly sa teda prejaví vo všetkých zoznamoch a odkazoch! Je vhodné teda priradiť zoznamom triedy a stylovať priamo ich:)

Ak niečomu nerozumiete, odporúčame stiahnuť si súbory v prílohe k tejto lekcii a všetko si poriadne vyskúšať:)

V ďalšej lekcii, Vzhľady a nastavenie tabuliek v CSS 3 , si ukážeme, ako nastaviť vlastný vzhľad tabuľky, aké vytvoriť okraje a ako pracovať s jej obsahom.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.