Úvod do HTML a CSS - lekce 7

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.

Podklady ke stažení

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

Kontextový selektor

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:

/* selektor pro nadpis <h2> uvnitř <section>
section h2 {
color: red;
}

/* selektor pro výběr obrázku uvnitř prvku s třídou fotogalerie */
.fotogalerie img {
width: 300px;
}

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.

Box model

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

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,

/* nastaví velikost obrázku */
img {
width: 400px;
height: 300px;
}

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.

Nastavování velikosti v procentech

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:

<div class="prvni">
První obdélník
</div>
<div class="druhy">
Druhý obdélník
<div class="treti">
Třetí obdélník
</div>
</div>

/* a následující CSS kód */
.prvni {
width: 50%;
}
.druhy {
width: 30%;
}
.treti {
width: 50%;
}

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

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).

/* přidáme rámeček široký 3px, plnou čarou, červenou barvou */
img {
border-width: 3px;
border-style: solid;
border-color: red;
}

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ží:

/* stejný rámeček jako v předchozím příkladu */
img {
border: 3px solid red;
}

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.

img {
border-left: 3px solid red; /* rámeček vlevo /
border-right: 10px dashed blue; / rámeček vpravo/
border-top: 1px dotted green; / rámeček nahoře /
border-bottom: 7px doublepink; / rámeček dole*/
}

Zaoblené rohy

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.

/* zakulacené rohy */
img {
border-radius: 20px;
}

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.

img {
border-radius: 50%;
}

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.

/* hodnoty se použijí postupně pro levý horní roh pravý horní, pravý dolní a nakonec levý dolní */
img {
border-radius: 30px 0 80px 50px;
}

Kontrolní otázky

K čemu slouží kontextový selektor?
Jakými vlastnostmi nastavujeme šířku a výšku boxu v CSS?
Z čeho se počítá šířka objektu nastavená v procentech?
Jaká vlastnost se používá nejčastěji pro nastavení rámečku?
Vyjmenuj alespoň tři typy čáry, které můžeme použít pro rámeček?
Jak uděláme v CSS z libovolného prvku kolečko?

‍

Seznam lekcí

minulá lekce

další lekcE Vyber si další kurz

Úvod do HTML a CSS - lekce 7

Podklady ke stažení

Kontextový selektor

/* selektor pro nadpis <h2> uvnitř <section>section h2 { color: red;}

/* selektor pro výběr obrázku uvnitř prvku s třídou fotogalerie */.fotogalerie img { width: 300px;}

Box model

Velikost prvku

/* nastaví velikost obrázku */img { width: 400px; height: 300px;}

Nastavování velikosti v procentech

<div class="prvni"> První obdélník</div> <div class="druhy"> Druhý obdélník <div class="treti"> Třetí obdélník </div></div>

/* a následující CSS kód */.prvni { width: 50%;} .druhy { width: 30%;} .treti { width: 50%;}

Rámeček

/* přidáme rámeček široký 3px, plnou čarou, červenou barvou */img { border-width: 3px; border-style: solid; border-color: red;}

/* stejný rámeček jako v předchozím příkladu */img { border: 3px solid red;}

img { border-left: 3px solid red; /* rámeček vlevo */ border-right: 10px dashed blue; /* rámeček vpravo*/ border-top: 1px dotted green; /* rámeček nahoře */ border-bottom: 7px doublepink; /* rámeček dole*/}