28. 2. 2022
Vytvořili jsme si primitivní HTML stránku, připojili extermí CSS soubor a ukázali základní práci se selektory.
Pokud vytvoříte nový soubor ve VS Code bude úplně prázdný. Abyste si vytvořili základní "kostru" použijte příkaz ! a tabulátor potvrďte.
Každá stránka by měla obsahovat ve svém těle hlavičku a patičku. V hlavičce dost často bývá menu stránky. Následuje výčet elemetů, které jsou často využívány (podrobnější infromace si k nim okážete dohledat díky znalostem z minulé hodiny): footer, header, main, p, h1, h2, a, img, section, ul, li, nav.
Pro přehlednější práci s kodem a možnosti stejného CSS kodu na více HTML souborech, nepíšeme CSS přímo do HTML souboru, ale vkládáme jej samostaně do souboru s příponou .css. Tento soubor poté připojíme k HTML souboru pomocí tagu link.
Např.
<link rel="stylesheet" href="stylesheet.css">
Selektory v CSS nám jednoduše určují to, na co se budou vztahovat vlastnosti CSS, které jim přiřadíme. Máme několik typů selektorů: selektory pro HTML značky, univerzální selektor, selektor pro třídy a selektor pro identifikátory. Dále mám také pseudo-class selektory, pseudo-elements selektory nebo také obecný selektor s označením atributu.
Jednoduše název tagu je tedy naším selektore.
Např. pro HTML
<h1>Nadpis</h1>
bude CSS vypadat
h1 { ... }
Hvězdička je znak, který nám označuje všechny HTML tagy. Je to stejné, jako bychom vyjmenovali úplně všechny možné tagy.
* { ... }
Tagům v HTML kódu můžeme přidávat třídy, kterými je můžeme rozdělovat to různých kategoriích. Jednu třídu můžeme přiřadit více elementům na jedné stránce (narozdíl od ID). Můžeme poté na danou třídu aplikovat CSS vlastnosti. Uděláme to tak, že před název třídy dáme tečku a do složených napíšeme vlastnosti oddělené středníky.
.nazev-tridy { ... }
Stejně jako u tříd, můžeme v html vytvářet identifikátory, ale narozdíl od tříd můžeme využít název identifikátoru pouze pro jeden element. Je to tedy z logiky názvu jedinečné označení dané části stránky. Na identifikátory můžeme aplikovat css vlastnosti. Uděláme to tak, že před název identifikátoru dáme #.
#nazev-id { ... }
Mezi základní jednotky, které zde budeme využívat patří em a rem. Jedná se o jednotky relativní, které se liší v tom vzhledem k čemu se jejich velikost určuje. Jednotka em se vztahuje k velikosti písma rodiče a jednotka rem k velikosti písma elementu html. Jednotka em se tedy hodí využívat například u různých úrovních nadpisů, taka abychom jednoduše odstupňovali velikost.
Více informací najdete na MDN web.