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...... <body>... <ul> <li> Prvá Položka <li type = circle> Druhá Položka <li type = square> Tretia Položka </ul>... </body>...

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

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

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>

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>

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>

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>

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>

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

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>

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

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} </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).

List-style-type

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

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

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>

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>

Zdroje: http://www.jakpsatweb.cz/ http://dusanko.net/