Pokračujeme ve vytváření stránky "Adéla na cestách".
V dnešní lekci si vysvětlíme, co je CSS a jak ho připojit do stránky. Ukážeme si základní syntaxi CSS, vysvětlíme si způsob zápisu barev a obarvíme naše nadpisy a pozadí stránky.
Pokračuj se svým kódem z minulé lekce.
Nemáš-li z nějakého důvodu kód k dispozici, zde je ke stažení stránka ve stavu, jak jsem ji ve videu napsal já v minulé lekci: https://czchts.cz/htmlcss04
CSS (Cascading Style Sheets) je stylovací jazyk, kterým nastavujeme vzhled stránky. Při tvorbě webu se snažíme co nejvíce oddělit obsah a vzhled. Obsah a strukturu stránky píšeme v HTML. Vzhled stránky píšeme v CSS.
CSS lze psát přímo ke konkrétním značkám nebo do hlavičky HTML souboru, ale nejčastější a nejpoužívanější způsob, který budeme používat i my, je zápis CSS do samostatného souboru.
Aby prohlížeč věděl, že daná stránka používá styl z našeho CSS souboru, musíme styl do stránky tzv. připojit.
Pro připojení externích zdrojů do stránky slouží značka <link>. Jedná se o obecnou značku, kterou lze do stránky napojit mnoho různých zdrojů - např. ikony, písma, apod. Aby prohlížeč vědět, o jaký zdroj se jedná, má značka povinný atribut rel, do kterého se jako hodnota uvádí typ zdroje. V případě CSS souboru je to rel="stylesheet".
Druhým povinným atributem je href, do kterého zapíšeme cestu k připojovanému zdroji. může to být kompletní internetová adresa (url) nebo i cesta souboru relativně ke stránce, do které zdroj vkládáme, např. href="style.css".
Značka pro připojení CSS souboru, který leží na stejné úrovni jako HTMl stránka, pak může vypadat takto:
<link rel="stylesheet" href="style.css">
Chceme-li stylovat nějaký prvek na stránce, musíme CSS říci, o jaký prvek se jedná. K tomu slouží selektor. Selektorů je mnoho typů. Nejjednodušší je selektor typu element, kdy jako selektor uvedeme název HTML značky, např. h1 (viz dále).
Do složených závorek pak píšeme páry vlastnost: hodnota. Vlastnost je CSS vlastnost, kterou chceme nastavit, např. barvu textu nastavíme pomocí vlastnosti color. Hodnota je hodnota, na kterou chceme vlastnost nastavit. V případě naší barvy to může být např. red (červená).
Celý CSS zápis, který nastaví hlavní nadpis H1 na červenou barvu pak vypadá takto:
Každý řádek uvnitř složených závorek {} vždy končí středníkem. Chceme-li prvku nastavit více vlastností najednou, učiníme tak uvnitř jedné deklarace. Počet vlastností v deklaraci není ničím omezený, na pořadí zápisu jednotlivých vlastností nezáleží.
Jedná se o nejjednodušší CSS selektor - prostě uvedeme název HTML značky, kterou chceme stylovat. Selektor na stránce vybere všechny značky tohoto typu, tj. pokud napíšeme selektor h2, obarví se všechny nadpisy druhé úrovně na stránce. Jak nastavit barvu pouze jednomu nadpisu si ukážeme v příštích lekcích.
Někdy potřebujeme stejnou vlastnost nastavit několika různým prvkům. Je zbytečné uvádět samostatné deklarace pro každý typ prvku. Jednotlivé selektory lze oddělit čárkou, vlastnosti ve složených závorkách se pak aplikují na všechny prvky v seznamu.
Pokud například chceme všechny nadpisy první, druhé a třetí úrovně modrou barvou:
Stejně jako v HTML, i v CSS můžeme použít komentáře - ať už na vlastní poznámky v kódu nebo na zakomentování kusu kódu, když ho chceme přechodně "vypnout", ale přitom si ho v souboru zachovat pro pozdější použití.
Komentáře v CSS mají syntaxi:
Pro většinu vlastností v CSS platí princip dědičnosti. Pokud jsou HTML prvky do sebe zanořené, můžeme CSS vlastnosti nastavit na nadřazený vnější prvek (rodič). Všechny podřízené vnořené prvky (potomci) tuto vlastnost zdědí. Nebo obráceně: podřízené prvky přejímají CSS vlastnosti ze svých nadřízených prvků.
Skvěle se to hodí třeba v případě, že potřebuji nastavit barvu nebo styl písma pro celý dokument. Nemá smysl vyjmenovávat postupně všechny prvky a nastavovat jim danou barvu. Všechny prvky na stránce jsou přeci vnořené ve značce <body> (tělo stránky). Nastavíme tedy barvu na a písmo na tělo stránky a všechny značky na stránce toto nastavení zdědí:
CSS vlastností se dědí na všechny potomky (i potomky potomků) až do chvíle, kdy nějakému prvku danou CSS vlastnost nastavíme konkrétně:
Barvy v CSS lze zapsat mnoha různými způsoby. Nejjednodušší způsob už jsme si ukázali.
V CSS existuje 141 pojmenovaných barev. Tyto vybrané barvy mají přidělené anglické názvy a v CSS stačí tento název zapsat jako hodnotu barvy. Seznamy pojmenovaných barev lze najít na internetu, zde je několik odkazy na některé z nich:
Barvy pro zobrazování na monitoru se většinou definují pomocí RGB modelu. RGB je zkratka pro Red, Gree, Blue (červená, zelená, modrá) a dokazuje se na způsob, jakým se na moderních zobrazovačích tvoří barvy. Každý pixel (obrazový bod) na obrazovce je většinou tvořen třemi světelnými diodami - červenou, zelenou a modrou. Podle toho, jak hodně která dioda svítí, tak vnímáme výslednou barvu pixelu.
RGB model tedy barvu definuje jako tři hodnoty - množství červeného, zeleného a modrého světla. Hodnota může být 0 (=nesvítí) až 255 (=svítí na maximum). Smícháním světel dostáváme všechny další barvy. Takže např. žlutá je kombinací červené a zelené. Fialová kombinací červené a modré, apod.
Barvy v RGB lze v CSS zapisovat takto:
Tento zápis se při tvorbě webu používá nejčastěji, protože se jedná o nejkratší zápis, který ale umožňuje zapsat jakoukoliv barvu. Jedná se o stejné RGB barvy jako výše, pouze zapsané jiným způsobem.
Jednotlivé složky RGB jsou zapsané v šestnáctkové soustavě a celý kód barvy se tak vejde do šesti znaků. Před kód se uvede znak #, aby bylo jasné, že se jedná o zápis v šestnáctkové soustavě. Stejnou oranžovou a fialovou barvu z příkladu výše bychom tak mohli zapsat takto:
V CSS se často můžeme setkat i se zkráceným zápisem barvy s pouze třemi číslicemi. V tomto případě se barva interpretuje tak, jako by se každá číslice dvakrát opakovala. Takže např. #fff znamená #ffffff neboli bílou barvu. Barva #f83 znamená #ff8833 neboli oranžová.
Většina editorů kódu nabízí buď vestavěné nástroje pro práci s barvami, nebo je lze stáhnout do editoru jako doplněk. Kódy barev (nebo číselné hodnoty RGB) lze vidět také v grafických editorech jako je Photoshop a další. Existují i online nástroje na tvorbu barevných palet a míchání barev, například:
Projekt online vzdělávání byl realizován v rámci Stipendia Czechitas v projektu: „Ženy do IT“ (reg.č. CZ.03.1.51/0.0/0.0/16_061/0003268), který je financován z prostředků Evropského sociálního fondu prostřednictvím Operačního programu Zaměstnanost.