V doterajšom seriále náučných videí sme sa bavili prevažne o selectoroch, čiže o spôsoboch ako vieme špecificky označiť viaceré rovnaké elementy na stránke. Ako také zavŕšenie tohto seriálu si môžeme vytvoriť jednoduché efektné menu, pomocou html, css a jednoduchého setu niekoľkých ikon. Pri tvorbe menu s ikonkami si precvičíme prácu s viacerými spôsobmi (viac…)
CSS
XHTML + CSS – 29 lekcia – nth-child, násobný element
Jednoduchý a ľahko pochopiteľný návod ako sa vysporiadať v situácii s viacerými rovnakými elemetmi bez pridávania ďalších tried/class. V návode sa dozviete ako jednoducho označiť, prvý, posledný alebo hocijaký rovnaký element za pomoci veľmi jednoduchého triku.
XHTML + CSS – 28 lekcia – pseudo elementy before, after
Isto si spomeniete na prácu s odkazmi (<a></a> tag), pri nich sme sa v CSS stretli s rôznymi triedami napr.: :hover, :active a pod. tieto classy neexistovali. Teda neexistovali v ponímaní z HTML pohľadu, naše odkazy nemali v sebe napisane <a class=”hover”></a> a podobne. A predsa bolo možné tieto triedy používať v CSS. Tieto triedy sú (viac…)
XHTML + CSS – 27 lekcia – selectory – attribute selector
Iste si spomínate na úplne prvé videá kde som vysvetľoval, čo je html element a čo je atribút. Atribút poskytuje rozširujúce informácie o elemente, často-krát je atribút neoddeliteľnou súčasťou elementu pre zabezpečenie požadovanej (viac…)
XHTML + CSS – 26 lekcia – selectory – rodič – potomok
Každý html kód vieme rozčleniť z hľadiska rodičov a potomkov, majme jednoduchý html kód napr.:
<html> <head> <title></title> </head> <body> </body> </html>
Z tohto jednoduchého kódu vidíme, že head a body sú potomkami rodiča html, ďalej title je potomok rodiča head.
Pri programovaní html stránok sa už len tieto vzťahy (viac…)
XHTML + CSS – 25 lekcia – selectory – rovnaké CSS pre viac html elementov
V prípade, že potrebujete, alebo skôr chcete aplikovať rovnaké CSS pre viaceré html elementy na stránke je veľmi neefektívne používať kopírovanie tých istých CSS príkazov pre tieto elementy. Kopírovanie CSS zbytočne zvyšuje veľkosť CSS súboru a následne robí kód horšie modifikovateľným v budúcnosti. (viac…)
XHTML + CSS – 24 lekcia – z-index
Pre rozšírenie polohovania elementov nie len do smerov osi X a Y slúži príkaz z-index, ktorý umožňuje nastaviť polohu elementu v smere osi Z. Os Z si môžeme predstaviť jednoducho, ako os ktorá pretína náš monitor v smere od našich očí. Čiže elementy sú akože bližšie k nám (pred monitorom) a ďalej od nás (za monitorom). Keď si povieme že obrazovka nášho monitora bude mať (viac…)
XHTML + CSS – 23 lekcia – position: fixed
Použitím CSS príkazu:
position: fixed;
dosiahneme na stránke úplné ukotvenie elementu na danej pozícii. Pozícia je fixne spätá s veľkosťou okna prehliadača. Pomocou CSS polohovacích príkazov top, right, bottom, left upravujeme polohu elementu v okne prehliadača. Veľkou výhodou (viac…)
XHTML + CSS – 22 lekcia – position: absolute
Spôsob absolútneho polohovania je možné nastaviť použitím CSS príkazu
position: absolute;
pri konkrétnom elemente. Spôsob vypočítavania polohy elementu sa oproti relatívnemu polohovaniu zásadne zmení. Zatiaľ čo pri relatívnom polohovaní bola poloha polohovaných elementov vypočítavaná automaticky, tak pri absolútnom polohovaní je to naopak. Užívateľ pri tomto type striktne definuje polohu elementu pomocou príkazov top, right, bottom a left. Takto polohované elementy majú kotviaci bod umiestnený (viac…)
XHTML + CSS – 21 lekcia – poloha relative
Polohovanie elementov na stránke je veľmi dôležitá vlastnosť. Pri polohovaní je dôležité uvedomiť si možnosti ktoré nám “2D” priestor internetovej stránky ponúka. Polohu elementov je možné meniť v osi x, smerom vľavo, vpravo, rovnako môžeme meniť polohu v smere osi y v smere hore a dole. Polohovanie do strán je možné upravovať pomocou príkazov: top, right, bottom, left.
Čo je ale potrebné uvedomiť si je schopnosť prekrytia elementov na stránke a tvorba takzvaných vrstiev, čo v úvodzovkách nazvaný priestor “2D” mení na priestor trojdimenzionálny “3D”, (viac…)