Pouze tento týden sleva až 80 % na e-learning týkající se Pythonu. Zároveň využij narozeninovou akci až 80 % zdarma při nákupu e-learningu - Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
12. birthday

11. diel - Rámček, tieň a boxového modelu v CSS

V minulej lekcii, Plávajúce obsah v HTML , sme sa naučili pracovať s plávajúcim obsahom a pozicový elementy vedľa seba.

V dnešnom tutoriále dokončíme polia s článkom a naučíme sa ďalšie nové vlastnosti.

Rámček

Pole s článkom sme rozdelili do 2 elementov, header a section, ktoré sme napozicovali vedľa seba. Dajme section (bielemu poli s obsahom článku) rámček.

Rámček sa v CSS nastaví cez sumarizuje vlastnosť border. Ako hodnotu uvedieme hrúbku rámčeka, typ čiary a nakoniec farbu. Selektor pre section vo styl.css už máme, pretože v ňom nastavujeme float, šírku a pozadia. Rozšíri tento štýl o nastavení rámčeka:

article section {
    width: 706px;
    float: left;
    background: white;
    border: 2px solid #006797;
}

U vlastnosti border sme uviedli šírku rámčeka 2px, štýl čiary "plná čiara" (solid) a farbu čiary cez nám už známy šestnástkovom, je to tmavo modrá. Bystrejší si iste všimli, že sme znížili šírku elementu z 710px na 706px. To preto, že k šírke elementu sa pripočíta z oboch strán ešte 2x široký rámik (šírka elementu sa teda zväčší o 4px a keďže chceme celkovú pôvodnú šírku 710px zachovať, je nutné tieto 4px ubrať). Šírka rámčeka sa teda do width nepočíta a element je vždy kvôli rámčeku o chlp väčšie.

Pozrime sa na výsledok:

HTML rámček cez CSS vlastnosť border

Len opäť pripomeniem, že sme použili farbu, čo nám do dizajnu ladia.

Rovnakého štýlu možno dosiahnuť tak, že vlastnosť border rozpíšeme na jej 3 zložky:

border-style: solid;
border-width: 2px;
border-color: #006797;

Keďže je tento zápis dlhší, nie je dôvod ho používať, ak nechceme treba len zmeniť určitú zložku. Uvádzam ho pre úplnosť a hlavne preto, aby ste mu rozumeli, keď sa s ním niekde stretnete.

Štýly čiary

Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

Ako štýl čiary môžete použiť hodnoty:

  • none - Bez rámčeka.
  • hidden - Rámček sa nevykreslí, ale zaberá miesto.
  • dotted - Bodkovaný.
  • dashed - čiarkované.
  • solid - Plná čiara.
  • double - Dvojitý.
  • groove - 3D rámček s efektom groove.
  • ridge - 3D rámček s efektom ridge.
  • inset - 3D rámček s efektom inset.
  • outset - 3D rámček s efektom outset.
  • inherit - Zdedí štýl čiary rámčeka nadradeného elementu.

Vyskúšajte si ich :) Posledný 3D štýly sú dobre vidieť len s širokým rámčekom. Všetky hodnoty sú samozrejme opäť popísané v českom CSS 3 manuálu - Border style vrátane ukážok toho, ako vyzerajú.

Guľaté rohy

Zaujímavou vlastnosťou je border-radius, ktorá umožňuje zaguľatiť rohy rámčeka. Skúsme si to a pridajme si ju do štýlu section:

border-radius: 10px;

výsledok:

Zaoblené rohy rámčeka v HTML a CSS

Obykle sa nepoužívajú hodnoty vyššie ako 10px, pretože nevyzerajú dobre. Ak nastavíme veľmi vysokú hodnotu, stane sa z elementu kruh. Možno tak urobiť napr. Kruhová tlačidla.

Zaujímavé je, že border-radius možno použiť aj u obrázkov, rohy sa potom zaguľatia. Vysoké hodnoty dajú obrázok do kruhu. Vyskúšame si to.

