HTML/CSS 3: box model a triedy

Na minulej hodine sme sa zabávali s farbami a dekoráciami prvkov, dnes otvárame veľkú tému veľkostí, pozícií a umiestňovania. Podotýkam, že to bude téma na viacero cvičení. Druhá dôležitá vec, na ktorú sa pozrieme, sú triedy v css.

Veľkosti a pozície

DISPLAY

Ako ste si už všimli, html nám niektoré elementy odsadzuje na nový riadok (napr. h1) a niektoré necháva v riadku (napr a). To sa dá zmeniť. Je na to vlastnosť display.

Vytvorte si novú webstránku so všetkým povinnými nutnosťami. Vyrobte k nemu css súbor a prelinkujte ich.

Múdrosť do života: Hneď po prelinkovaní html a css si vyskúšajte, či sa naozaj našli. Ja to robím tak, že dám celej stránke nejakú farbu do pozadia.

Pridajte si tam niekoľko nadpisov. A skúste im v css dať postupne vlastnosť display s hodnotami:

display: block;
display: inline;
display: none;

Inline spôsobí, že pôjdu za sebou v riadku, block hodí každý na nový riadok (toto je hodnota, ktorú majú nadpisy priradené ako default) a pri hodnote none zmiznú. Hodnota none môže znieť ako blbosť, ale v skutočnosti je mega užitočná – k tomu sa vrátime pri téme prispôsobovania webstránok na tablety a telefóny (cca 2 cviká neskôr).

Vráťme sa k block a inline. Hlavný rozdiel týchto hodnôt je, ako sa element správa vzhľadom na ostatné vlastnosti a elementy. Uvediem príklad. Urobte si dva rôzne nadpisy – h1 a h2, pričom jeden bude mať určený display:inline, a druhý display:block.

Napohľad vyzerajú takmer rovnako, ale v skutočnosti sú dosť odlišné. Uvidíte to, ak nadpisu pridáte nejakú farbu pozadia.

Múdrosť do života: Background-color je výborný ukazovteľ toho, pokiaľ náš element vlastne siaha.

Blokový element je roztiahnutý na celý riadok, inline-ový žije iba v tom svojom malom kútiku. Pamätáte si z minulej hodiny text-align : center? Ten nám vycentruje text v rámci elementu. Asi už šípite, že prvý nadpis to vycentrovať zvládne a druhý nie. Respektíve vycentruje nám ho, ale len vrámci tej malej žltej kocky a to nám je teda pekne nanič.

Iný príklad: blokcovému elementu viete určiť pevnú šírku. Inline-ový vám ju odignoruje.

Záver tejto časti je: keď už budete mať toho na stránke viac, bude sa vám stávať, že niektoré elementy sa budú chovať čudne a niektoré veci nebudú fungovať tak, ako by mali. Často je to tým že si treba prepnúť display:inline alebo display:block.

Vlastnosť display ponúka aj kopu ďalších možností okrem inline, block a none, k niektorým ďalším sa ešte počas semestra dostaneme. Block a inline sú istým spôsobom základné, v zásade takmer všetky tagy majú ako prednastavenú hodnotu buď inline, alebo block.

BOX-MODEL

Na minulom príklade sme si pomocou farby pozadia zvýraznili pokiaľ vlastne siaha ten náš element. Otázka teraz je, kde sa vzali tie biele medzery medzi nimi? Čo sa týka odsadení a medzier medzi jednotlivými elementami, v html/css sa používa tzv. box model. Funguje takto:

Každý element zaberá na stránke nejaké „miesto“. Čiže má určené odkiaľ a pokiaľ existuje. Je to presne to miesto, ktoré vám vyfarbí background-color. Vnútri elementu, (čiže medzi začiatočným a koncovým tagom) môžu byť nejaké objekty – napríklad text, alebo ďalšie tagy. V tomto svete existujú dva základné typy odsadení – margin (vonkajšie) a padding (vnútorné).

Medzi nimi je ešte border (= rámik). Vizuálne asi takto:

