Hlavná stránka · Diskusné Fórum · Pracovné príležitosti · Zoznam

 Main Menu
o Hlavná stránka
o Zoznam tém
o Zoznam
o Odporučte nás
o Užívatelia
o Vaše konto
o Pridaj článok
o Štatistiky
o Top 10

 Reklama


 Developer Zone's
o Internet
o Tools
o Linux
o CGI Zone
o ASP Zone
o ASP.net
o PHP Zone
o CSS Zone
o JavaScript
o MySQL
o WAP / WML
o WML / WMLScript
o XML / XHTML
o Tipy a triky
o Best of web
o WebServers
o WebDesign
o Grafika

 Servis
o Vyhľadávanie
o Fórum
o Workoffice
o Zoznam článkov
o Reklama
o Pridaj článok
o Pridaj novinku

Napíšte nám
Homepage Do favoritov

 LinkExpres
Interval.cz · Pc.sk
Builder.cz · Mobilmania
PCSvet.cz · Asp.cz
Webdnes · Živě.sk
Zoznam.sk · Atlas.sk
Inzine.sk · PHP.sk
Agent.sk · Lupa.cz
Code.box.sk · Root.cz
Pixel32 · Grafika.cz

 forum.developer.sk
o Fórum ::
o Markup languages
o Scriptové jazyky
o CGI
o PHP/MySQL
o Perl
o Grafika
o Webservery
o HTML Editory
o Browsery
o Bookmarx
o ASP
o Vytvor tému ::

 Pracovné príležitosti
o Ponúkate prácu?
o Hľadáte prácu?

 Autori developer.sk
o Martin Nemeček
o Sväťo Straka
o Jany Masaryk
o Jozef Murín

 
CSS [ 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ť :-)

 
 Príslušné odkazy k téme
Viac o téme: CSS | Iné články od: Admin | Pošli komentár | Stránka vhodná na tlač width=15 height=11  Pošli tento článok priateľovi, známemu width=15 height=11


Najčítanejšie články CSS:
CSS - Cascading Style Sheets [úvod do problematiky]

Ďalšie články v rubrike CSS:

 

"Čo dokáže CLASS v Kaskádových štýloch [6.časť seriálu o CSS]" | Login / vytvor konto | 0 Komentárov
Prah
Za obsah komentárov je zodpovedný užívateľ, nie prevádzkovateľ týchto stránok.



Autorské práva:   ©1999 - 2001 Developer Zone [developer@developer.sk]

Všetky články sú vlastníctvom autorov Developer Zone. Všetky práva vyhradené. Stránky Developer.sk sú vytvorené pomocou PHP-Nuke.
Odkazy na nové články je možné preberať pomocou:Backend.php.