Jan Štráfelda - Průvodce online -projektem
Praha/Mělník  |  776 678 044  |  jan@strafelda.cz  |  Pošlete mi poptávku

Kaskádové styly (CSS)

Kaskádové styly, známé také pod zkratkou CSS (z anglického Cascading Style Sheets) jsou moderním jazykem umožňujícím účinné formátování stránek psaných ve značkovacích jazycích HTML, XHTML či XML.

Proč kaskádové styly vznikly

Když ještě kaskádové styly neexistovaly, obsah stránky se formátoval pomocí HTML elementů. Například existovala značka <font>, která nastavovala barvu a velikost písma. Zpočátku také nebylo možné stránku nijak složitěji naformátovat, například vícesloupcový layout tehdy nešlo vytvořit jinak, než pomocí různě do sebe zanořených tabulek.

Logo aktuální verze kaskádových stylů, CSS 3 Logo aktuální verze kaskádových stylů, CSS 3Naproti tomu, jsou-li kaskádové styly správně používány, umožňují naprosté oddělení vzhledu dokumentu od jeho obsahu (včetně tzv. beztabulkových layoutů, které už jsou mnoho let standardem). Toto oddělení obou vrstev (prezentační a strukturální) zvyšuje přístupnost webu a zlepšuje jeho použitelnost na různě velkých displejích mobilních zařízení či třeba lepší audio výstupy na slepeckých čtečkách.

Další výhody kaskádových stylů proti používání samotného HTML:

Syntaxe – jak kaskádové styly fungují

Není to žádná velká magie. Kaskádové styly jsou vlastně sadou určitých vlastností a jejich hodnot, zapsaných jako text:

color: red

Na příkladu vidíte vlastnost color a jí přiřazenou hodnotu red. Hodnota se od vlastnosti odděluje dvojtečkou. Daný prvek tedy bude mít text obarvený červeně. Pokud by za sebou následovaly dvě vlastnosti, oddělili bychom je od sebe středníkem. Písmo prvku s těmito kaskádovými styly tedy bude červenétučné:

color: red;
font-weight: bold

Kompletní seznam CSS vlastností najdete třeba na webu Mozilla.org.

Typy CSS podle připojení k HTML dokumentu

Inline styly (inline style sheets)

Inline CSS jsou kaskádové styly přímo zapsané v atributu style. Například následující kód obarví daný podnadpis načerveno:

<h2 style="color: red">Červený nadpis</h2>

Takové řešení má však několik nevýhod. Za prvé nejde o skutečné oddělení formy od obsahu popsané výše, protože vše se stále míchá v podobě špagetového kódu. A za druhé, tento zápis je třeba přidat ke každému prvku, takže hodně narůstá objem kódu a snižuje se rychlost načítání webu.

Proto se inline styly při kódování běžných webů používají jen výjimečně. Hodí se však třeba k rychlému označení prvků, jehož podobu si chcete zkontrolovat v prohlížeči. A nenahraditelné jsou inline CSS při kódování newsletterů (protože starší verze Outlooku a některé freemaily odřezávají hlavičky mailů, takže se styly zapsané jinak než inline vůbec neaplikují).

Interní styly (embedded style sheets)

Kaskádové styly mohou být také zapsány hromadně v hlavičce dokumentuelementu <style> a aplikují se tak na všechny odpovídající elementy na dané stránce:

<style>
h2 {
   color: red;
}
</style>

To už je lepší řešení. Vidíte, že dané pravidlo se použije na všechny nadpisy druhé úrovně <h2>. Přesto je zde ještě jedna muška – s každou načtenou stránkou načítáme kaskádové styly znovu. A pokud chceme změnit styl nějakého prvku na webu, musíme upravit CSS v HTML kódu všech stránek.

Externí styly (external style sheets)

V tomto případě výše uvedenou definici, původně zapsanou mezi otvírací a uzavírací tag elementu <style>, vložíme do zvláštního souboru s koncovkou .css a následujícím zápisem ho pak připojíme k HTML dokumentu (vkládá se do hlavičky dokumentu, tj. mezi tagy <head></head>):

<link rel="stylesheet" href="styles.css>

Externí CSS soubor už se nám bude kešovat, takže ho prohlížeč stáhne jen jednou a procházení dalších stránek webu se tím značně zrychlí.

Selektory a kaskádování

Jak už jsme si řekli, pokud nepožíváme inline zápis, kde je jasné, k čemu se dané kaskádové styly vztahují, vypadá CSS v hlavičce či externím souboru zápis takto:

h2 {
   color: red;
}

Oné části, jež určuje, na jaký prvek se vlastnost uplatní (v tomto případě element <h2>) se říká selektor. Za ním pak následují složené závorky, které vymezují tzv. deklaraci – samotné CSS vlastnosti, které odpovídajícím prvkům přiřazujeme.

Kaskádové styly nabízí celou řadu selektorů. Vlastnosti lze přiřazovat podle typu elementu, podle atributů (nejčastěji id či class), podle umístění elementu v hierarchickém stromu dokumentu nebo tzv. pseudotřídám (např. pseudotřída a:visited aplikuje CSS deklaraci jen na navštívené odkazy).

