Kaskádové styly, Cascading Style Sheets je jazyk, který slouží k přidělování vlastností objektům webových stránek. CSS vzniklo 17. prosince 1996. Už je na světě návrh CSS 2, vylepšené a složitější formy stylů, které ale v nejrozšířenějším prohlížeči Internet Exploreru moc nefungují. Určujeme pomocí něj rozložení, barvy a písma. Umožňuje nám přizpůsobení různým rozměrům zobrazení (PC, mobilní zařízení).
Zjednodušuje nám údržbu stránek – umožňuje sdílení jednoho stylu více pro více podstránek. Díky tomu se jedna změna projeví na všech stránkách, které soubor načítají.
Stejně jako HTML je CSS standard vyvinutý organizací World Wide Web Consortium (W3C).
Je otevřený a podporován webovými prohlížeči na všech platformách.
Soubor má příponu *.css.
Propojení s HTML
Máme 3 možnosti použití HTML:
- Propojení se
souborem *.css (umístíme do hlavičky):
<link rel=“stylesheet“ href=“cesta k souboru“> - Vlastnosti určíme
konkrétnímu prvku pomocí atributy HTML tagu:
<span style=“font-weight: bold;“>Tučný text</span> - Nebo vložením CSS kódu do párového tagu <style>CSS styly</style> v hlavičce.
Syntaxe
Syntaxe CSS je velmi jednoduchá.
Příklad syntaxe:
h1 {color: blue; font-size: 12px;}
- „h1“ je tzv. selektor – vybíráme jím HTML prvek nebo třídu prvků, kterým chceme přidělit vlastnosti. V tomto případě vybíráme nadpis první úrovně. Je Celkem 6 úrovní. Základně je h1 největší a h6 nejmenší.
- Následuje první složená závorka – začátek deklarací pro selektor. „{„
- V příkladu
následují dvě deklarace oddělené středníkem.
- První určuje barvu nadpisu (color).
- Druhá určuje velikost písma (font-size).
- Jednotlivé deklarace se skládají z vlastnosti, následuje dvojtečka a hodnoty.
- Deklarace pro selektor jsou uzavřeny druhou složenou závorkou. „}“
Nevyhody:
- Hlavní nevýhodou CSS je ne vždy dostatečná podpora v majoritních prohlížečích. Prohlížeče obsahují v implementaci CSS chyby a je někdy nesnadné napsat kód tak, aby se ve všech prohlížečích výsledek zobrazil stejně.
Vyhody:
- Rozsáhlejší možnosti formátování.
- Jednoduchá změna formátování.
- S pomocí CSS můžeme jednoduše formátovat.