Ako sú na tom naše elementy? Napríklad už vieme, že sme im určili šírku na 300px, ale čo sú tie ostatné hodnoty? Zjavne si ich náš browser musel nejako z toho html kódu spočítať. Viete si to pozrieť. Väčšina browserov (tých aktuálnych) má tzv. inspector, kde nám tieto informácie dá. Dostanete sa k nemu pravým klikom na stránku a možnosťou inspect (alebo inspect element).

Označte si daný element a preklikajte prezrite si jeho vlastnosti (možno budete mať trochu iné menúčka, závisí to od browsera, jeho verzie a aj vnútorných nastavení). Väčšina inspectorov funguje tak, že vám margin a padding naznačia aj na samotnej webstránke, ak ukážete myšou na daný element.

Takže skúsme si tie hodnoty zmeniť. Skúste si nejaké.

Inline a block sa navzájom príliš neľúbia a niekedy sa chovajú škaredo. Napríklad h2 sa nevie odsunúť preč od h1 pomocou margin. On si žije v tom svojom riadku a všetko ostatné mu je ukradnuté. Mohli by sme ich zásluhou tejto tvrdohlavosti navzájom prekryť. Napríklad takto:

Tento typ drzosti v skutočnosti nie je žiaden veľký problém, pretože sa dá ľahko riešiť. Buď si vieme h2 zabaliť do nejakého iného blokového tagu, alebo si pomôcť vlastnosťou,

display: inline-block;

ktorá znamená, že element žije v riadku a je ochotný mať vo svojom riadku ďalšie riadkové elementy, ale súčasne sa chová tak trochu ako block – je ochotný mať pevnú šírku a dodržovať si odstup (margin) od ostatných.

Na ilustráciu si môžete pridať nejaké dalšie riadkové elementy, napríklad a, alebo span. (pozn.: „v riadku“ znamená, že majú zarovnaný riadok na ktorom sedí text.)

Dobre, teraz si nechajme iba druhý nadpis a všetky ostatné zmažme. Pohráme sa ešte s týmto elementom.

Za prvé, margin aj padding viete dať rôzny pre ľavú, pravú, hornú a dolnú stranu. Vyskúšajte si

padding-left: 3px;
padding-right: 20px;
padding-top: 50px;
padding-bottom: 10px;

Toto sa dá zapísať alternatívne tak, že do vlastnosti padding dáte 4 rôzne hodnoty. Píše sa to za sebou bez čiarok, v poradí top, right, bottom a left (pre margin to funguje rovnako).

padding: 50px 20px 10px 3px;

Za druhé, margin a padding sú vlastnosti, ktorým má každý tag nejak nastavenú defaultnú hodnotu. Niekedy sa vám nemusí hodiť, dokonca sa môže stať, že ju rôzne browsre majú nastavenú rôzne.

Napríklad, skúsme si náš nadpis upraviť tak, aby simuloval hornú lištu stránky. Čiže chceme, aby bol na plnú šírku (budeme sa musieť vrátiť k display:block) a aby bol prilepený úplne hore. Začneme logicky:

h2{
    display: block;
    background-color:  gold;
    margin: 0;
}

(pozn: pri veľkostiach/vzdialenostiach treba v css vždy dať za číslo jednotky (px, %, em, …) Jedinou výnimkou je 0, tú vezme aj bez jednotiek a je to korektný zápis)

Hm… furt je tam medzera. Že by to bolo predsalen kvôli tomu paddingu? Nemalo by, ale tak skúsme.

Furt je to zle. Čo s tým?

Ak máte problém typu „niečo sa chová čudne“ obráťte sa na inspector. Ten nám odhalí, že náš nadpis má naozaj odstup 0.

Ale tag body má nastavený margin na 8 pixlov!

