[ 02. March 2000]
- Martin_Nemecek
╚o dokß₧e CLASS v Kaskßdov²ch Üt²loch [6.Φas¥ serißlu o CSS]
Dnes sa budeme podrobnejÜie zaobera¥ atrib·tom CLASS, ktor² nßm ve╛mi pomßha pri zadefinovßvanφ CSS a bolo by u₧ ve╛mi nepohodlnΘ pracova¥ bez neho. Tßto Φas¥ je tΘmaticky dos¥ rozsiahla, tak₧e rozdelφme si ju na dve Φasti.
SamotnΘ kaskßdovΘ Üt²ly vyu₧φvaj· viacero mo₧nostφ, pomocou ktor²ch je ve╛mi jednoduchΘ aplikova¥ r⌠zne vlastnosti, t²kaj·ce sa
textu, nadpisov, tabuliek, obrßzkov a ostatn²ch elementov pou₧it²ch na strßnke. Jedn²m slovomformßtovanie strßnky sa stßva jednoduchÜφm
a preh╛adnejÜφm.
A k tomuto prispievaj· aj class, teda triedy. Pridßvanφmna CSS na www strßnku pomocou class sa vßm otvßraj·novΘ mo₧nosti prßce, ktorΘ vßm ulahΦia prßcu. Samozrejme sa dß pracova¥ aj bez nich, ale preΦo si nezjednoduÜi¥ prßcu ke∩ je to mo₧nΘ.
Ako to celΘ funguje? Celkom jednoducho. Zoberme si naprφklad mo₧nos¥ ₧e mßme na naÜej strßnke viacero nadpisov toho istΘho druhu,
naprφklad ich chceme zadefinova¥ pomocou tagu H1. Ale problΘm je v tom, ₧e osadenie ka₧dΘho nadpisu chceme realizova¥ in²m typom pφsma, alebo farby.
Taktie₧ by sme potrebovali aby zarovnanie jednotliv²ch nadpisov bolo inΘ. Mohli by sme na to pou₧i¥ ve╛mi kvetnat², Φi₧e naf·knut² HTML k≤d, ale taktie₧ by to Ülo prostrednφctvom CSS. A najlepÜie by bolo keby sme pridali CLASS.
V tomto prφpade zadefinujeme medzi tagmi HEAD nasledovn· sekvenciu STYLE, kde presne urΦφme nastavenie fontov, farieb, osadenφ a ∩alÜφch charakteristφk jednotliv²ch textov²ch elementov, ktorΘ pomenujeme nasledovne:
H1.prvy, H1.cislo_dva, P.body, P.cislo2.
Schvßlne som zvolil r⌠zne nßzvy jednotliv²ch class, proto aby ste videli ₧e nßzvy si m⌠₧ete zvoli¥ ╛ubovo╛ne.
Pozrime sa teraz na nßÜ prφklad, ako bude zadefinovanß sekcia STYLE v hlaviΦke strßnky.
<style>
BODY {
background-color : }
H1.prvy {
font-size : 14pt;
font-family : Garamond, Times, Serif;
font-weight : bold;
color : }
H1.cislo_dva {
font-size : 14pt;
font-family : Garamond, Times, Serif;
font-weight : bold;
color : }
P.body {
font-size : 11pt;
font-family : Arial, Helvetica, Sans-Serif;
}
P.cislo2 {
font-size : 9pt;
font-family : Arial, Helvetica, Sans-Serif;
}
</style> |
V²sledok si m⌠₧ete prezrie¥ tu.
Na prv² poh╛ad je zrejmΘ o Φo tu ide. Ka₧dej pßrovej znaΦke sme priradili jeden nßzov, ktor² sme nßsledne volali prostrednφctvom class=nejake_meno. Tento class nejake_meno mal priradenΘ urΦitΘ vlastnosti, tak naprφklad tag H1.cislo_dva:
{
font-size : 14pt;
font-family : Garamond, Times, Serif;
font-weight : bold;
color : }
A nßsledne v HTML dokumente sme ho volalinasledovne: <H1 class="cislo_dva"> Toto je nadpis </H1>
Vysk·Üajte si to, zistφte ₧e mßte vΣΦÜφ poriadok a preh╛ad vo vaÜich HTML dokumentoch a uÜetrili ste si aj viacej miesta a Φasu. Nabud·ce budeme v classoch pokraΦova¥ :-)
|
|
|
Homepage
