Lekce 10 - Seznamy v CSS3

V minulé lekci, Text a písmo - Sloupce, tabulátory, odsazení, zalamování, jsme si ukázali jak členit text do sloupců, nastavit velikost tabulátoru, odsadit řádek a zalamovat text.

Vítejte u další lekce ohledně nastavení v CSS3, ve které si ukážeme, jak nastavit vlastní vzhledy seznamů a jak pracovat s jejich vlastnostmi. V této lekci si uděláme základ navigační lišty:

Vlastnost list-style

Pomocí CSS3 vlastnosti list-style nastavujeme styl odrážek seznamů. Vlastnost je shrnující a umožňuje nastavit 3 vlastnosti odrážek a to typ, pozici a obrázek.

Syntaxe CSS3 vlastnosti list-style je následující:

list-style: typ pozice obrázek;

Pro každou složku odrážek existuje zvlášť CSS vlastnost, která ji nastavuje. Jsou to:

• list-style-type - Nastavení typu odrážek
• list-style-position - Nastavení pozice odrážek
• list-style-image - Nastavení obrázku odrážek

Jako hodnotu můžeme uvést i inherit, tím zdědíme vlastnost list-style od rodičovského elementu. Vytvoříme si tedy v našem HTML dokumentu nový list pomocí <ul> a <li> tagů:

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

Vzhled odrážek seznamu

Nyní můžeme náš seznam upravit pomocí CSS. Nejdřív se podíváme na přednastavené typy, které lze jednoduše použít. Pokud bychom chtěli nastavit pouze typ, použijeme vlastnost list-style-type. Vybírat vzhled můžeme z následující tabulky:

• disc - (výchozí) - Vyplněný kruh
• none - Bez odrážek
• circle - Kruhové
• square - Čtvercové
• decimal - Číslované
• decimal-leading-zero - Číslované na 2 místa (před čísla menší než 10 přidá nulu)
• lower-alpha - Malá písmena latinské abecedy
• lower-greek - Malá písmena řecké abecedy
• lower-latin - Malá písmena latinské abecedy
• lower-roman - Římské číslice malými písmeny
• upper-alpha - Velká písmena latinské abecedy
• upper-greek - Velká písmena řecké abecedy
• upper-latin - Velká písmena latinské abecedy
• upper-roman - Římské číslice velkými písmeny
• armenian - Armenské číslice
• cjk-ideographic - ideografické číslice
• georgian - gregoriánské číslice
• hebrew - Hebrejské číslice
• inherit - Zdědí typ odrážek od rodičovského elementu

Pro všechny elementy s tagem ul nastavíme tedy místo teček třeba čísla:

ul {
  list-style-type: decimal;
}

Výstup:

Nebo můžeme použít například velké římské číslice:

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

Pokud se nám nelíbí žádné z přednastavených možností, můžeme použít vlastnost list-style-image, která nám dovoluje nastavit místo odrážky vlastní obrázek. Zde jsou jednotlivé hodnoty, které můžeme u této vlastnosti nastavit:

• url('url obrázku') - URL obrázku s odrážkou.
• none (výchozí) - Odrážky nemají obrázek a vykreslují se podle vlastnosti list-style-type.
• inherit - Obrázek odrážek se zdědí z rodičovského elementu.

Přenastavíme tedy náš CSS soubor tak, aby místo čísel byly malé šipky:

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

Výstup v prohlížeči:

Samozřejmě nesmíme zapomenout na to, že při použití obrázku bude mít obrázek svoji originální velikost. Je proto lepší používat obrázky s velikostí odpovídající výšce prvků v seznamu. V našem případě tedy jen asi 6x6 pixelů. Ikonky na stránce se většinou vkládají přes styl písma (font) a do HTML elementu se poté vkládá pouze třída. Takové písmo je např. Font-Awesome. Vhodné je dobré využívat také škálovatelnou grafiku, mám tím na mysli formát SVG. Rozebírat tuto problematiku dopodrobna však v této lekci nebudeme.

Pozice seznamu

Poslední vlastnost kterou můžeme nastavit odrážkám v seznamu je jejich pozice. Pro lepší přehlednost nejprve nastavíme všem našim prvkům (li) v seznamu okraj, vnitřní odsazení (padding) a styl na odkaz (element <a>):

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

Nyní přidáme k našemu seznamu vlastnost list-style-position: outside;:

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

Jak můžeme vidět, odrážky jsou mimo okraje našich prvků. Nastavíme tedy místo hodnoty outside hodnotu inside:

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

A odrážky se nám nyní posunuly dovnitř okrajů našich prvků. Když teď víme, jak se dělají seznamy, pojďme si udělat jednoduchou navigační lištu pomocí seznamů. Z původního kódu odstraníme pouze okraje (vlastnost border) a vlastní obrázek (list-style-image) elementu <li>. Dále elementy pouze seřadíme vedle sebe, to uděláme vlastností display na hodnotu inline u elementu <li>:

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

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

Nezapomeňte, že nastavujeme styly elementům <ul>, <li> a <a>! Styly se tedy projeví ve všech seznamech a odkazech! Je vhodné tedy přiřadit seznamům třídy a stylovat přímo je

Pokud něčemu nerozumíte, doporučujeme stáhnout si soubory v příloze k této lekci a vše si pořádně vyzkoušet

V další lekci, Vzhledy a nastavení tabulek v CSS3, si ukážeme, jak nastavit vlastní vzhled tabulky, jaké vytvořit okraje a jak pracovat s jejím obsahem.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.