Úvod do jazyka CSS

V časti o jazyku HTML sme viackrát naznačili, že sa nejdeme zaoberať pozíciou jednotlivých elementov, ich rozmerom, vzhľadom a rozložení (umiestnení) na stránke, pretože je to všetko vec jazyka CSS. Presne na toto, na dizajn a všetko čo s tým súvisí, slúži jazyk CSS. Počas skúšania ukážok v jazyku HTML ste mali možnosť vidieť defaultné (prednastavené – štandardné) zobrazenie a aj správanie elementov. Všetky elementy sa zobrazovali tak, ako ste ich videli, bez použitia kódu v jazyku CSS. Samozrejme, že sa vám to zdalo škaredé alebo neatraktívne a vraveli ste si, toto vôbec nevyzerá ako časti tých stránok, na ktoré denno denne chodím. Na čo sa toto učíme! V skutočnosti to bolo presne to isté, čo denne navštevujete, len to nebolo ešte graficky upravené, čiže nemalo to spravený dizajn. A práve ten dizajn je veľkým meradlom pre to, čo ten človek vidí na tej stránke, resp. ako samotná stránka vyzerá. Po zvládnutí tejto sekcie budú vaše webstránky vyzerať tak ako tie, po ktorých chodíte ;-)

Možno sa pýtate, na čo je to dobré, že to je oddelene. Načo dva jazyky. Prečo sa celý design nerieši pomocou atribútov, tak ako sme to sem tam spravili, napríklad, keď sme dali border tabuľke alebo keď sme nastavovali rozmery elementu textarea (height, width) a podobne. Praktický význam, prečo je to osobitne pochopíte kus neskôr v tejto sekcii, nateraz si ale môžeme povedať zopár dôvodov. Predstavte si, že máte na stránke formulár, ktorý má strašne veľa položiek (inputov). Chceme ale, aby každý element vyzeral rovnako. Ako by sme to spravili, keby sa design určoval iba pomocou atribútov v jazyku HTML? Museli by sme pracne ručne každému elementu definovať to isté. Základom programovania je, nerobiť viackrát to isté, čiže nepísať opakujúci sa kód. Nie je to efektívne no a komu sa to chce :-D Programovanie má život zjednodušovať! Presne tento problém rieši jazyk CSS. Pomocou neho si môžeme nadefinovať ľubovoľne veľa štýlov pre hociktorý element a potom len pomocou identifikátora štýlu priradiť jednotlivým elementom, ako majú vyzerať alebo aj celej skupine elementov. Druhý význam toho je, že kód jazyka HTML a CSS môže byť aj oddelený (dva rôzne súbory, jeden pre HTML a druhý pre CSS). To má výhodu vtedy, keď chcete meniť dizajn, ktorý zväčša robí dizajnér (grafik), ale zároveň aj meniť kód stránky – logiku (vývojár mení ten kód v jazyku HTML). Obidvaja by mohli pracovať na svojej práci naraz nezávisle a nemuseli by sa vŕtať v tom istom. Takisto môžete mať stránku, ku ktorej bude patriť 5 rôznych dizajnov (5 rôznych súborov). Jazyk HTML ostane nemenný, takže obsah stránky bude rovnaký. Rôzne ale budú celkovo dizajny stránky, ktoré môžete meniť ako chcete alebo môžete dať na výber používateľovi, ktorý dizajn sa mu páči a podľa toho sa načíta príslušný dizajn. Takisto môžete mať spravený jeden dizajn stránky, resp. v súbore mať nadefinované kadejaké štýly pre jednotlivé elementy, môže byť aj niekoľko rôznych štýlov pre ten istý element a vy si určujete, pre aký element aký štýl použijete. Tým pádom môžete mať aj jeden veľký CSS súbor a použiť ho aj na dvadsiatich rôznych stránkach. Jednoducho, CSS má samé výhody a je to navrhnuté veľmi rozumne a efektívne. Poďme sa teda na to pozrieť, ako to vyzerá.

Ešte predtým by som ale upozornil na dve dôležité veci, ktoré sa týkajú jazyka CSS. Možno sa vám to na začiatok bude zdať blbé, resp. nebudete chápať, prečo to tak je a vaše učenie to bude komplikovať. Ale nebojte sa, všetko to chce iba čas a onedlho budete úplne všetkému rozumieť. Na začiatok tieto dve veci ani pre vás nebudú hrať veľmi vážnu rolu a veľmi sa vás týkať nebudú, je ale dobré o nich zmieniť. Prvá vec je, že webové prehliadače nie sú úplne medzi sebou kompatibilné. Čo to znamená v praxi? Že neexistuje akýsi štandard prehliadačov, resp. sa svet nedohodol, ako čo sa musí správať a zobrazovať vo svete webstránok za všetkých okolností. To znamená, že naprogramovaná stránka s dizajnom (HTML + CSS) sa nemusí zobraziť rovnako vo všetkých prehliadačoch. Nebojte sa ale, nie sú to zase také svetaborné rozdiely, žeby stránka bola nečitateľná alebo niečo podobné. Niekedy to ale spôsobí dosť zlé zobrazenie stránky. Moderné prehliadače ako Firefox a Chrome sú medzi sebou veľmi podobné. Pravdepodobne aj najnovšia verzia Internet Exploreru. Jeho staršie verzie na starších operačných systémoch (XP, Vista a podobne) však majú dosť veľké obmedzenia a celkovo s Internet Explorerom je niekedy ťažko, ide si svojim životom, takže ja osobne ho neodporúčam. Je to ale čisto môj osobný názor a nesnažím sa vám ho vnútiť, len odporúčam používať Firefox alebo Chrome, to je celé ;-) Druhá skutočnosť, na ktorú by som rád upozornil je, že keď sme sa postupne učili tagy v jazyku HTML, nikdy neboli jednotlivé tagy ovplyvnené inými. Myslím tým to, že každý tag sa zobrazil ako sa má a vyzeral ako má a bolo jedno, aký tag sa nachádza pred ním alebo za ním. To, čo sme sa vás snažili naučiť, vždy fungovalo s ukážkovým kódom. Aj keď ste si vy skúšali sami nejako jednotlivé vedomosti kombinovať, určite sa zobrazilo všetko, čo sa malo. V jazyku CSS je toto troška ťažšie. Budú situácie, kedy si budeme vysvetľovať nejakú vlastnosť a hodnotu, ktorá zapríčiní, že sa nejaký element bude zobrazovať tak, ako si vysvetlíme. Avšak s rovnakým nastavením sa môže zobrazovať inak, resp. na inom mieste, ak je pri ňom nejaký iný element s inou vlastnosťou, ktorá ho ovplyvňuje alebo on je obalený (je obsahom) nejakého elementu s inými nastaveniami a podobne. Nejdem sa o tom teraz rozpisovať, o chvíľu sa k tomu dostaneme v príslušnej kapitole, len som chcel na začiatku podotknúť, aby ste to očakávali. Je to niečo ako stavebnica lega. Ak sú kocky na sebe poukladané a spodné dve odoberieme, vchné, ktoré sú na nich poukladané, sa zrútia. Takto je to aj s elementami na stránke:)

