Ul, Ol, Li, Dl... Párové tagy Ul odrážkovy zoznam Ol číslovaný zoznam Li položka zoznamu Dl zoznam definícií

HTML
DOWNLOAD

Rozměr: px

Začít zobrazení ze stránky:

Download "Ul, Ol, Li, Dl... Párové tagy Ul odrážkovy zoznam Ol číslovaný zoznam Li položka zoznamu Dl zoznam definícií"

Monika Müllerová
před 8 lety
Počet zobrazení:

1 Ul, Ol, Li, Dl... Párové tagy Ul odrážkovy zoznam Ol číslovaný zoznam Li položka zoznamu Dl zoznam definícií

2 Ul, Ol, Li, Dl <body>... <ul> <li> Prvá Položka <li type = circle> Druhá Položka <li type = square> Tretia Položka </ul>... </body>...

3 UL Nečíslovaný zoznam Vnútri môžu byť iba elementy LI Vytvára takéto bodky pred položkami ale dá sa zmeniť aj na krúžok alebo štvorček pomocou atribútu type

4 UL <ul> <li> Prvá Položka <li type = circle> Druhá Položka <li type = square> Tretia Položka </ul> Ak sa nenastavý žiadna hodnota tak bude predvolená hodnota disc - plný krúžok

5 OL Číslovaný zoznam Vnútri môžu byť iba elementy <LI> Má dva atribúty: type a start Atribútom type sa dá nastaviť, aký znak sa zobrazí pred položkou. Možno si vybrať z päť druhov číslovania: 1, A, a, I, i Ak nie je nastavený žaiden atribút, predvolená hodnota je: 1 Atribútom start sa dá nastaviť, od akého čísla sa začne zoznam

6 OL <ol> <li> Položka <li> Položka <li> Položka </ol> <ol> <li type = A> Položka <li type = A> Položka <li type = A> Položka </ol>

7 OL <ol> <li type = a> Položka <li type = a> Položka <li type = a> Položka </ol> <ol> <li type = I> Položka <li type = I> Položka <li type = I> Položka </ol>

8 OL <ol> <li type = i> Položka <li type = i> Položka <li type = i> Položka </ol> <ol start = "30"> <li> Položka <li> Položka <li> Položka </ol>

9 LI Položka zoznamu Pre správne zobrazenie musí byť vnútri zoznamu Zobrazuje sa vždy na novom riadku za číslom (pokud ide o <ol>) alebo za odrážkou (v ostatných prípadoch) Pôvodne sa jednalo o tag nepárový, súčastné špecifikácie vyžadují aj koncové </li>

10 LI

11 Vnorené zoznamy <ul> <li>položka <li>položka <li>položka <ul> <li>položka <li>položka <li>položka </ul> <ol> <li>položka <li>položka <li>položka </ol> <li>položka <li>položka <li>položka </ul>

12 DL Zoznam definícii zoznam definícii je uzatvorený v značke <dl> Vnútri sa nachádzajú elementy <dt> a <dd> Do značky <dt> uvedieme definíciu Do značky <dd> uvedieme jej význam

13 DL <dl> <dt>definícia <dd>význam definície <dt>definícia <dd>význam definície <dt>definícia <dd>význam definície </dl>

14 List-style CSS vlastnost list-style může určovat všechny vlastnosti odrážek nebo číslování najednou Jedná se o úspornější formu zápisu vzhledu odrážek a číslování (většinou tagu <li>).

15 List-style

16 List-style Všechny odrážky na stránce se dají najednou ovlivnit stylopisem: <style> ul li {list-style: square outside url("odrazka.gif")} ol li {list-style: lower-alpha outside none} </style> nečíslované seznamy (tagy <li> uvnitř tagů <ul>) budou s grafickou odrážkou odrazka.gif. Číslované seznamy (tagy <li> uvnitř tagu <ol>) budou malými písmeny a. b. c. (lower-alpha) a bez grafické odrážky. Pokud bude mít prohlížeč vypnuté obrázky, zobrazí se odrážky jako čtvereček (square).

17 List-style-type

18 List-style-type

19 List-style-type Výchozí podoba je buď puntík (disc) v nečíslovaném seznamu (tag <ul> aj.), nebo normální čísla (decimal) v číslovaném seznamu (tag <ol>). V dalších úrovních seznamů (ol nebo ul v li) jsou výchozí podoby jiné. Mozilla navíc zná hodnoty decimal-leadingzero, lower-latin, upper-latin, lower-greek, upper-greek. Internet Explorer u hodnot, které nepodporuje, zobrazí puntík (disc).

20 List-style-type Jako odrážku nelze použít žádný jiný znak. Pokud potřebujete nějaký zvláštní typ odrážky, musíte si ji nakreslit jako obrázek a přidat ji k seznamu pomocí list-style-image

21 List-style-image CSS vlastnost list-style-image určuje obrázek místo odrážky Z obrázku se (pokud bude moc velký) vykreslí jenom horní pravý roh (netestováno). Pokud má prohlížeč vypnuté obrázky nebo dokud se obrázek nestáhne, bude vzhled odrážky určen vlastností list-style-type. Adresa obrázku se zadává jako jiná url v css zápisem např. list-style-image: url("obrazek.gif").

22 List-style-image Obrázek odrážky se dá nastavit spolu s jinými vlastnostmi seznamu souhrnnou vlastností list-style. V praxi je docela těžké udělat hezký obrázek pro odrážku. Obzvláště problematický je fakt, že každý prohlížeč může odrážku umístit o pár pixelů výše nebo níže.

23 List-style-image Pouze jednu odrážku lze změnit přímým stylem: <ul> <li style="list-style-image: url('cesta/obrazek.gif')">text za grafickou odrážkou</li> </ul> Mnohem častěji se ale grafická odrážka dává všem tagům <li> na celé stránce: i {list-style-image: url("cesta/obrazek.gif")}

24 List-style-image Nebo se obrázková odrážka dává jenom tagů <li> uvnitř nečíslovaného seznamu = tagu <ul> (unordered list). Pokud budou unitř číslovaného seznamu <ol> (ordered list), obrázek mít nebudou: ul li {list-style-image: url("cesta/odrazka.gif")} Zápis ul li je platný pro všechny tagy <li> uvnitř tagu <ul>

25 List-style-image Velmi často se lze setkat s požadavkem dát obrázkové odrážky jenom některému seznamu odrážek a jiným odrážkám ve stránce obrázkovou odrážku nedávat. To je nejlepší vyřešit třídou (class) přidanou tagu <ul>. Potom zápis selektoru ul.obrazkova li ovlivní tag li v tagu ul s třídou obrazkova: <style> ul.obrazkova li {list-style-image: url("cesta/odrazka.gif")} </style> <ul class="obrazkova"> <li>tento text má před sebou grafickou odrážku</li> <li>tento také</li> </ul> <ul> <li>text s normální grafickou odrážkou</li> <li>protože nadřazené ul nemá class="obrazkova"</li> <ul>

26 Zdroje:

Podobné dokumenty

Tvorba webových stránek

Tvorba webových stránek Seznamy Seznam je skupina odstavců označených odrážkou. Seznam je: číslovaný je označen pořadovým číslem nebo písmenem, nečíslovaný je označen značkou (odrážkou) Seznam Celý blok