, alebo členenie sekcií pomocou CSS [7.časť]

Tento tajuplný tag, ktorý si v nasledujúcich riadkoch predstavíme je vám, ktorý ste sa už stretli s CSS, alebo Dynamickým HTML určite známy. Používa na stránkach dosť často a dokáže výrazným spôsobom sprehľadniť členenie textových sekcií na stránke.


V predchádzajúcej časti sme si čo to povedali o triedach, alebo classoch a o možnosti použitia tejto bohatej škále formátovacích funkcií CSS. Čo sa týka DIV, čiže DIVISION, zabespečujú nám na stránke predelenie jednotlivých častí textu pomocou rozdielného formátovania.

<div> je interpretovaný ako division - oddelenie - časť, označená podľa mena. Jedná sa o kontainer ,ktorý označuje sekciu na HTML stránke. Tento <div> tag, alebo divízia, je interpretovaná ako a označená podľa mena. Ide o kontajner,ktroý označuje sekciu na HTML stránke. Táto časť textu, ktrorá je uzavretá do značiek <div> a </div> sa proste odlišuje od výchdzieho formátovania na stránke. Napríklad centrovanie textu je výhodné robiť pomocou kontajnera DIV, ktorý je možné použiť nasledovným sposobom:

<div align="center">
</div>

Ako vidíte sami jedná sa o veľmi jednoduchú a účinnú techniku vycentrovania určitej časti textu na stránke. Avšak okrem textu je možné zarovnávať týmto spôsobom aj obrázky. Je to výhodnejšie ako použitie centrovacieho tagu <CENTER>.

Hlbší zmysel v použití DIV je hlavne v ich mocnom prepojení na jednotlivé objekty na stránke. Ide o to, že jednotlivým objektom na stránke si priradíme akoby ID označenie a potom ich už voláme ako jednotlivé atribúty. Znie to dosť komplikovane ale je to vlastne veľmi jednoduché. Ukážeme si to na jednoduchom jednoriadkovom príklade:

<style type="text/css">
DIV.quotation {font-family: courier;}
</style>
<div id="quote1" class="quotation">Prvy riadok 
zvyraznený zelenou.</div>

Po zadefinovaní štýlu v sekcii HEAD, čiže DIV.quotation nastavený na FONT Courier a okrem toho je tu zadefinovaný nový atribút s označením quotel

Teraz si ukážme celý príklad v ktorom budeme volať dve ID hodnoty, ktoré budú predstavovať sfarbenia jednotlivých riadkov.

<style type="text/css">
<!-
DIV.quotation {font-family: courier;
font-size: 10pt;
text-align: center
color:green
}
-->
</style>

Aký výstup dostaneme a ako sa nám prejaví volanie naeditovaných ID -

<div id="quote1" class="quotation">Zelený riadok.</div>

Zelený riadok.


Developer,
Stiahnuté z Developer.sk