Vítej u dalšího kurzu HTML a CSS.
V dnešní lekci si popíšeme kontextový selektor a začneme s popisem box modelu. Naučíme se nastavit velikost a rámeček.
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í náš projekt ve stavu, v jakém jsme ho opustili v minulé lekci: czchts.cz/htmlcss07
V předchozích lekcích jsme používali jednoduché selektory typu element a třída. Jsou ale situace, kdy potřebujeme selektorem vybrat prvek v kontextu jiného prvku. Například chceme nadpis uvnitř konkrétní sekce, nebo odkaz uvnitř menu, apod.
Přesně k tomu slouží kontextový selektor:
Kontextový selektor se interpretuje zprava doleva. Nastavujeme vlastnosti prvku uvedeného vpravo za mezerou, který je vnořený (je potomkem) prvku uvedeného vlevo.
Kontextovému selektoru se také někdy říká selektor typu potomek.
Každý prvek v HTML je v prohlížeči zobrazen jako obdélník neboli box. I když prvek nemá rámeček nebo barvu pozadí a box není ve skutečnosti vidět, je do něj prvek uzavřen.
Přesvědčit se o tom můžeme například otevřením vývojářských nástrojů v prohlížeči (stiskni klávesu F12) a kliknutím na libovolný prvek v zobrazeném HTML zdrojovém kódu. Prohlížeč nám v okně se stránkou zobrazí box pro daný prvek.
Box model je souhrnný název pro skupinu CSS vlastností, které ovlivňují vzhled a chování tohoto boxu (obdélníku).
Do box modelu patří vlastnosti pro nastavení velikosti prvku, rámečku, odsazení obsahu prvku, odstup od okolních prvků, typ zobrazení prvku, apod.
Velikost prvku nastavujeme pomocí CSS vlastností width a height. Můžeme použít libovolné délkové jednotky: px, em, rem, vw, vh, % a mnoho dalších,
Nastavujeme-li velikost obrázku, můžeme použitím nesprávného poměru mezi výškou a šířkou obrázek zdeformovat. Obrázek má implicitní poměr stran - je v grafickém editoru uložený v nějaké konkrétní velikosti.
Pokud tedy nastavujeme velikost obrázku, je obvykle snazší nastavit pouze jeden rozměr (šířku nebo výšku) a prohlížeč druhý rozměr sám dopočítá tak, aby zůstal obrázek ve stejném poměru stran jako originál.
Velikost můžeme nastavovat i v procentech. V tom případě se velikost prvku spočítá jako procenta z prostoru, který prvku dává k dispozici jeho rodičovský prvek.
Pokud máme obrázek vložený jen mezi značky <body>…</body>, bude šířka vypočítaná jako daný počet procent ze šířky stránky. Je-li obrázek (nebo jakýkoliv jiný prvek) vložený například dovnitř sekce, bude šířka uvedená v procentech spočítána z šířky, kterou vnořenému prvku sekce poskytuje.
Příklad:
V příkladu uvedeném výše bude první obdélník zabírat 50% šířky stránky, druhý obdélník 30% šířky stránky. Třetí obdélník je vnořený do druhého (je jeho potomkem), takže bude zabírat 50% šířky druhého obdélníku, tj. 50% z 30%, tedy 15% šířky stránky.
Rámeček (obrys) obdélníku se nastavuje pomocí vlastností, které začínají slovem border. Rámečku můžeme nastavit tloušťku čáry (border-width), styl čáry (border-style) a barvu čáry (border-color).
Pro nastavení rámečku existuje i vlastnost border, která funguje jako zkratka, kterou jdou nastavit všechny tři hodnoty najednou. Pro nastavení rámečku se používá nejčastěji. Hodnoty se oddělují mezerou a na jejich pořadí nezáleží:
Jako styl čáry můžeme uvést hodnoty solid (plná čára), dashed (čárkovaná), dotted (tečkovaná), double (dvojitá) a další, viz. např. článek na CSS Tricks.
Rámeček nemusíme vždy nastavovat kolem dokola celého prvku, ale lze ho nastavit na libovolné straně boxu (nebo kombinaci více stran) pomocí vlastností border-left, border-right, border-top a border-bottom. Zápis je stejný jako při použití zkratky border.
Další vlastnost, která souvisí s nastavením rámečku, je vlastnost border-radius. Pomocí této vlastnosti můžeme nastavit zaoblené (zakulacené) rohy boxu.
Hodnota za border-radius představuje poloměr zakulacení. Lze ji nastavit v libovolných délkových jednotkách, ale nejčastěji se nastavuje v pixelech.
Zajímavé je i použití s procenty. Pokud nastavíme zaoblení rohu na 50% a máme čtvercový prvek, dostaneme jako výsledek kolečko. To se na webu často používá pro různé profilové obrázky apod.
Uvedeme-li za border-radius pouze jedno hodnotu, použije se stejné zaoblení na všechny čtyři rohy. Za border-radius ale můžeme napsat až 4 hodnoty oddělené mezerou a ty se pak použijí tak, že první hodnota se použije jako poloměr pro levý horní roh boxu, další hodnoty v pořadí pak po směru hodinových ručiček. Pomocí této techniky můžete v CSS vyrábět zajímavé tvary.
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.