IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
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í.

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

V minulej lekcii, Štylovanie textu v CSS - Google fonty, veľkosť fontu a tieň , sme si ukázali štylovanie písma pomocou Google fontov a nastavili veľkosť a tieň písma.

V minulej lekcii, Štylovanie textu v CSS - Google fonty, veľkosť fontu a tieň , 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 - Webové stránky krok za krokom

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

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 - Webové stránky krok za krokom

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 - Webové stránky krok za krokom

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 - Webové stránky krok za krokom

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 - Webové stránky krok za krokom

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 - Webové stránky krok za krokom

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, Pozadie webu a veľkosť elementov , 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 budúcej lekcii, Pozadie webu a veľkosť elementov , si ukážeme štylovanie pozadia webovej stránky a nastavíme výšku a šírku elementov.


 

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é 3500x (2.27 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

 

Predchádzajúci článok
Štylovanie textu v CSS - Google fonty, veľkosť fontu a tieň
Všetky články v sekcii
Webové stránky krok za krokom
Preskočiť článok
(neodporúčame)
Pozadie webu a veľkosť elementov
Článok pre vás napísal David Hartinger
Avatar
Užívateľské hodnotenie:
3 hlasov
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti 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