Ul, Ol, Li, Dl... ● ● ● ● ●
Párové tagy Ul – odrážkovy zoznam Ol – číslovaný zoznam Li – položka zoznamu Dl – zoznam definícií
Ul, Ol, Li, Dl... ... ...
- Prvá Položka
- Druhá Položka
- Tretia Položka
... ...
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 ●
UL
- Prvá Položka
- Druhá Položka
- Tretia Položka
Ak sa nenastavý žiadna hodnota tak bude predvolená hodnota disc - plný krúžok
OL ● ● ● ●
●
●
Číslovaný zoznam Vnútri môžu byť iba elementy
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
OL - Položka
- Položka
- Položka
- Položka
- Položka
- Položka
OL - Položka
- Položka
- Položka
- Položka
- Položka
- Položka
OL - Položka
- Položka
- Položka
- Položka
- Položka
- Položka
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 ) 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
Vnorené zoznamy
- Položka
- Položka
- Položka
- Položka
- Položka
- Položka
- Položka
- Položka
- Položka
DL ● ● ● ● ●
Zoznam definícii zoznam definícii je uzatvorený v značke
Vnútri sa nachádzajú elementy - a
- Do značky
- uvedieme definíciu Do značky
- uvedieme jej význam
DL - Definícia
- Význam definície
- Definícia
- Význam definície
- Definícia
- Význam definície
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 - ).
List-style
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} ●
nečíslované seznamy (tagy - uvnitř tagů
) budou s grafickou odrážkou odrazka.gif. Číslované seznamy (tagy - uvnitř tagu
) 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).
List-style-type
List-style-type
List-style-type ●
●
Výchozí podoba je buď puntík (disc) v nečíslovaném seznamu (tag aj.), nebo normální čísla (decimal) v číslovaném seznamu (tag ). 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).
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
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").
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.
List-style-image ●
Pouze jednu odrážku lze změnit přímým stylem:
- text za grafickou odrážkou
●
Mnohem častěji se ale grafická odrážka dává všem tagům - na celé stránce:
i {list-style-image: url("cesta/obrazek.gif")}
List-style-image ●
Nebo se obrázková odrážka dává jenom tagů - uvnitř nečíslovaného seznamu = tagu
(unordered list). Pokud budou unitř číslovaného seznamu (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 - uvnitř tagu
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 . 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")} - tento text má před sebou grafickou odrážku
- tento také
- text s normální grafickou odrážkou
- protože nadřazené ul nemá class="obrazkova"
Zdroje: ● ●
http://www.jakpsatweb.cz/ http://dusanko.net/
