XHTML + CSS – 30 lekcia – tvorba horizontálneho menu – selectory v praxi

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

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

XHTML + CSS – 20 lekcia – atribút class

Atribút “class” je veľmi dôležitá súčasť tvorby internetových stránok. Class umožňuje presne jednoducho a rýchlo špecifikovať jedno alebo niekoľko virtuálnych mien pre html tagy (značky) a tak výrazným spôsobom uľahčuje prácu s kaskádovými štýlmi (prácu s grafickým prevedením stránky).  Html atribút class môže byť použitý pri všetkých elementoch na stránke čo ale nie vždy potrebné. Výhodou tohto spôsobu označovania oproti označovaniu pomocou atribútu “id” je vlastnosť, že na jednej stránke môže byť naraz na niekoľko elementov použitá rovnaká trieda (class), kdežto pri “id” je (viac…)