Na testovacie účely možno obísť písanie selektora a napísať štýl priamo do HTML, slúži na to HTML atribút style. Je určite jasné, že tým zneprehľadňuje kód a porušujeme hlavný princíp opddělení obsahu a vzhľadu. Avšak ak vymýšľame dizajn a skúšame čo vyzerá dobre, je tento atribút veľmi užitočný. Upravme teda náš obrázok v HTML:

<img src="obrazky/avatar.png" alt="Programátor HoBi" style="border-radius: 500px;" />

výsledok:

Zaoblené rohy rámčeka v HTML a CSS

Do dizajnu našej konkrétnej šablóny sa guľaté rohy príliš nehodí, preto vlastnosti zase odstráňme. Ak by sa nám páčili, odstránime atribút style a urobíme pre nich plnohodnotný selektor v styl.css. Na hotových stránkach by sa ideálne atribút style nemal u HTML elementov nikde objaviť.

Viac o rámečkách nájdete v českom CSS 3 manuálu - Rámčeky.

Tieň

So tieňom sme sa už v CSS stretli, bol to tieň u textu pomocou CSS 3 vlastnosti text-shadow. Tieň môžeme nastaviť ľubovoľnému elementu na stránke pomocou vlastnosti box-shadow. My ostylujeme tieň section takto:

box-shadow: 2px 2px 7px #1c2228;

Prvé 2 hodnoty sú pozície tieňa, ďalšie rozostrenie, posledná farba. Vlastnosť ostyluje obdĺžnikový tieň okolo elementu. Pozrime sa na výsledok:

Tieň elementov v HTML pomocou CSS vlastnosti box-shadow

Odsadenie

Obsah section je veľmi nalepený na okraje, čo pôsobí nepekne. Býva dobrým zvykom udržiavať medzi elementmi určité rozostupy. Tie môžeme nastaviť pomocou CSS vlastností padding a margin. Rozdiel medzi nimi sa vysvetľuje na tzv. Boxového modelu (slovensky niekedy býva preložené ako "Krabičková model"). Vyzerá takto:

Box model v CSS pre HTML element

Na obrázku vidíme element (napr. Náš section) a rámček (border) okolo neho. Rozostup medzi rámčekom a obsahom elementu sa nazýva padding. Rozostup medzi rámčekom a okolím elementu sa nazýva margin. Zjednodušene povedané: padding je vnútorný odsadenie, margin to vonkajšie.

Ani jeden okraj sa podobne ako rámček nepočíta do veľkosti elementu! Do štýlu k section nastavme padding na 20px a musíme tiež opäť znížiť šírku elementu o 40px (20px z každej strany):

padding: 20px;
width: 666px;

Tým sme docielili 20px vnútorného čalúnenia na všetkých stranách:

Okraj padding v HTML ostylovaný cez CSS

Vlastnosť možno rozpísať aj takto:

padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;

Zápis vyššie sme použili v prípade, že by sme chceli nastaviť napríklad len okraj z jednej strany alebo z každej strany iný. Jednotlivé hodnoty môžeme uviesť aj vo zhrňujúcim zápisu (v poradí hornej, pravý, dolný, ľavý):

padding: 20px 20px 20px 20px;

Ako tretí typ zápisu sa niekedy používa:

padding: 20px 20px;

Kde prvá hodnota udáva okraj zvislý (horné a dolné) a druhá vodorovný (ľavý a pravý). V budúcej lekcii, Riešené úlohy k 10.-11. lekciu HTML a CSS , sa pozrieme na navigačnú lištu, kód z dnešného HTML / CSS tutoriálu nájdete ako vždy k stiahnutiu v prílohe.