Dosť ale bolo kecania, poďme si už konečne niečo ukázať, aby sme mali motiváciu. Neustále sa v tejto sekcii budeme rozprávať o štýloch. Chápme štýl ako skupinu nastavení (pravidiel), ktoré aplikujeme konkrétne na nejaké elementy. CSS jazyk zahŕňa množstvo rôznych vlasností (property – vlastnosť), ktoré môžu mať viacero hodnôt (value - hodnota). Spojenie vlastnosť – hodnota definuje jedno pravidlo, ako sa bude element zobrazovať alebo ako bude vyzerať. Sú tri rôzne spôsoby, ako zapisovať jazyk CSS. Na začiatok si ukážeme ten najjednoduchší na pochopenie a to je zadanie štýlu priamo v deklarácii elementu, čiže priamo v tagu jazyka HTML pomocou atribútu style. Tak ako sme sa učili tagy v jazyku HTML a niekedy sme určovali aj atribúty elementu, rovnako budeme definovať aj štýl (dizajn – CSS). Ako už bolo spomenuté, slúži na to atribút style, ktorého hodnota je jedno a viac pravidiel (vlastnosť s hodnotou tvorí jedno pravidlo) jazyka CSS. Dokopy tieto pravidlá tvoria štýl pre daný element. Pravidlo v jazyku CSS vyzerá nasledovne. Najprv je meno vlastnosti, za ním nasleduje dvojbodka, za ňou hodnota a na konci bodkočiarka. Vlasnosťami je napríklad font písma, farba, výška, hrúbka orámovania a podobne, hodnotami sú napríklad Arial, red (červená), 230px (pixelov) a podobne.

Na demonštráciu si ukážeme dve vlasnosti, ktoré už poznáme z jazyka HTML, pretože nesú rovnaký názov aj v jazyku CSS a to je šírka (width) a výška (height). Aplikujeme ich na element typu textarea a hodnotami nastavíme rozmer tohto elementu. Je tu jeden rozdiel oproti zadávaniu v jazyku HTML pomocou atribútov. Predtým sme zadali len číslo, ktoré určovalo počet pixelov. Hodnoty v jazyku CSS však majú viacero jednotiek (vysvetlíme si neskôr) a tak je nutné k číslu definovať aj typ jednotky, v našom prípade to budú pixely, ktoré sa určujú skratkou px za číslom. Náš kód bude teraz vyzerať tak ako predtým, len pridáme atribút style, ktorého hodnota budú dve pravidlá za sebou. Nasledujúce ukážky si môžete skúšať ešte v simulátore, keď ich bude nutné skúšať už v samostatnom súbore, budete na to upozornení:

<!DOCTYPE html>
<html>
    <head>
    </head>
    
    <body>
    
    <form>
        <textarea value="Zadajte text..." style="width: 400px; height: 300px;"></textarea>
    </form>

    </body>
</html>

Skúste si pomeniť hodnotu vlastností v atribúte style, aby ste videli, že to naozaj funguje. No a to je na začiatok celé, gratulujem, práve ste zapísali prvý kód v jazyku CSS ;-) Ešte by som rád vysvetlil, že vlastnosti v jazyku CSS sú globálne pre takmer všetky elementy. To znamená, že ak už teraz viete vlastnosti height a width, môžete ich aplikovať na akýkoľvek tag ako napríklad p, li, td, div a podobne. Avšak, nie pri všetkých vám budú fungovať (zobrazovať sa správne) hneď a samostatne. Ako sme už spomenuli, v jazyku CSS je správanie niektorých elementov a niekedy aj samostatných pravidiel závislé aj na ostatných pravidlách. V istých prípadoch bude nutné pridať ešte nejaké vlastnosti, aby ste videli výsledný efekt. K tomu sa však samozrejme neskôr dostaneme. V nasledujúcich kapitolách si budeme postupne preberať najpoužívanejšie vlastnosti a ich rôzne hodnoty a vysvetľovať si ich správanie, čiže ako vyzerajú.