13. CSS - vlastnosti seznamů
22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace
Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.
| Projekt MŠMT ČR | EU PENÍZE ŠKOLÁM |
|---|---|
| Číslo projektu | CZ.1.07/1.4.00/21.2732 |
| Název projektu školy | EU Peníze školám |
| Klíčová aktivita III/2 | Inovace a zkvalitnění výuky prostřednictvím ICT |
Sada č. 1
Identifikátor DUM: VY_32_INOVACE_1ICT9roč_13
Vzdělávací oblast: Informační a komunikační technologie
Vzdělávací obor: Informatika
Název: CSS - vlastnosti seznamů
Autor: Mgr. Ondřej Hajduch
Stručná anotace: Používání vybraných CSS vlastností pro nastavení seznamů.
Klíčová slova: list-style-type, list-style-position, list-style-image.
Metodické zhodnocení: Žáci se naučí používat vybrané CSS vlastnosti pro nastavení seznamů.
Ověřeno: 4. 2. 2013 (IX.A)
Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch
13.1 CSS - vlastnosti seznamů (studijní text)
Jelikož oba dva typy seznamů obsahují převážně text, platí na ně stejné CSS vlastnosti jako pro písmo či text.
list-style-type
- nastaví požadovaný typ odrážky nebo číslování
- hodnotou pro netříděné seznamy může být:
- disc (puntík)
- circle (kolečko)
- square (čtvereček)
- hodnotou pro tříděné seznamy může být
- decimal (desítkové číslování)
- upper-alpha (velká písmena)
- lower-alpha (malá písmena)
- upper-roman (velká římská číslice)
- lower-roman (malá římská číslice)
- pro oba dva typy seznamů
- none (vypne odrážky nebo číslování)
ul li {list-style-type: circle}
ol li {list-style-type: upper-alpha}
list-style-position
- nastaví, zda se má odrážka zobrazit mimo úroveň textu nebo v úrovni textu
- praktické využití je minimální
- hodnotou může být:
- outside (mimo úroveň textu - výchozí, není potřeba definovat)
- inside (v úrovni textu)
ul li {list-style-position: inside}
list-style-image
- nastaví místo odrážky obrázek
- pozor: obrázek musí mít správné rozměry (malé rozměry v řádu jednotek pixelů)
- hodnotou je URL neboli cesta k obrázku (cesta je v závorce oddělena anglickými uvozovkami)
ul li {list-style-image: url('img/odrazka2.gif')}
Podmínkou umístění obrázku "odrazka2.gif" ve složce "img".
13.2 CSS - vlastnosti seznamů (cvičení)
- Ve složce WWW si vytvořte složku 13.
- Ze složky 12 si zkopírujte všechny soubory, včetně složky IMG.
- Soubor style.css upravte podle následujícího klíče:
- přidejte komentář "CV13",
- formát netříděného seznamu: typ odrážky čtverec, řádkování 1,25;
- formát tříděného seznamu: typ číslování desítkové, řádkování 1,25;
- Zkontrolujte na případné chyby a uložte.