To je ale zrada! Načo to tam je?! Fuj! >:-(

Našťastie to vieme opraviť, takže poďme na to. Pridajte si do css

body{
    margin: 0;
}

Hneď je to lepšie.

CENTROVANIE

Ak má objekt typu block pevnú šírku, vieme ho pomocou marginu vycentrovať. Je to taký trik. Pridajte si do css vlastností vášho nadpisu:

width: 300px;
margin-left: auto;
margin-right: auto;

Toto sa dá využiť celkom efektívne pri stránkach, kde nechcete mať obsah stránky na plnú šírku obrazovky, aby to nebolo tak rozťahané. Dáte si to do niečoho blokového a vycentrujete pomocou marginu. Aké jednoduché.

Čo tým mám na mysli:

<!DOCTYPE html>
<html>    
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        
	<div>
        <h2>Nadpis</h2>
        <p>Lorem ipsum... </p>
        <img src="https://static.independent.co.uk/s3fs-public/
                  thumbnails/image/2019/05/29/11/duckling.jpg" />
        <h2>Ďalší nadpis</h2>
        <p>Nam fringilla...</p>
        </div>
    
</body>
</html>
body{
    margin: 0;
}


h2{
    display: block;
    background-color:  gold;
    text-align: center;
}

div{
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    
}

img{
    width: 100%;
}

(dlhší text si tam doplňte sami)

Pozn.: Tá vlastnosť pre obrázok ( width: 100%; ) znamená, že má mať šírku 100% elementu v ktorom sa nachádza. Keby sme ju tam nedali, browser by sa snažil obrázok zobraziť v plnej svojej šírke a to nechceme (pokojne si to vyskúšajte, len tak pre ilustráciu).

No, to už máme skoro niečo ako pekný web. Ešte sa mu povenujeme.

RÁMČEKY

Ak si rozpomeniete na box model, okrem margin a padding tam bol ešte border, to jest rámček. Pri zadávaní rámčeka chce css tri informácie: hrúbka, typ a farba. Syntax vyzerá takto:

border: 5px solid black;

Ak to pridáte napríklad divu, dostanete okolo neho čierny rámček.

Čo sa sa dá s rámčekom ďalej robiť?

Za prvé, môžeme sa pohrať s vlastnosťami.

div{
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    
    padding: 10px;
    border: 3px dotted goldenrod;   
}

Za druhé, vieme urobiť rôzne rámčeky pre rôzne strany (left, right, top, bottom). Funguje to rovnako ako pri marginoch a paddingoch. Z tohto sa dajú robiť celkom pekné grafické prvky.

p{
    margin-bottom: 20px;
    padding: 10px;
    padding-bottom: 20px;
    border-bottom: 20px double palegoldenrod;
}

Za tretie, rámčekom vieme zaoblovať rohy. Robí sa to pomocou vlastnosti border-radius (radius je v tomto prípade polomer zaoblovacej kružnice) Takto vyzerá základný kód.

h2{
    display: block;
    background-color:  gold;
    text-align: center;
    
    border: 2px solid black;
    border-radius: 15px;
}

Toto sa dá celkom variabilne kombinovať. Napríklad:

h2{
    display: block;
    background-color:  gold;
    text-align: center;
    
    padding: 10px;
    width: 200px;
    border: 2px solid gold;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
}

div{
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    
    padding: 0;
    border-left: 10px solid gold;  
}

Alebo:

h2{
    display: block;
    background-color:  white;
    text-align: center;
    
    margin-left: auto;
    margin-right: auto;
    
    width: 180px;
    line-height: 90px;
    border: 3px dashed black;
    border-radius: 50%;
}

div{
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    
    padding: 20px;
    border-left: 2px dashed black;
    border-right: 2px dashed black;
}

A podobne. Dá sa s tým celkom dosť hrajkať.

Dobre, dosť bolo rámčekov, poďme na triedy.

CSS class

Minulý týždeň sme formátovali stránku o rybkách. Boli tam v zásade tri články s rovnakým formátovaním. Využili sme pri tom výhodu css, kde sme určili všeobecné pravidlá pre každý typ elemenu (nadpis/zoznam/...) a tým ich aplikovali na všetky tri články. Čo ak ale potrebujeme viacero rôznych typov paragrafov/linkov/atď?

Na to existujú v css takzvané triedy (class). Povedzme, že chceme mať na našej stránke dva typy paragrafov. Normálny text a zdôraznený text. Odlíšime ich pomocou tried.

Rozkrájate si text na kačičkovej stránke na viacero paragrafov. Odstráňte si všetky css vlastnosti pre tag p. (ja som v príklade nižšie poodstraňovala aj všetky ostatné dekoratívne prvky, nech sa vám ten kód ľahšie lúšti)

Takže začíname s niečím takýmto:

Urobíme si dve triedy paragrafov. Prvá sa bude volať normal, druhá important. Priradíme im to ako atribút tagu:

<p class=”normal”> … </p>
<p class=”important”> … </p>

Teraz môžeme všetkým paragrafom triedy normal priradiť nejaké vlastnosti a triedy important nejaké iné. V css sa triedy volajú tak, že dáte bodku a za to názov triedy. Ostatné funguje tak, ako sme zvyknutí. Ja som si napíklad dala

A dostala som dva typy paragrafov.

.normal{
    color: darkgoldenrod;
    text-indent: 30px;
}

.important{
    color: darkgoldenrod;
    font-size: 20px;
    margin: 40px;
    border: 9px double gold;
    padding: 10px;
    text-align: justify;  
}

Niektoré vlastnosti na mojej stránke majú všetky paragrafy rovnaké, napríklad farbu písma. V rámci prehľadnosti a optimalizácie môžem tieto vlastnosti presunúť do vlastností pre p.

p{
    color: darkgoldenrod;
}

.normal{  
    text-indent: 30px;
}

.important{
    font-size: 20px;
    margin: 40px;
    border: 9px double gold;
    padding: 10px;
    text-align: justify;   
}

Teraz VŠETKY paragrafy na stránke budú mať farbu písma darkgoldenrod. A tie, čo sú ešte k tomu aj triedy normal alebo important dostanú nejaké vlastnosti navyše.

K tomuto ešte dve dôležité poznámky:

1. Jeden element môže mať aj viac tried.

Napríklad si spravím triedu

.sikmo{
    font-style: italic;
}

A napríklad môjmu druhému paragrafu okrem triedy important priradím aj triedu sikmo. Tým získa vlastnosti oboch tried. Píšu sa za sebou, oddelené medzerou.

<p class="important sikmo"> … </p>

2. Jedna trieda môže byť používaná aj na rôzne druhy tagov.

Napríklad moju triedu šikmo môžem priradiť aj nadpisu. Alebo hocičomu. Teoreticky aj obrázku (aj keď to nebude mať žiaden efekt).

Prepisovanie hodnôt v CSS:

CSS vôbec nevadí, ak jednej vlastosti priradíte viacero hodnôt. CSS proste pôjde postupne, vždy urobí nové priradenie a nakoniec tam ostane to posledné. Čiže ak urobíte

p{
	color: red;
	color: green;
	color: blue;
}

Dostanete paragraf s modrým textom. Browsre s tým nemajú problém a je to korektné.

Dá sa to využiť tak, že ak chcete mať napríklad padding pre objekt všade 0, okrem ľavej strany, kde ho chcete mať 100px, môžete naskôr priradiť všetkým stranám 0 a následne zmeniť ľavú stranu na 100px.

p{
	padding: 0;
	padding-left: 100px;
}

Dokonca môžete túto hodnotu znova dodatočne zmeniť vo vybratých paragrafoch pomocou tried. Vo svete html je to bežný jav.

V skutočnosti väčšina priraďovaní dizajnu jednotlivým elementom sa v css robí pomocou rôznych kombinácií tried. Na každý dizajn, aký si vymyslíte, existuje veľa riešení toho, na aké triedy to podeliť, pričom tieto riešenia majú rôznu úroveň efektivity a prehľadnosti. To je jedna z tých vecí, čo sa človek postupne učí robiť lepšie a lepšie.

SAMOSTATNÉ CVIČENIE:

Na zopakovanie dnešného učiva si stiahnite predlohu a vytvote z nej takúto webstránku.

Na predlohe sú všetky texty iba v paragrafoch (a nadpisoch). Na dosiahnutie vytúženého dizajnu bude nutné robiť aj nejaké úpravy v html - napríklad niektoré skupinky elementov zbaliť do nejakých divov. Jediný zákaz je prepisovať samotný obsah textov. Čiže nadpisy ktoré sú písané normálne a chceme ich mať veľkými písmenami treba upraviť pomocou css.

pozn: farebnú schému som ukradla odtiaľto (akurát tú modrú som zmenila na #00b3ba aby bola lepšie vidno) + ešte som použila bielu.

pozn2: použité fonty sú EB Garamond a Patrick Hand.

Úlohu mi pošlite ako .zip, v ktorom bude všetko zbalené (html+css):