1. ČO SÚ KASKÁDOVÉ ŠTÝLY (CSS)?

Kaskádové štýly, anglicky Cascading Style Sheets, je jazyk určujúci základnú grafickú podobu webových stránok a ich rozloženie. Používa sa v kombinácii s HTML, XHTML alebo XML, kde popisuje spôsob zobrazenia jednotlivých komponentov. Elementy, ktoré CSS nedefinujú zostávajú v defaultnej (pôvodnej) podobe.

Štruktúra webu, respektíve dokumentu, vytvorená v HTML tak zostáva oddelená od vzhľadu. Vďaka tomu získavame priestor na jednoduchšie a komplexnejšie úpravy aj rýchlejšie zobrazenie obsahu stránok. Kaskádové štýly sa preto postupom času stali štandardnou náhradou pôvodného definovania prostredníctvom HTML tagov.

VÝHODY A NEVÝHODY KASKÁDOVÝCH ŠTÝLOV

Kaskádové štýly sú teda modernejšou alternatívou k pôvodnému rozvrhnutiu stránky prostredníctvom tabuliek a špecifikácii vzhľadu obsahu pomocou značkovacieho jazyka HTML. Tvorba webu s CSS oproti pôvodnému riešeniu ponúkne nasledujúce výhody:

  • rozsiahlejšie možnosti formátovania,
  • jednoduchšia a rýchlejšia aktualizácia či úprava obsahu (napríklad úprava jedného nadpisu H2 môže ovplyvniť všetky nadpisy H2),
  • jednoduchšie spracovanie obsahu vďaka oddeleniu štruktúry od štýlu,
  • kešovanie štýlov a s tým aj rýchlejšie načítanie stránky,
  • pokročilé úpravy CSS s využitím JavaScriptu alebo jeho frameworkov,
  • priestor pre responzívne weby a špecifické štylovanie pre rôzne zariadenia a rozlíšenia.

Hlavnou nevýhodou kaskádových štýlov bola vždy rôzna úroveň podpory webových prehliadačov. Stránka sa tak nemusela všetkým používateľom zobrazovať rovnako. Určitým problémom bola aj manipulácia s vertikálnym štýlovaním. S rozšírením jadra Chromium a príchodom CSS Gridu sú však oba nedostatky v podstate eliminované.

VLASTNOSTI A VYUŽITIE CSS

Medzi základné vlastnosti alebo charakteristiku kaskádových štýlov patrí dedičnosť. Vlastnosť deklarovaná pre rodičovský element sa vďaka tomu prenáša aj na všetkých potomkov triedy. Pokiaľ napríklad priradíme odseku červený font, tak túto farbu automaticky prevezmú všetky dedičné odseky. Môžeme tak meniť iba vlastnosti, ktoré sú špecifické len pre jeden prvok.

CSS potom nájde využitie pri definovaní:

  • layoutu (rozvrhnutie),
  • tabuliek,
  • rámčekov,
  • veľkosti a obtekania,
  • fontu a farieb.

ZÁKLADY SYNTAXE CSS

Pred začatím práce s kaskádovými štýlmi je nutné CSS súbor s pôvodným HTML dokumentom nejakým spôsobom prepojiť. K tomu môžeme pristúpiť tromi spôsobmi.

Prvým spôsobom je použitie atribútu <style> priamo v HTML. Tento spôsob však do istej miery eliminuje výhodu v podobe vyššej prehľadnosti a štruktúrovanosti kódu.

Druhým variantom je vloženie CSS do hlavičky webu: <style type=“text/css“> Kód štylovania </style> .

Zďaleka najelegantnejšie je však vytvorenie externého súboru. V tomto prípade je nutné do HTML dokumentu vložiť odkaz na súbor: <link rel=“stylesheet“ ref=“súbor.css“ type=“text/css“> .

 

Kaskádové štýly predstavujú pravidlá, ktorými hovoríme:

  1. Kde sa majú použiť – Selektor (identifikátor prvku)
    • blok vlastností je uzavretý do zložených zátvoriek{}
  2. Čo majú ovplyvniť vo výslednej stránke – Deklarácia vlastnosti (definícia štýlu)
    • názov vlastnosti
    • oddeľovač:
    • jedna alebo viac hodnôt (hodnoty sa od seba oddeľujú medzerou  )
    • ukončenie definície;

Nižšie uvedené pravidlo sa aplikuje na nadpis 1. úrovne, ktorému nastaví modrú farbu.

Predpokladom pre tvorbu kaskádových štýlov je správne štruktúrovaný dokument (X)HTML alebo XML:

  • označené jednotlivé časti dokumentu (blokové prvky div)
  • hierarchia dokumentu (jednotlivé úrovne nadpisov)
  • vhodné označenie úsekov textov (odsek, adresa, citát…)
  • platné vzájomné väzby medzi dokumentmi (odkazy)

Výsledný dokument by mal byť prehľadný. Začínať najdôležitejšími informáciami a postupovať k menej dôležitým.