Webové technológie

Poznámky:

8. Typy elementov

Základné typy elementov:

Riadkový - element sa vykresľuje na riadku a nasledujúci riadkový element pokračuje na rovnakom riadku. S riadkovým elementom pracuje CSS v rámci nadriadeného blokového elementu.

Blokový - element sa vykresľuje minimálne cez celý 1 riadok, častejšie cez viac riadkov v maximálnej možnej šírke, ktorú môže dosiahnuť. Nasledujúci element, či už riadkový alebo blokový začína na dalšom riadku. Blokový element tvorí blok, s ktorým CSS pracuje pri vykreslovaniu objektov na stránke.

Položka zoznamu - taký element sa skladá z nadriadeného blokového bloku a samotného riadkového bloku, ktorý obsahuje text.

Pokročilejšie typy elementov:

CSS vie pracovať taktiež s pokročilejšími typmi elementov, okrem tých základných (blokový a riadkový). Mimo nich zvlášť rozlišuje a pracuje s následujúcimi typmi elementov:

• Vybiehajúci (run-in) - element, ktorý z ľavej strany začína ako blokový element, ale z pravej strany sa správa ako element riadkový. Bohužial nemá ešte kompatibilitu s Firefoxom...
• Riadkový blok (inline-block) - element sa vytvorí ako blokový element, ale v toku dokumentu sa správa ako element riadkový, podobne ako nahradzovaný element (napr. img). Obsah takéhoto elementu sa formátuje ako blokový element, ale navonok sa formátuje ako element riadkový.

Ako zmeniť typ elementa:

Ak budeme chcieť zmeniť typ elementa z jeho východzieho nastavenia, tak použijeme jednoducho vlastnosť display. Ak chcete meniť typ dokumentu, mali by ste veľmi dobre ovládať blokový model CSS a vedieť, ako sa rôzne typy elementov v praxi správajú.

Použíť môžeme niektorú z následujúcich hodnôt (samozrejme, neuvediem všetky, niektoré sa používajú aj pri tabuľkách):

• block - element naformátuje ako blokový element.
• inline - element naformátuje ako riadkový element.
• list-item - element naformátuje ako položku zoznamu.
• run-in - element naformátuje ako vybiehajúci element (predchádzajúci tip).
• inline-block - element naformátuje ako riadkový blok (predchádzajúci tip).
• none - element sa na stránke vôbec nevykreslí.

Ak chceme zmeniť element riadkový (a) na blokový, vykonáme to následovne:

a { display: block; }