Uvedu několik příkladů selektorů:

p {...}             /* jakýkoliv odstavec */
p#sidebox {...}     /* odstavec s atributem „id“ s hodnotou „sidebox“ */
p.rounded {...}     /* odstavec s atruibutem „class“ s hodnotou „rounded“ */
p[foo="bar"] {...}  /* odstavec s atributem  „foo“, který má hodnotu „bar“ */
p:first-child {...} /* prvni odstavec (pseudotřída) */
p div {...}         /* všechny elementy typu „div“ vložené v odstavcích */

Kaskádování v CSS

Slovo kaskádové, jež mají CSS v názvu, značí jejich nejcharakterističtější vlastnost – jednotlivá pravidla se dědí k dalším prvkům, které jsou v hierarchickém stromu dokumentu zanořené níže. Neboli, vlastnost kaskáduje. Například definujeme-li textu odstavce žlutou barvu, tuto barvu zdědí i prvek, který se nachází v odstavci. To výzamně zvyšuje efektivitu kaskádových stylů.

Specifita selektorů

Může se stát, že se výše uvedené selektory budou křížit. Např. máme ve stylopisu jedno pravidlo, které říká, že všechny odstavce mají být červené a jiné pravidlo, které říká, že odstavce třídy green mají být zelené). Prohlížeč se pak u odstavce s třídou green musí rozhodnout, které CSS vlastnosti na prvek aplikuje.

A právě to řeší specificita selektorů. Jsou to pravidla, která všechny prohlížeče implementují shodně a která určují, jak se v takové situaci mají zachovat. Například že pokud je CSS pravidlo k elementu přiřazené pomocí třídy, je to důležitější, než když je přiřazené jen podle typu elementu.

Média a media queries

@media

Připojování stylů jiným než inline způsobem má ještě jednu velkou výhodu. Můžeme použít atribut media, který nám styly omezí jen na určité médium (obrazovku, tiskárnu). Funguje to tedy jako určitý filtr. Díky němu je velmi jednoduché vytvořit odlišné kaskádové styly pro zobrazení na monitoru a pro tiskovou verzi webu:

<link rel="stylesheet" href="screen.css media="screen">
<link rel="stylesheet" href="print.css media="print">

Tato média lze také zapisovat přímo do CSS souboru (všechny odstavce budou vytištěny velikostí 13 typografických bodů):

@media print {
   p {
      font-size: 13pt;
   }
}

Media queries

Media queries fungují podobně jako výše ukázané omezení CSS pravidel na tisk, jen v tomto případě se aplikují až od určité šířky displeje. Toho se využívá zejména při tvorbě responzivního designu webu. Šířce (v tomto případě 400 pixelů), při které se design webu začne chovat jinak, tj. když se aplikuje jiná verze stylů, říkají vývojáři breakpoint.

@media only screen and (min-width: 400px) {
   p {
      font-size: 15pt;
   }
}

Mezery a odstavce v CSS

Na mezerách a odsazeních u kaskádových stylů nezáleží, klidně bychom je mohli vypustit a vše by fungovalo stejně. Postupně se ustálilo pravidlo, že pokud nejde o inline zápis, každá vlastnost se zapisuje na nový řádek a odsazuje se zleva (zvyšuje to čitelnost kaskádových stylů).

CSS preprocesory

Dnes už se většinou kaskádové styly nepíší ručně, ale kodéři využívají tzv. preprocesory, které z vytvořené šablony CSS soubory vygenerují. Vývojářům to umožňuje používat různé pokročilé funkce, které zatím kaskádové styly nepodporují, jako jsou třeba proměnné, importy více souborů do jediného atd.

Peprocesory také při každém uložení souboru kontrolují validitu CSS, takže vývojáři nemusí na kaskádové styly používat validátory.

CSS frameworky

Aby vývojáři nemuseli psát všechny kaskádové styly webu pokaždé znovu, postupně vznikly tzv. CSS frameworky. Jsou to vlastně knihovny kaskádových stylů a k nim přiřazených kousků skriptů v jazyce JavaScript, které umožňují rychle vytvořit responzivní web a doplnit k němu různé pokročilé funkce, jako jsou menu, záložky, tlačítka, tabulky atd. Použití vhodného CSS frameworku tak může kódování frontendu webu hodně zlevnit.

Nevýhodou CSS frameworků je značná datová velikost stahovaných souborů, což web trochu zpomaluje. Weby nakódované ručně také lépe fungují na mobilních zařízeních, protože kodéři si mohou libovolně nastavovat breakpointy jednotlivých prvků webu a nemusí se řídit globálními breakpointy pro celou stránku, které daný framewrok podporuje.

Nejznámějšími CSS frameworky jsou BootstrapFoundation.

Stručná historie kaskádových stylů

Zaujal jsem vás? Přihlašte se do mailingu a mé další texty už vám neuniknou:

 

Zprávy posílám cca 8 × ročně. Odhlásit se můžete kdykoliv. Více informací.



Nezávazná poptávka

  (volitelné)