Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 30% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se PHP
Discount week - April - 30

Lekce 18 - Seznamy v CSS 3 Nové

V minulé lekci, Pozadí elementů - velikost, pozice a přichycení v CSS 3, jsme se naučili jak u pozadí elementů nastavit velikost, pozici, přichycení a případně opakování.

Vítejte u další lekce ohledně nastavení v CSS 3, 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:

Seznamy
localhost

Vlastnost list-style

Pomocí CSS 3 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 CSS 3 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 - Řecké čí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
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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

ul {
  list-style-type: decimal;
}

Výstup:

Seznamy
localhost

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

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

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:

Seznamy
localhost

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

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

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!

Navigační lišta
localhost

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


 

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

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 3x (2.04 kB)
Aplikace je včetně zdrojových kódů v jazyce CSS3

 

Předchozí článek
Pozadí elementů - velikost, pozice a přichycení v CSS 3
Všechny články v sekci
CSS3 od A do Z
Článek pro vás napsal Filip Opluštil
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Aktivity (4)

 

 

Komentáře

Avatar
Bohuslav Labaj:Včera 10:58

upper-roman jsou velké římské číslice ne řecké,
chyba je v seznamu Vzhled odrážek seznamu a pak v popisu příkladu, kde je vzhled seznamu "list-style-type: upper-roman;" použitý

 
Odpovědět
Včera 10:58
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 1 zpráv z 1.