Všeobecné definovanie štýlov
V úvodnej kapitole tejto sekcie sme stručne popisovali výhody jazyka CSS. Spomínali sme si, že si v jazyku CSS môžeme nadefinovať viacero štýlov pre jednotlivé elementy alebo aj konkrétne pre jeden element a následne tieto štýly príslušným elementom popriraďovať (určiť). Možno ste si všimli, že doteraz sme ale nič také úplne nerobili. V kóde, kde sme mali viacero elementov s podobným alebo rovnakým štýlom, sme definovali dizajn jednotlivo v každom elemente pomocou atribútu style. Tento spôsob definovania štýlov pre jednotlivé elementy je základný a bol pre nás na začiatok najpraktickejší a najvhodnejší na vysvetlenie a pochopenie základov jazyka CSS. Možno ale tušíte, že to nie je tá optimálna a správna cesta použitia. Len keď si zoberieme dva divy, ktoré majú rovnaký štýl, pomocou atribútu style musíme obidvom zadať to isté. Zatiaľ nevieme cestu, ako by sme povedali tomu druhému divu, že vyzeraj rovnako ako ten prvý, resp. maj v sebe hodnoty atribútu style ako ten prvý div. Tým pádom musíme tomu druhému zadať presne to isté, čo má prvý a tu je hneď problém. Vzniká zbytočne ten istý a opakujúci sa kód. Toto je základná vec, ktorej sa budeme snažiť celý život (ten programátorský :-D ) vyhnúť.
Keďže chceme vyriešiť tento problém a vyhnúť sa mu, naskytujú sa nám dve otázky, ktoré musíme vyriešiť. Kde teda budeme definovať štýly (pravidlá jazyka CSS), keď nie priamo v elementoch (tagoch) pomocou atribútu style a ako priradíme nejaký štýl elementu. Ako mu povieme, že ty a ty vyzeraj takto a ty a ty aplikuj na seba tento štýl. Presne tieto dve veci si ideme práve prebrať a po nich uvidíte, akú silu má jazyk CSS a ako je to šikovne navrhnuté.
Nehovorím, že nemôžete využívať atribút style na definovanie štýlu. Je to jedna z ciest a niekedy je to praktické týmto spôsobom. Keď sa ale dá, je lepšie sa tomu vyhnúť, najmä keď to je neefektívne. Poďme si teda vysvetliť iný spôsob. Spomeňme si opäť na jednu z kapitol jazyka HTML, konkrétne na tú, v ktorej sme sa bavili o základnej štruktúre kódu webstránky. Povedali sme si, že základná štruktúra je definovanie typu jazyka na začiatku, potom tag html, ktorý v sebe obsahuje dve základné časti – hlavičku (head) a telo stránky (body). Hlavičku sme zatiaľ nepoužívali, použili sme ju iba raz, aby sme si vysvetlili aspoň jedno jej použitie a to na tag title (titulok stránky). Práve hlavička bude nateraz pre nás miestom, kde budeme definovať štýly, čiže pravidlá v jazyku CSS. Všetky pravidlá alebo skôr všetko, čo sa bude týkať jazyka CSS, budeme písať do párového elementu style, ktorý sa musí nachádzať v hlavičke. Keďže už vieme miesto, kam budeme písať kód v CSS, zodpovedali sme si na prvú otázku. Ostáva nám ešte odpovedať na druhú, ako priradiť jednotlivé šýtly elementom.
Priraďovanie (zadávanie) štýlov elementom sa dá dvomi spôsobmi. Prvý spôsob je zadanie štýlu pre jednu skupinu elementov, teda pre konkrétny jeden tag. Takéto zadefinovanie spôsobí, že všetky elementy tohto typu budú mať aplikovaný tento štýl (definované pravidlá). Štruktúra definovania štýlu v hlavičke (v tagu style) vyzerá nasledovne. Najprv sa zadá identifikátor štýlu (selector, select – vybrať, vybranie typu elementu) – v tomto prípade typ tagu (div, p, span...) a za ním nasledujú množinové (kučeravé) zátvorky. V nich sa následne definujú všetky želané pravidlá, podobne ako sme to robili v atribúte style (vlastnosť, dvojbodka, hodnota, bodkočiarka). Tento spôsob by pre nás nemal byť nejak komplikovaný, zadávanie pravidiel už poznáme, len namiesto definovania priamo do tagu pomocou atribútu style budeme definovať štýl v hlavičke a naraz jedným zadefinovaním pre všetky elementy konkrétneho typu. V nasledujúcej ukážke si zadefinujeme dizajn pre viacej typov elemetov:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: grey;
}
h1{
color: yellow;
}
div{
border: 2px dashed blue;
margin-bottom: 20px;
}
div {
padding: 20px;
}
</style>
</head>
<body>
<div>
<h1>Definujeme styl v hlavicke!</h1>
</div>
<div>
<h1>A plati to pre vsetky elementy daneho typu!</h1>
</div>
</body>
</html>
Všimnite si, že štýl pre element typu div sme zadefinovali viackrát a vo výsledku sa zobrazili všetky pravidlá. Toto je štandardné správanie jazyka CSS, pozbierajú sa všetky štýly zo všetkých zdrojov a spoja sa. Berú sá defaultné štýly (prehliadača) pre jednotlivé elementy, všetky štýly definované v súboroch, ktoré sa načítavajú na stránke a nakoniec všetky štýly priamo definované v kóde stránky. V poslednej ukážke môžeme kľudne pridať aj štýl pomocou atribútu style, ako sme to robili predtým. Ak by sme zadali inú vlastnosť, ako sme definovali v hlavičke, tak by sa len aplikovala k ostatným pravidlám. Ak by sme zadali rovnakú vlastnosť ako už bola definovaná (napríklad padding pri dive), tak by hodnota definovaná v atribúte style prebila tú definovanú v hlavičke, pretože je v hierarchii pravidiel najnižšie. Podobne ako keď sme si prebíjali pravidlá pri úprave textu, že nejaký štýl mal rodičovský tag (div), napríklad farbu textu (color) a potom konkrétne v elemente v tom dive sme zadali inú farbu a zobrazila sa tá.
Hneď v tejto ukážke ste mali možnosť vidieť základnú efektivitu jazyka CSS, resp. písania štýlu týmto spôsobom. Aj keby sme mali v kóde dvesto elementov napríklad typu div, zadefinovali by sme štýl iba raz a všetky by vyzerali rovnako. Starým spôsobom, pomocou atribútu style, by sme museli dvestokrát každému divu zadať to isté. Teraz nám to už ale stačí zadať iba raz pre dosiahnutie rovnakého výsledku.
Ukázali sme si zadefinovanie štýlu všeobecne (globálne) pre všetky elementy daného typu. Ako identifikátor (selector) sme zadávali typ elementu (tagu). Poďme si vysvetliť druhý spôsob priradenia štýlu elementom a to je zadávanie štýlu cez ľubovoľné (nami definované) selectory. Tento spôsob je v podstate rovnaký ako predošlý, len namiesto typu elementu – tagu, zadáme názov selectora (selector - názov štýlu/skupiny štýlov - jednoducho text nami určený), za ktorým nasledujú pravidlá v množinových zátvorkách. Tieto pravidlá sa budú viazať na názov tohto štýlu. Pomocou tohto názvu (akokeby id štýlu) potom žiadaným elementom priradíme daný štýl.
Ako sme už viackrát spomenuli, kód klasickej webstránky obsahuje stovky riadkov. V bohatších stránkach na obsah sa vyskytuje veľké množstvo elementov rovnakého typu. Napríklad veľa divov, formulárových elementov, odkazov, zoznamov, tabuliek a častí textov (p, span). Pre lepšiu prehľadnosť a čitateľnosť kódu sa zvyknú používať komentáre, ktoré sme si vysvetlili v sekcii jazyka HTML. Okrem komentárov existuje ešte jedna praktika, ktorá zlepšuje prehľadnosť a čitateľnosť kódu a slúži okrem iného akokeby na kategorizovanie elementov. Pomocou dvoch atribútov, ktoré si o chvíľku vysvetlíme, je možné zadať elementom (tagom) nami definované meno (id, identifikátor, kategóriu, skupinu). Pomocou tejto hodnoty (atribútu) si určíme akokeby význam elementu, napríklad hlavný div pre horné menu by mohol mať hodnotu hlavny_div, menu_div alebo top_div, div pre hlavný obsah stránky by mohol mať pomenovanie main_div, content_div, hlavny_div a podobne. Takisto môžeme mať na stránke veľa rozných odkazov, jedna skupina odkazov môže byť v hornom menu, iné zase v hlavnom obsahu stránky (v strede). Tie všetky v hornom menu by mohli mať spoločné rovnaké meno napríklad menu_odkaz alebo menu_link. Pomocou týchto hodnôt, ak sú zadefinované, vieme rozlíšiť určenie elementu alebo do ktorej skupiny elementov patrí. Takáto skupina by mala mať rovnakú funkciu, vzhľad a význam v stránke.
A prečo sme vlastne k tomuto odbočili od priraďovania štýlov jazyka CSS elementom? Pretože práve táto hodnota (meno, id, skupina) týchto dvoch atribútov bude ten náš selector v jazyku CSS, čiže názov štýlu. Ak si každému odkazu v hornom menu zadáme hodnotu atribútu napríklad menu_odkaz, potom v hlavičke v tagu style zadefinujeme tomuto selectoru pravidlá CSS a všetky elementy s touto hodnotou budú mať aplikované tieto pravidlá. Toto je vlastne tá cesta, kedy nami definované štýly (ľubovoľné pravidlá a ich ľubovoľný počet) priraďujeme elementom, ktorým chceme. Poďme sa teda pozrieť na tie dva atribúty.
Prvý atribút nesie meno id (identiefier – identifikátor) a jeho hodnota je text, ktorý nesmie obsahovať medzeru (takže sa to berie ako jeden jednoznačný názov). Tento atribút slúži na jednoznačné (unique – unikátne – jedinečné) identifikovanie daného elementu v celom HTML dokumente, takže by sa nemal nachádzať v celom dokumente žiadny iný element s rovnakou hodnotou tohto atribútu. Využití tohto atribútu, resp. jeho hodnoty, je viac. Ako sme si spomenuli, jedným je prehľadnosť a čítateľnosť kódu - vieme presne podľa hodnoty id na čo je daný element určený v dokumente (čo predstavuje – časť stránky) a druhým využitím je práve priradenie štýlu elementu. Ako teda na to? Jednoducho popriraďujeme elementom atribút id s nami definovanou hodnotou a potom tieto hodnoty použijeme ako selector pri zadefinovaní štýlu. Ak používame ako selector hodnotu atribútu ID, musíme pred túto hodnotu zadať znamienko mriežky # (sharp):
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: grey;
}
#headerDiv {
border: 2px dashed blue;
margin-bottom: 20px;
height: 100px;
text-align: center;
}
#contentDiv {
padding: 20px;
height: 400px;
border: 2px solid black;
}
</style>
</head>
<body>
<div id="headerDiv">
<h1>Hlavicka stranky</h1>
</div>
<div id="contentDiv">
<h1>Hlavny obsah</h1>
</div>
</body>
</html>
V poslednej ukážke sme zadefinovali štýl aj cez selector typu elementu (body) a aj cez id atribút elementov v kóde. Možno ste si hneď položili otázku, čo keď chceme, aby vyzerali dva elementy rovnako. Alebo čo keď budeme mať tri divy a chceme, aby prvé dva mali rovnaký štýl a tretí aby sa od nich dizajnovo odlišoval. Cez atribút ID to zatiaľ neviete, pretože by mal mať každý element svoje unikátne (jedinečné) id a my chceme, aby dva divy vyzerali rovnako. Presne preto existuje ešte jeden atribút, ktorý má podobné využitie a význam ako ID, ale niektorými vlastnosťami sa od neho líši. Názov tohto atribútu je class (trieda) a jeho základnou vlastnosťou je, že jeho hodnota nemusí byť unikátna. Čo to znamená? Že v dokumente HTML môžeme mať ľubovoľný počet elementov s rovnakou hodnotou tohto atribútu. Názov tohto atribútu je veľavravný, slúži na akési kategorizovanie podobných/rovnakých elementov do tried, či už podľa významu na stránke alebo práve podľa rovnakého/podobného dizanu. Je to niečo podobné, ako sa rozdeľujú zvieratá do jednotlivých tried a čeľadí. Použitie hodnoty tohto atribútu ako selectora pre definovanie štýlu je určené znakom bodky „.“ narozdiel od mriežky pri id. V nasledujúcej ukážke si vyskúšame definovanie štýlu aj cez typ elementu, cez id, cez class a aj cez atribút style:
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin-bottom: 20px;
padding: 20px;
}
#div1 {
border: 2px dashed blue;
}
.divRedBorder {
border: 2px solid red;
}
#div5 {
border: 2px dashed brown;
}
#div6 {
border: 2px dashed black;
}
</style>
</head>
<body>
<div id="div1">Div1</div>
<div id="div2" class="divRedBorder">Div2</div>
<div class="divRedBorder">Div3</div>
<div class="divRedBorder" style="font-weight: bold;">Div4</div>
<div id="div5" class="divRedBorder">Div5</div>
<div class="divRedBorder" style="border: 2px dashed pink;">Div6</div>
</body>
</html>
Poďme si rozobrať dizajn jednotlivých divov v ukážke. Všeobecne pre každý div pomocou selectoru div sme zadefinovali spodný a vnútorný okraj. Štýl prvého divu sme zadefinovali pomocou atribútu id. Dizajn druhého a tretieho divu sme určili pomocou triedy divRedBorder. Všimnite si, že druhý div má nastavenú hodnotu atribútu id a tretí nie. Zadať atribút id nie je nevyhnutné, naschvál sme použili tento príklad, aby ste videli, že sa nič nedeje, ak element tento atribút zadaný nemá a ak aj má, ale nie je použitý v css. Štvrtý div má použitú triedu divRedBorder, ale má zadanú farbu orámovania cez atribút style. Vo výsledku sa prejaví práve táto hodnota, pretože atribút style je v hierarchii pravidiel na nižšej úrovni. Štýl v hlavičke bol definovaný akokeby vyššie – skorej, takže sa aplikuje štýl definovaný neskôr – nižšie. Nateraz nám stačí vedieť, že hodnota atribútu style jednoducho prebije štýl z hlavičky. V piatom dive je zase demonštrované, že definovanie štýlu cez id je silnejšie – nadradenejšie ako cez triedu, vo výsledku sa aplikuje farba určená pomocou id selectora. V šiestom dive sme zadefinovali farbu aj cez selector id, class a aj cez atribú style. Vo výsledku sa zobrazí ružové orámovanie, pretože style je najnižšie v hierarchii pravidiel. V tejto ukážke ste mali možnosť vidieť, ako môžeme priradiť hociktorému elementu hocijaký štýl. V nasledujúcej kapitole si ukážeme, ako sa to dá ešte efektívnejšie zadávať.