CSS – čo je to a na čo sa používa

CSS kód
Pravdepodobne ste už počuli o CSS. CSS je skratka anglických slov Cascading Style Sheet, čo sa dá preložiť ako List Kaskádových Štýlov (alebo skôr List následného štylizovania). Je to vlastne programovací jazyk pre vizuálnu štylizáciu výstupu kódu HTML, xHTML, alebo XML. Jazyk bol navrhnutý, aby umožnil lepšie vizuálne zobrazenie webstránky. Pôvodne HTML mal umožňovať vizuálnu štylizáciu obsahu, ale samotný jazyk HTML nikdy nedospel do tohto štádia. Dnes HTML, Javascript a CSS tvoria základ technológie pre tvorbu webstránok. HTML bez CSS môže existovať, ale CSS bez HTML nie. Z toho vyplýva, že CSS je rozšírenie a na funkcionalitu nemá žiaden vplyv.

 Čo dokážem spraviť s CSS?

V dnešnej dobe je už všetkým web vývojárom jasné, že HTML je poskytovateľ obsahu a o vizuálnu stránku sa stará CSS. Keď si spomeniem na prvé webstránky, takmer všetky boli postavené na tabuľkách, čo umožňovalo vizuálne umiestnenie prvkov na stránke, podľa tvorcu stránky. Neskôr sa na internete udomácnilo slovo „table-less“. Označovalo stránku (template), kde hlavná štruktúra stránky bola postavená na blokovom tagu <div> a samotný rozvrh a výzor stránky bol štylizovaný pomocou CSS. Dnes je vizuálna časť webstránky formátovaná výhradne pomocou CSS.

…a čo teda dokážeme pomocou CSS?

  • nastavenie fontu písma
  • nastavenie farieb
  • odsadenie a okraje
  • nastavenie výšky a šírky elementov na stránke
  • rozmiestnenie elementov
  • nastavenie obrázkov ako tapety (background)
  • najnovšie aj animácie
  • deformácie v 3D rovine
  • a veľa iného….

 Aké výhody mi poskytuje CSS?

Najzákladnejšou výhodou CSS je centralizované štylizovanie vizuálnej časti stránky. Ak si predstavíme stránku s 50 podstránkami, kde by nastavenie farby písma bolo v HTML, potom úprava na inú farbu by nám zabrala hodiny – týždne. Ak použijeme na nastavenie farby písma CSS a správne si to na začiatku rozvrhneme, potom zmena farby písma zaberie doslova pár sekúnd. Toto však nieje jedinou výhodou CSS. Keď sa pozrieme na štruktúru stránky, najzákladnejšou vizuálnou črtou stránky je samotné rozloženie elementov na stránke. Toto rozloženie je výsledkom štylizovania pomocou CSS. Od toho sa odvíja ďalšia výhoda a to zmena rozloženia, pri prezeraní stránky z mobilného zariadenia. Pomocou CSS viete kompletne „preskladať“ rozloženie stránky na základe šírky zobrazovacieho zariadenia, alebo šírky okna v ktorom je stránka zobrazovaná. Takto by som mohol opisovať výhody na ďalších 200 riadkov, ale pre základnú predstavu o využití to zatiaľ stačí.

Má CSS aj nevýhody?

Ako každý programovací jazyk, aj CSS má svoje nevýhody. Najväčšou nevýhodou je jeho jednoduchosť. Krivka učenia CSS je celkom rýchla a ľahko sa v ňom môžte stratiť. CSS ako také používa dedičnosť a zároveň umožňuje adresnosť (aplikovanie štýlu na konkrétny prvok, pomocou selektorov). Častokrát, hlavne na začiatku, sa stretnete s problémom že Vám jedna deklarácia prepisuje druhú. Preto samotný jazyk CSS asi viac ako iné vyžaduje disciplínu pri písaní kódu. Teraz nemám na mysli syntax, ale štruktúru a samotné označovanie prvkov (o tom viac v ďalšom článku). Samotný kód je jednoduchý, ale logika aplikovania štýlu na jednotlivý prvok môže byť niekedy nočnou morou. Hlavne v tedy, keď nieste „pánom“ generovaného HTML. Ďalšou nevýhodou je podpora prehliadačov. Keďže CSS sa interpretuje až v prehliadači užívateľa, je CSS závislé na podpore prehliadača. V dnešných moderných internetových prehliadačoch je už situácia prijateľná a chyby interpretácie CSS sú už dnes vo veľkej miere odstránené. Najväčším hriešnikom v tomto bol Internet Explorer do verzie 6. Pre webdizajnéra je dôležité, aby kontroloval zobrazovanie stránky vo všetkých majoritných prehliadačoch, aby si bol istý že sa v nich stránka zobrazuje správne.

Pod čiarou

Tento článok bol iba informatívny a nezachádzal do podrobností. Ak máte záujem  sa CSS venovať aj ďalej, v ďalšom článku sa už na CSS a ako ho použiť pozrieme dôkladnejšie. Ak by mal niekto záujem, tuto nájde aktuálny štandad.

Nezabudnite, ak sa Vám článok páčil zdieľajte ho, komentujte. Samozrejme konštruktívna kritika je vždy vítaná 🙂

(Celkom zobrazené 2 578 krát, 68 dnes)
Tags

Pridaj komentár

Vaša e-mailová adresa nebude zverejnená. Vyžadované polia sú označené *