19. 2. 2025
Vytvořili jsme si primitivní HTML stránku, připojili externí CSS soubor a ukázali základní práci se selektory.
Jedná se o značkovací jazyk, který tvojí HTML elementy. V základu rozlišujeme značky které mají tělo a které nemají. Komentáře v HTML se píší do značek <!-- a -->.
Stránka musí mít Stromovou strukturu typu potomek-rodič. Je třeba dávat pozor na uzavírání elementů! abychom udrželi strukturu stromu. Ukázka na hodině.
Z vizualizace určujeme sémantiku(význam). Stroj nemá vizualizaci, takže by nepoznal sémantiku, pokud mu ji neřekneme. Sémantika je důležitá ale také kvůli asistivním technologiím, strojovému zpracování, ale také kvůli jednoduchosti kódu.
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átorem potvrďte.
Každá stránka by měla obsahovat ve svém těle hlavičku(header) a patičku(footer). V hlavičce dost často bývá menu stránky. Následuje výčet elemetů, které jsou často využívány (podrobnější informace si k nim dokáž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áme také pseudo-class selektory, pseudo-elements selektory nebo také obecný selektor s označením atributu. Obecně se ukazuje, že používání tříd vede k nejkvalitnějšímu kódu a proto se k nim budeme přiklánět.
Jednoduše název tagu je tedy naším selektorem.
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 závorek 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 { ... }
Nevyužíváme přímo element nebo třídu, ale pouze jejich pseudonym. Můžeme tak vybrat třeba první písmeno, řádek, nebo určitě jestli je na element najeto myší a podobně. Pak je můžeme libovolně stylovat.
p::pseudo-element {...}
p::first-line {...}
p:pseudo-trida {...}
p:first-child {...}
CSS jednotky rozlišujeme na absolutní a relativní. 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ů, tak abychom jednoduše odstupňovali velikost.
Více informací najdete na MDN web.
Můžeme definovat globální proměnné, které pak můžeme použít k tomu, abychom snížili redundanci kódu. Defunujíse prefixem -- a lze je následně použít přes ver(--promenna).
:root {
--main-color: #333;
}
p {
color: var(--main-color);
}
Kód z této hodiny 2024 naleznete na mém GitHubu.