Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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:

Seznamy
localhost

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:

Seznamy
localhost

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

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

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:

Seznamy
localhost

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;
}
Seznamy
localhost

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;
}
Seznamy
localhost

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!

Navigační lišta
localhost

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š.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 61x (2.04 kB)
Aplikácia je vrátane zdrojových kódov v jazyku CSS3

 

Predchádzajúci článok
Pozadia elementov - veľkosť, pozícia a prichytenie v CSS 3
Všetky články v sekcii
CSS3
Preskočiť článok
(neodporúčame)
Vzhľady a nastavenie tabuliek v CSS 3
Článok pre vás napísal Filip Opluštil
Avatar
Užívateľské hodnotenie:
1 hlasov
Aktivity