V nasledujúcom cvičení, Riešené úlohy k 10.-11. lekciu HTML a CSS, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.


 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 2215x (2.27 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

 

Predchádzajúci článok
Plávajúce obsah v HTML
Všetky články v sekcii
Webové stránky krok za krokom
Preskočiť článok
(neodporúčame)
Riešené úlohy k 10.-11. lekciu HTML a CSS
Článok pre vás napísal David Čápka
Avatar
Užívateľské hodnotenie:
2 hlasov
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi a svobodu podnikání.
Unicorn university David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity

 

 

Komentáre

Avatar
Martin Pluhař:22.4.2021 0:10

Nevíte někdo proč mi nejde v CSS změnít velikost obrázku ? v Html ve style ano, když zadám bez selektoru jen img {width:256px;} tak to jde taky, ale jakmile si ulozim selektor jako např .profilovka {width: 256px;} tak to nic neuděla. Prosím o radu

 
Odpovedať
22.4.2021 0:10
Avatar
Martin Libich:23.8.2021 9:00

Mockrát nepíšu komenty pod články, ale už to musím napsat - i diskuse mě často ještě posunou a dovysvětlí některé detaily nebo rovnou celé myšlenky. Díky!

Odpovedať
23.8.2021 9:00
Pokud se ráno probudím, je vše v pořádku
Avatar
Barbora Danihelova:25.10.2021 15:52

Ahoj. Nezobrazuje sa mi zelene referencne tlacitko, uz to prepisuju asi hodinu a stale nic..som bezradna, niekto pomoc prosim ?

 
Odpovedať
25.10.2021 15:52
Avatar
Odpovedá na Barbora Danihelova
Monika Salajková:9.11.2021 17:30

Ahoj, jediné co tam vidím, tak jsou uvozovky v souboru html <a href="referen­ce.html" class="reference-tlacitko">

 
Odpovedať
9.11.2021 17:30
Avatar
Vlasta
Tvůrce
Avatar
Odpovedá na Barbora Danihelova
Vlasta:14.11.2021 6:07

Ahoj, v html souboru nemáš ukončený atribut "ahref", na konci odkazu musí být opět uvozovky. Pak by to mělo fungovat, takhle ti to totiž ten selektor vůbec nerozpozná. :) V budoucnu to poznáš i podle toho, že se ti to takto podtrhne/nezabarví. VS Code a podobné editory tím vývojářům hodně pomáhají přicházet na chyby a nepřehlížet formální detaily. :-)

Odpovedať
14.11.2021 6:07
It's all about the mindset.
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!
Avatar
Petra Fialová:24. februára 10:09

Ahoj, referenčni tlačítko se mi nezobrazuje v MS Edge, když ho sama napíšu, ale ve vašem ukázkovém webu se v Edge zobrazí. V ostatních prohlížečích se mé tlačítko zobrazí normálně.
Prosím, poradíte?

 
Odpovedať
24. februára 10:09
Avatar
Gabriela Feiková :7. marca 20:41

Jak dám obrázek též do rámečku aby nebyl mimo? Vše mám podle návodu i vzoru zip 🤷‍♀️ Pouze jsem vyměnila obrázek než jsem zkusila orámování. Ale to by na to nemělo mít vliv přece 🤔

 
Odpovedať
7. marca 20:41
Avatar
Lumír Kus
Člen
Avatar
Lumír Kus:11. marca 11:18

Proč je v index.html použito

<p class="tlacitko-odstavec">

když tato třída pak ve styl.css není definována? Když to odstraním, vzhled tlačítka se nezmění. Samotné tlačítko je definováno v třídě

class="reference-tlacitko"
 
Odpovedať
11. marca 11:18
Avatar
Ondřej Raška:18. júna 18:41

Pokračuje rozpačitost a frustrace z minulé lekce. Nemůžu se ubránit dojmu, jako by autor někam spěchal a chtěl mít tuhle lekci za sebou co nejrychleji.

Změny v kódu už ani nedáváme do speciální obrazovky, ale info hodíme doprostřed odstavce normálního textu. Info o některých změnách/vrácení tam nedáme vůbec.

Rámečky vysvětlíme napůl s tím, že nejsou důležité. Což možná nejsou, ale toto polovysvětlení studenta akorát zmate. Jak napsat padding hodíme do obrazovky, ale neuvedeme konkrétní příklad

 
Odpovedať
18. júna 18:41
Avatar
Jakub Žitný
Tým ITnetwork
Avatar
Jakub Žitný:23. júna 13:08

Ahoj, prvních deset lekcí jsem upravil. Původní kurz byl nepříliš uspokojivě předělán a je nám líto, že jeho aktualizace byla pro naše studenty spíše na škodu. Díky moc za informace, které jste nechali tady v komentářích!

 
Odpovedať
23. júna 13:08
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!