CSS - triedy, identifikátory a komentáre, 3.diel

Prvé zápisy do CSS, prvé selektory ale ešte stále zostávame pri základnej syntaxy. V tomto diely sa ale dozviete ako štýly definovať v CSS a prenechať ich elementom.

Ak ste sa už naučili ako zahrnúť štýl do stránky teraz vám už chýba štýl napísať. Na základné štýlovanie budeme potrebovať ovládať 2 veci a to triedy a identifikátory. Predtým ako začneme písať náš prvý CSS kód chcem upozorniť, že v názvoch tried a identifikátorov sa nemôže používať diakritika, medzery alebo podobné nežiadúce znaky.

Triedy

Aby sme zapísali triedu do CSS vždy pred jej názvom musí byť bodka. Za bodkou nasleduje názov triedy a hneď po nej zložené zátvorky. Do zložených zátvoriek sa píšu štýly, ktoré chceme prenechať dokumentu. Potom sa už v CSS delia selektory a deklarácie. Napr. width je selektor nasleduje dvojbodka a potom deklarácia.

.trieda {

width: 50px;

height: 50px;

background: red;

}

Ak sme definovali štýl triedy ideme na HTML kód. Zapíšeme ho do elementu <div>.

<div class="trieda">

</div>

Vyskúšajte si funkčnosť vo vašom internetovom prehliadači a zistíte, že sme na stránku vložili červený štvorec. Samozrejme triedy sa nemusia štýlovať len pomocou elementu div ale aj pomocou iných elementov. <div> sa používa najčastejšie na štruktúru stránky resp. tvorí jej vzhľad. Je to univerzálny element. Štýl triedy sme čerpali s CSS a jej štýl sme dostali do divu pomocou atribútu class vloženého do elementu. Element <div> s touto triedou môžeme na stránke použiť koľkokrát chceme a aby ste to pochopili lepšie ide mi o toto.

<div class="trieda">

</div>


<div class="trieda">

</div>

Použitie divov s triedami je neobmedzené a váš kód zostane validný, tak ako to má byť :-).

Identifikátory

Zápis do CSS je zhodný s triedami ale je tu rozdiel v začiatočnom zápise. Namiesto bodky použijeme mriežku(#). CSS zápis bude vyzerať takto.

#identifikator {

width: 50px;

height: 50px;

background: red;

}

A teraz prejdem k HTML zápisu.

<div id="identifikator">

</div>

Tu nastal menší rozdiel tiež. Namiesto class sme použili označenie štýlu pomocou id. Tento zápis má však ešte jednu veľkú odlišnosť. Na rozdiel od tried môžeme identifikátory na stránke použiť iba jeden krát, čiže sa vyvarujte nasledujúcemu zápisu.

<div id="identifikator">

</div>


<div id="identifikator">

</div>

Ak použijete nasledujúci spôsob váš kód validný nebude a potom to znamená, že váš zápis tiež nie :-(

Komentáre

Ešte pred tým ako skončím chcem doplniť niečo čo som zabudol dodať v minulých dieloch. Sú to komentáre v CSS. Uľahčia vám prácu, ak vaše dokumenty budú veľmi dlhé a už sa v nich nebude dať orientovať. Komentáre do CSS vkladáme podobne ako u viacriadkových komentárov v PHP.

/* Toto je trieda */

.css {

background: red;

}

/* Toto je identifikátor */

#css {

background: red;

}

Komentáre sú uložené medzi znakmi /**/. Môže ich použiť aj na viac riadkov čiže takto.

/* Toto je trieda, ktorú

ste sa naučili ovládať

v tomto článku */

.css {

background: red;

}

Vložený komentár nemá žiadny vplyv na CSS kód a môžete ho použiť kdekoľvek.

Toto by bol koniec tohto dielu a nabudúce si ukážeme pár základných selektorov v CSS.

Alternatívne verzie:

Autor: PaBi3 · Kategória: Webdesign · Dátum: 17.05.2005 14:58