Kombinovanie štýlov
Keď sme sa bavili o rozdieloch medzi atribútom id a class, povedali sme si, že hodnota atribútu id musí byť unikátna pre každý element, ale že hodnota atribútu class nie, že môže byť aj rovnaká pre viac elementov. Fakt, že viac elementov môže mať tú istú triedu, má výhodu v tom, že v prípade dvoch rovnako vyzerajúcich elementov stačí tento štýl zadefinovať raz do ich spoločnej triedy a obidva vyzerajú rovnako. Kód pre štýl nie je potrebné písať dva razy ten istý, ako by to bolo v prípade, keby sme to robili pomocou hodnoty atribútu id. Predstavme si ale situáciu, že by sme mali viacero elementov s rovnakou triedou, ale chceme, aby jeden mal niečo odlišné od ostatných. Toto by sme vedeli vyriešiť s doteraz nadobudnutými vedomosťami tak, že by sme zadefinovali triedu pre všetkých a tomu jednému by sme cez jeho id priradili ten dizajnový rozdiel. Čo ale v prípade, že by sme chceli mať dva elementy, aby sa odlišovali v tom istom od ostatných s tou istou triedou a aby aj oni mali danú triedu? Teraz by sme to asi vyriešili tak, že by sme obom cez idčka zadali ten rozdiel. Lenže tu by sme už neboli efektívni, pretože obidva odlišné elementy by mali cez svoje id zadané to isté, takže by sme mali zbytočne dva riadky s rovnakým kódom. V tejto kapitole si ukážeme viacero spôsobov, ako tento problém vyriešiť a teda zadať ten riadok iba raz tak, aby platil pre oba elementy.
Pri predstavovaní atribútov id a class sme si tiež povedali, že hodnota atribútu id musí byť text, ktorý nemôže obsahovať medzeru. Tým pádom jeho hodnota môže byť len jedno slovo zložené z viacerých znakov, ktoré určuje identifikátor daného elementu. Schválne sme túto skutočnosť nespomenuli aj pri atribúte class, pretože by to jednak nebola pravda a za druhé, sme to nechceli v danej kapitole zbytočne komplikovať. Pravda je teda taká, že atribút class môže obsahovať ľubovoľný počet hodnôt oddelených medzerou. Čo to znamená a na čo je to dobré? Môžeme mať v CSS nadefinovaných ja sto rôznych selectorov pre triedy a jednotlivým elementom môžeme priradiť žiadnu, jednu, dve, koľko len chceme z tých tried. Daný element si bude následne brať všetko zo všetkých, aplikujú sa všetky pravidlá CSS. Ak je kolízia niektorých pravidiel (rovnaké vlastnosti s rôznymi hodnotami), prednosť má to, ktoré je v kóde zadefinované nižšie, čiže neskôr. A presne touto vymoženosťou sa vyrieši náš problém s dvomi odlišnými divmi od ostatných. Keďže je jazyk CSS veľmi pružný, na vyriešenie niektorých problémov budete mať viacero možností a je na vás, ktorý spôsob použijete, výsledok bude rovnaký. V nasledujúcej ukážke náš problém vyriešime dvomi rôznymi spôsobmi a následne si obidva vysvetlíme, aby sme videli rozdiel:
<!DOCTYPE html>
<html>
<head>
<style>
div{
padding: 10px;
margin-bottom: 10px;
}
.spolocnaTrieda1{
border-color: red;
border-style: solid;
border-width: 4px;
}
.modreOramovanie{
border-color: blue;
}
.spolocnaTrieda2{
border-style: solid;
border-width: 4px;
}
.cerveneOramovanie{
border-color: red;
}
</style>
</head>
<body>
<h2>Metoda 1:</h2>
<div class="spolocnaTrieda1">Div 1</div>
<div class="spolocnaTrieda1">Div 2</div>
<div class="spolocnaTrieda1 modreOramovanie">Div 3</div>
<h2>Metoda 2:</h2>
<div class="spolocnaTrieda2 cerveneOramovanie">Div 1</div>
<div class="spolocnaTrieda2 cerveneOramovanie">Div 2</div>
<div class="spolocnaTrieda2 modreOramovanie">Div 3</div>
</body>
</html>
Ako je vidieť, v prvej metóde sme použili spoločnú triedu pre všetky tri divy, v ktorej sme definovali tri vlasnosti pre orámovanie – farbu, hrúbku a štýl. Pre tretí div sme určili triedu, ktorý definuje červenú farbu orámovania. Po priradení tejto triedy tretiemu divu, okrem toho, že má priradenú aj prvú triedu, je farba orámovania definovaná v prvej triede (modrá) prebila červenou, pretože je v kóde nižšie. Náš cieľ sme splnili. Skúste si teraz zadefinovanie triedy modreOramovanie zadať pred zadefinovanie triedy spolocnaTrieda1 a uvidíte, že farba bude červená, pretože je v kóde nižšie (neskôr). Toto je možno malá nevýhoda tejto metódy, kde sme v jednej triede definovali nejaký štýl pre všetky divy a potom sme zadefinovali triedu pre špecifický div, ktorá prebije pravidlo z tej prvej. Tu nastáva v podstate skutočnosť, že náš špecifický div má troška zbytočne pravidlo z prvej triedy o farbe orámovania, keď že je prebité... Druhá metóda je podľa mňa elegantnejšia. V spoločnej triede spolocnaTrieda2 sme si zadefinovali iba tie pravidlá, ktoré chceme pre všetky divy. Pre červenú farbu orámovania sme si zadefinovali vlastnú triedu a priradili tým elementom, ktoré majú byť červenou. Tretiemu divu sme priradili triedu, ktorá je určená na modrú farbu orámovania. Možno sa vám teraz táto metóda zdá zložitejšia, lebo sme museli prvým dvom divom priraďovať dve triedy a navyše mať namiesto pôvodnej jednej spoločnej triedy jednu spoločnú + jednu pre červené orámovanie, takže v časti style to zaberá viac riadkov a kódu. Všimnite si ale, že v tejto metóde sme nič neprebíjali, poradie kódu nie je podstatné a nič sme nepísali dva razy alebo niečo podobné. Táto metóda sa možno nezdá praktickejšia na začiatku, resp. v tomto momente, ale keby mal náš kód stovky riadkov, tak sú tieto triedy oveľa použiteľnejšie a bolo by ľahšie s nimi pracovať.
To, že môžeme elementom pridávať koľko len tried chceme, je asi najsilnejšia stránka jazyka CSS. Môžeme mať takto jednotlivé pravidlá aj pozadávané jednotlivo, že by sme mali na každé pravidlo svoju triedu a potom to len naskladať ako si želáme. Možností je neskutočne veľa, ako pozadávať elementom žiadaný dizajn. Náš pôvodný problém, ktorý sme rozobrali na začiatku tejto kapitoly (spoločná trieda pre divy ale dva z nich chceme mať odlišné od ostatných), sa dá ale vyriešiť napríklad aj bez zadania viacerých tried. Vráťme sa k vete, kde sme povedali, že by sme to vedeli vyriešiť napríklad tak, že by sme zadefinovali jednu triedu všetkým elementom a tým dvom by sme pomocou idčiek zadali požadovaný rozdielný vzhľad. Problém bol, že by sme mali dva tie isté riadky kódu (to rozdielne pravidlo – iná farba orámovania) priradené obom idčkam.
Toto sa dá v jazyku CSS vyriešiť veľmi jednoducho a to tak, že zadaný kód bude iba na jednom riadku. V jazyku CSS je totižto možné zadávať jednotlivé pravidlá, kód v množinových zátvorkách, viacerým selectorom naraz. Čo to znamená? Doteraz sme skupinu pravidiel (obsah jedného páru množinových zátvoriek) priradili vždy buď jednej skupine elementov (p, span, div...), jednej triede alebo jednému idčku. Pri zadávaní cieľa je ale možné použiť aj viacero selectorov, ktoré je potrebné oddeliť čiarkou. Takže jednu skupinu pravidiel môžeme kľudne priradiť aj napríklad typu elementu, dvom triedam a štyrom idčkám. Poďme si to ukázať:
<!DOCTYPE html>
<html>
<head>
<style>
div{
padding: 10px;
margin-bottom: 10px;
}
.spolocnaTrieda1{
border-color: red;
border-style: solid;
border-width: 4px;
}
#div3, #div4{
border-color: blue;
}
</style>
</head>
<body>
<div class="spolocnaTrieda1">Div 1</div>
<div class="spolocnaTrieda1">Div 2</div>
<div id="div3" class="spolocnaTrieda1">Div 3</div>
<div id="div4" class="spolocnaTrieda1">Div 4</div>
</body>
</html>
Ako je vidieť v poslednej ukážke, modré orámovanie sme zadali naraz pre dva selectory, pre element s idčkom div3 a div4. Takto je možné naraz zadávať ľubovoľné pravidlá pre akékoľvek selectory, kľudne môžeme kombinovať aj triedy, idčka a typ elementov spolu, stačí ich len oddeliť čiarkou. Okrem toho, že môžeme zadávať elementom viacero tried alebo že môžeme pravidlá v CSS priradiť naraz viacerým selectorom, existuje ešte jedna praktika, ktorou by sa v istom prípade dal vyriešiť náš problém. Toto je dá sa povedať posledná vymoženosť jazyka CSS, ktorú si v tejto sekcii predstavíme a spolu s predošlými dvomi ponúka širokú škálu možností, ako si čo najjednoduchšie a najefektívnejšie zadať želaný dizajn pre jednotlivé elementy.
Predstavme si situáciu, že máme na stránke jeden hlavný div, ktorý bude obsahovať niekoľko elementov rôzneho typu. A chceme, aby všetky elementy v ňom mali isté spoločné pravidlá. Mimo tohto divu máme tiež niekoľko elementov rôzneho typu a tie zase budú mať iné pravidlá. Ale niektoré z nich budú mať rovnaké, ako tie vo vnútri divu. Pomocou selectorov pre typ elementu (div, span a pod.) by sme štýl zadať nemohli, pretože by dané pravidlá neplatili len pre elementy vo vnútri divu, ale platili by aj pre elementy mimo divu a to nechceme, tie budú mať svoje pravidlá. Mohli by sme to vyriešiť tak, že by sme každému elementu mimo divu priradili nejakú triedu, ktorej by sme zadefinovali štýl spoločný pre všetky divy. Následne by sme mali osobitne druhú a tretiu triedu pre elementy mimo divu a pre elementy vo vnútri divu, v ktorých by sme definovali pravidlá, ktoré majú odlišné. Je to jedno z možných riešení, ale v tomto prípade by mali tým pádom všetky elementy po dve triedy.
Tu sa dá využiť jeden z tzv. kobinátorov (combinator) jazyka CSS a tým je selector potomka (descendant selector). Jeho syntaktická podoba je daná medzerou (space – medzera) medzi jednotlivými selectormi. O čo ide? Tento kombinátor môžeme použiť na dva selectory, ktoré idú v hierarchii za sebou, to znamená, že prvý je nadradený – je rodičom (parent) toho nasledujúceho, kde ten druhý je jeho potomkom (child – dieťa, descendant – potomok). Čiže druhý selector je vnorený, je obsahom toho prvého – rodiča. Ak zapíšeme takto dva selectory za sebou a medzi ne dáme medzeru, kombinujeme tým uplatnenie pravidiel na element, ktorý je daný druhým selectorom, ale iba v tom prípade, ak je potomok prvého selectora. Asi to je nezrozumiteľné, skúsim ešte raz. Ak si zadáme pravidlo napríklad hlavnyDiv span { color: red; }, tak nebudú červenou farby všetky spany v celom dokumente, ale iba tie, ktoré sa nachádzajú v elemente hlavnyDiv. Tým, že sme dali pred selector span medzeru a selector rodiča, určili sme, že to bude platiť iba pre spany v tomto elemente. Presne týmto spôsobom vyriešime náš problém, že jeden štýl určíme pre všetky a druhý štýl určíme pomocou kombinátora:
<!DOCTYPE html>
<html>
<head>
<style>
p, h2, span{
margin-bottom: 10px;
color: red;
}
.hlavnyDiv p, .hlavnyDiv h2, .hlavnyDiv span{
color: blue;
}
</style>
</head>
<body>
<div class="hlavnyDiv">
<p>Text v p v dive</p>
<h2>Nadpis v dive</h2>
<span>span v dive</span>
</div>
<p>Text v p mimo divu</p>
<h2>Nadpis mimo divu</h2>
<span>span mimo divu</span>
</body>
</html>
Na začiatku si definujeme spoločný štýl pre všetky tri typy elementov v celkom dokumente. Potom však chceme, aby tieto tri elementy vo vnútri nášho divu mali inú farbu textu. Pomocou kombinátora potomka (medzera) sme určili naraz farbu pre tieto tri elementy na inú, ak sa nachádzajú vo vnútri divu. Rád by som upozornil, že možno by ste posledné pravidlo zadali takto : .hlavnyDiv p, h2, span. Toto by spôsobilo, že by modrou farbou boli aj spany a nadpisy mimo divu, pretože to čo je za čiarkou, je akokeby samostatné nové pravidlo, neviaže sa to na to, čo bolo pred čiarkou, takže v tomto prípade span a h2 by sa nijak neviazalo na .hlavnyDiv, to by platilo iba pre p.
Využívane týchto vymožeností je naozaj veľmi efektívne. Ak si takto šikovne navrhneme štýl a celkovo zadelenie elementov do tried a do divov, bude práca s daným kódom oveľa jednoduchšia. Nikdy dopredu presne nevieme, ako bude kód vyzerať a čo všetko budeme musieť nakódovať, kód jednotlivých častí sa často počas práce upravuje a menia sa požiadavky za chodu, takže je nutné dodatočne niečo pridávať a meniť. Výhoda je v tom, že ak napríklad už v momente, kedy niečo pridávame do nejakej časti stránky, máme zadefinovaný štýl pre všetky typy elementov v danej sekcii (dive), tak po pridaná tohto elementu v HTML bude na nové elementy automaticky aplikovaný šýtl. Ak by bol štýl určený triedami, ktoré majú elementy v tejto sekcii, tak iba jednoducho priradíme túto triedu aj novému elementu a nemusíme meniť dodatočne štýl. Ak by sme napríklad po istom čase chceli zmeniť naraz štýl celej skupine elementov v jednej sekcii (dive), stačí zmeniť pár riadkov v kóde CSS a v HTML nemusíme nič meniť. Tieto praktiky a vedomosť, ako správne veci navrhnúť a oštýlovať získa programátor len skúsenosťami:)