HTML és CSS oktatóanyag kezdőknek

HTML alapok

Bevezetés A HTML nyelv HTML elemek Attribútumok Stílusok Az oldal alapvető szerkezete Alapvető elemek Bekezdések Címek Szöveg vastagítása Szöveg dőltté tétele Rendezetlen listák Rendezett listák Hivatkozások Belső hivatkozások Képek A kép szélessége A kép magassága Kép szélességének és magasságának beállítása Táblázatok A táblázat szélessége és magassága Címkésejtek Gyakorlat

CSS alapok

Bevezetés a CSS-be Hogyan dolgozzunk CSS-sel Színértékek Bármilyen színek Szélesség és magasság Szöveg igazítása Szöveg jobbra igazítása Szöveg középre igazítása Szöveg balra igazítása Szöveg sorkizárt igazítása Gyakorlat szöveg igazításra Vastagság Dőlt betű Betűméret Betűtípus család Sorköz Line-height érték mértékegység nélkül Font rövidített tulajdonság Szöveg behúzása Szöveg effektusok Szöveg aláhúzása Szöveg feletti vonal Szöveg áthúzása Szöveg effektusok eltávolítása Gyakorló feladat

Szelektorok

Elemek rokoni kapcsolatai Tulajdonságok öröklődése Szelektorok csoportosítása Közös tulajdonságok Leszármazott szelektorok Gyermek szelektor Osztály szelektor Span elem Div elem Osztályok csoportosítása Elem megadott osztállyal Leszármazott szelektor és osztályok Összetett kombinációk a leszármazott szelektorral és osztályokkal Kezdő gyakori hibája a leszármazott szelektorban Elem több osztállyal Szelektor id alapján Szelektor id és osztályok alapján Id használata Szelektor több osztály alapján Több szelektor együtt Több szelektor hibája Összetett szelektorok csoportosítása Hiba csoportosításkor Gyakorlás szelektor kombinációkra Szelektorok prioritása Megjegyzés a tulajdonság konfliktushoz Specificitás szabályai Leszármazott szelektorok prioritása Szomszédos szelektor Testvér szelektor Univerzális szelektor Attribútum szelektorok Link állapotok A link állapotok sorrendjének finomságai Link és visited állapotok Link állapotok szokásos használata Összetett szelektorok linkekkel Link osztállyal Végelemek kiválasztása Kiválasztás pozíció alapján Egyetlen gyermek kiválasztása Üres elemek kiválasztása Kiválasztás pozíció és elem típus alapján Negáció not

Díszítés

Háttérszín Szegélyek kezelésének alapjai Folytonos szegély Pontozott szegély Szaggatott szegély Kiemelt szegély Dupla szegély Összevont tulajdonság a szegélyhez Szegélyek különböző oldalakhoz Blokk szegélyeinek lekerekítése Háttér szegélyeinek lekerekítése Kör létrehozása Lekerekítés különböző sarkokhoz Négy érték Két érték Három érték Lekerekítés százalékban Kör létrehozása százalékos lekerekítéssel Kép a háttérhez Háttérkép ismétlése Egyéb tulajdonságok a háttérhez ul lista jelölői Négyzet alakú ul lista jelölők Kör alakú ul lista jelölők Kitöltött kör alakú ul lista jelölők ul lista jelölők eltávolítása ol lista jelölői Kis római számok ol listákhoz Nagy római számok ol listákhoz Kis latin betűk ol listákhoz Nagy latin betűk ol listákhoz Kis görög betűk ol listákhoz Előtte nullás számok ol listákhoz

Blokkmodell

Külső margó margin Margók margin különböző oldalakra Több érték a margin-ben Négy érték a margin-ben Két érték a margin-ben Három érték a margin-ben Belső térköz padding Térközök padding különböző oldalakra Több érték a padding-ben Elemek kiterjesztése A szegély hatása az elemek kiterjesztésére A padding és a szegély együttes hatása az elemek kiterjesztésére Elemek kiterjesztésének megszüntetése Blokk elemek Blokk elem szélessége és magassága Blokk elem szélessége Blokk elem magassága Magasság tartalom nélkül Több blokk elem egymás mellett Inline elemek Inline elem szélessége és magassága Több inline elem egymás mellett Térközök inline elemek között A blokkmodell meghatározása A display tulajdonság Inline-blokk elemek Inline-blokk elem szélessége és magassága Inline-blokk elem szélessége Inline-blokk elem magassága Több inline-blokk elem egymás mellett Blokk elemek igazítása Blokk elem igazítása bal margóval Blokk elem igazítása jobb margóval Inline elemek igazítása Inline elemek középre igazítása Több inline elem középre igazítása Inline elemek jobb szélen igazítása Inline-blokk elemek igazítása Inline-blokk elemek középre igazítása Inline-blokk elemek jobb szélen igazítása Flex elemek Flex elemek szülőjének magassága Flex elemek szülőjének szélessége Inline-blokk szülő A szülő padding térközei Margók a gyermekeknek Flex elemek igazítása Flex elemek középre igazítása Flex elemek igazítása a szülő mentén Flex elemek igazítása a szülő mentén margókkal Flex elemek igazítása a szülő mentén egyenletes margókkal

Pozicionálás

Abszolút Relatív Abszolút a szülőhöz képest Abszolút az abszolúthoz képest Abszolút koordináták nélkül Középre igazítás absolute segítségével Abszolút negatív értékek Rögzített pozicionálás Teljes képernyőszélességű blokk Elemek egymásra helyezése a Z tengelyen Elemek egymásra helyezésének szabályozása a Z tengelyen A negatív z-index érték alkalmazásának nüanszai

Floatok

A float tulajdonság bevezetése A float tulajdonság és a címkék A float és a margin együttes használata A float és a padding együttes használata Lebegő elemek a címkék alatt A floatok hatása a szülőelemre A floatok szülőjének magassága Szöveg a floatok szülőelemében Körbefolyás A körbefolyás megszüntetése Külön div clearfix-szel A szülőelem magassága és a clearfix A float tulajdonság blokkokra A float tulajdonság és több blokk A float tulajdonság és szöveg nélküli szülő

Flexbox

Elrendezés sorban vagy oszlopban Flex elemek elhelyezése fordított sorban Flex elemek elhelyezése oszlopban Flex elemekkel töltött oszlop megfordítása Fő- és keresztirányú tengely Igazítás a főtengely mentén Igazítás a keresztirányú tengely mentén Az align-items tulajdonság center értéke Középre igazítás magasság nélküli blokkoknál Középre igazítás különböző magasságú blokkoknál Az align-items tulajdonság stretch értéke Gyakorlat a tengelyek mentén történő igazításra Egyedi elem igazítása Flex blokkok sorrendje

Grid-ek

Bevezetés a grid-ekbe Sávok és vonalak Megjelenítés a debuggerben Oszlopok Fr egység Tört fr Pixel és fr Százalék és fr Repeat függvény Auto érték Auto-fill érték Minmax függvény Auto-fit érték Sorok Rövidítés sorokra és oszlopokra Sorok egyesítése Oszlopok egyesítése Egyesítések kombinációi Oszlopok átfedése Oszlopok közötti távolság Sorok közötti távolság Oszlopok és sorok közötti távolság Csempe

Elrendezések

Menü készítése Egyszerű egyoszlopos weboldal elrendezések Több wrapperes elrendezési séma A weboldal szerkezeti blokkjai Kétoszlopos elrendezési séma Háromoszlopos weboldal elrendezési séma Speciális címkék a weboldal elrendezési elemeihez Az elrendezés fő címkéi Címke szekciókhoz Gyakorlat elrendezéseken

↑