К содержанию

HTML és CSS oktatóanyag kezdőknek

Egyszerű oktatóanyag weblapkészítéshez HTML és CSS nyelveken kezdőknek, részletes elmélettel és feladatokkal.

CSS alapok

A CSS nyelv alapjai

Hogyan dolgozzunk CSS-sel

Színkulcsszavak a CSS-ben

Bármilyen szín a CSS-ben

Elemek szélessége és magassága CSS-ben

Szöveg igazítása CSS-ben

Szöveg jobbra igazítása CSS-ben

Szöveg középre igazítása CSS-ben

Szöveg balra igazítása CSS-ben

Szöveg igazítása jobbra és balra egyszerre CSS-ben

Gyakorlat a szöveg igazítására CSS-ben

A szöveg vastagsága CSS-ben

Dőlt betűk a CSS-ben

Betűméret CSS-ben

Betűtípus CSS-ben

Sorok közötti távolság CSS-ben

A line-height értéke mértékegység nélkül CSS-ben

A font CSS rövidített tulajdonság

A szöveg első sorának behúzása CSS-ben

Szöveghatások CSS-ben

Szöveg aláhúzása CSS-ben

Szöveg felső aláhúzása CSS-ben

Szöveg áthúzása CSS-ben

CSS szöveg effektusok visszavonása

Alapvető CSS tulajdonságok gyakorlata

Szelektorok

A HTML elemek közötti rokoni kapcsolatok

CSS tulajdonságok öröklése

A szelektorok csoportosítása a CSS-ben

Általános tulajdonságok szelektorok csoportosításakor a CSS-ben

Leszármazott szelektorok a CSS-ben

Gyermek szelektor a CSS-ben

CSS elem osztályok

A span címke szövegrészekhez HTML-ben

A div tag a HTML tagok csoportosításához

CSS osztályok csoportosítása

A megadott osztállyal rendelkező elem kiválasztása CSS-ben

Leszármazott szelektorok és osztályok a CSS-ben

Összetett gyermekválasztó és osztály kombinációk a CSS-ben

Kezdők gyakori hibája az utód szelektorban

Több CSS osztállyal rendelkező elem

Elem kiválasztása egyedi id alapján CSS-ben

Id szelektor és CSS osztályok

Az id használata CSS-ben

Elem kiválasztása több osztállyal CSS-ben

Több CSS szelektor egymás után

Hiba több CSS szelektor használatakor

Összetett CSS szelektorok csoportosítása

Hiba összetett CSS szelektorok csoportosításakor

Gyakorlat CSS szelektor kombinációkra

CSS szelektorok prioritása

Megjegyzés a CSS tulajdonságok konfliktusához

A specifikusság szabályai CSS-ben

A CSS leszármazott szelektorok prioritása

Szomszédos szelektor CSS-ben

Testvér szelektor CSS-ben

Univerzális szelektor a CSS-ben

Attribútum szelektorok a CSS-ben

A linkek állapotai a CSS-ben

A linkállapotok sorrendjének finomságai a CSS-ben

A link és visited linkállapotok CSS-ben

A link állapotok általános használata CSS-ben

Összetett szelektorok linkállapotokkal CSS-ben

Hivatkozás osztállyal a CSS-ben

CSS végelemek kiválasztása

Elemek pozíció szerinti kiválasztása CSS-ben

Egyetlen gyermek kiválasztása CSS-ben

Üres elemek kiválasztása CSS-ben

Pozíció és elem típus szerinti kiválasztás CSS-ben

A negációs szelektor CSS-ben

Díszítés

Háttérszín beállítása CSS-ben

A CSS keretek alapjai

Folytonos szegély CSS-ben

Pontozott szegély CSS-ben

Szaggatott vonalú szegély CSS-ben

Konvex szegély CSS-ben

Dupla szegély CSS-ben

A border CSS tulajdonság rövidítése

Egyedi oldalak szegélye CSS-ben

A blokk szegélyeinek lekerekítése CSS-ben

Háttér szegély lekerekítése CSS-ben

Kör létrehozása CSS-ben

Különböző kerekítések különböző sarkokhoz CSS

Négy érték a CSS különböző sarkok kerekítéséhez

Két érték a CSS saroklekerekítésekhez különböző sarkokra

Három érték a különböző sarkok lekerekítéséhez CSS-ben

Kerekített sarkok százalékban CSS-ben

Kör létrehozása százalékos lekerekítéssel CSS-ben

Háttérkép a CSS-ben

A háttérkép ismétlése CSS-ben

Egyéb háttértulajdonságok a CSS-ben

A lista jelek módosítása ul elemeknél CSS-ben

Négyzetes listajelzők ul listákhoz CSS-ben

UL lista jelölői kör alakban CSS-ben

UL lista jelölőinek kezelése CSS-ben

Listajelzők eltávolítása ul elemből CSS-ben

A listaelemek jelölőinek kezelése ol-ben CSS-ben

Kis római számok ol listákhoz CSS-ben

Nagybetűs római számok ol listákhoz CSS-ben

Kisbetűk (lower-alpha) rendezetlen listákhoz CSS-ben

Nagybetűs latin betűk ol listákhoz CSS-ben

Kisbetűs görög betűk ol listákhoz CSS-ben

Nullával kezdődő számok ol listákhoz CSS-ben

Blokkmodell

Margókkal való munka CSS-ben

Margók különböző oldalakra CSS-ben

Több érték a margin tulajdonságban CSS-ben

A margin tulajdonság négy értéke a CSS-ben

Két érték a margin tulajdonságban CSS-ben

Három érték a margin tulajdonságban CSS-ben

A padding margók kezelése CSS-ben

Belső margók különböző oldalakra CSS-ben

Több érték a padding tulajdonságban CSS-ben

A padding margók kezelése CSS-ben

A határ hatása az elemek kiterjedésére CSS-ben

A padding és a szegély hatása az elemek kiterjedésére CSS-ben

Az elemek kiterjesztésének visszavonása a CSS-ben

A blokk elemek sajátosságai a CSS-ben

A blokk elem szélessége és magassága CSS-ben

A blokk elem szélessége CSS-ben

Blokk elem magassága CSS-ben

A tartalom nélküli blokk elem magassága a CSS-ben

Több blokk elem egymás mellett CSS-ben

A CSS inline elemensek sajátosságai

A soros elem szélessége és magassága a CSS-ben

Több soron belüli elem egymás mellett CSS-ben

Beágyazott elemek közötti margók a CSS-ben

A HTML elemek blokkmodelljének meghatározása

A display tulajdonság használata CSS-ben

A sorblokk elemek sajátosságai a CSS-ben

A soron belüli blokk elem szélessége és magassága CSS-ben

A soronkénti blokkelem szélessége CSS-ben

A soron belüli blokk elem magassága CSS-ben

Több soronkénti blokkelem egymás mellett CSS-ben

Blokk elemek igazítása CSS-ben

Blokk elem bal margóval történő igazítása CSS-ben

Blokk elem igazítása jobb margóval CSS-ben

Inline elemek igazítása CSS-ben

Inline elemek középre igazítása CSS-ben

Több inline elem középre igazítása

Inline elemek jobbra igazítása CSS-ben

Inline-blokk elemek igazítása CSS-ben

Inline-blokk elemek középre igazítása CSS-ben

Inline-blokk elemek jobb oldali igazítása CSS-ben

Flex elemek a CSS-ben

A flex elemek szülő elemének magassága CSS-ben

A flex elemek szülőjének szélessége CSS-ben

A flex elemek inline-block szülője a CSS-ben

A szülő flex elemek padding margóinak kezelése CSS-ben

Margin behúzások az utódoknak CSS-ben

Flex elemek igazítása CSS-ben

Flex elemek középre igazítása CSS-ben

Flex elemek igazítása a szülő elemben CSS-ben

Flex elemek igazítása a szülőhöz margókkal

Flex elemek igazítása a szülőelemre egyenlő térközökkel

Pozicionálás

Abszolút pozicionálás CSS-ben

Relatív pozicionálás elemek CSS-ben

Szülőhöz viszonyított pozicionálás CSS-ben

Pozicionálás abszolút szülőhöz viszonyítva CSS-ben

Abszolút pozicionálás koordináták nélkül CSS-ben

Középre igazítás abszolút pozícióval CSS-ben

Negatív értékek a pozicionálásban CSS-ben

Rögzített pozicionálás CSS-ben

Blokk a teljes képernyő szélességében CSS-ben

Z-tengely menti elemek egymásra helyezése CSS-ben

A Z-tengely menti elemek egymásra helyezésének szabályozása CSS-ben

A negatív z-index érték alkalmazásának finomságai a CSS-ben

Floatok

Bevezetés a CSS float tulajdonságába

A lebegő elemek áthatolása a címkék között CSS-ben

A float és margin kombinálása CSS-ben

A float és a padding kombinálása CSS-ben

Lebegő elemek a címkék alatt CSS-ben

A float elemek hatása a szülő elemre CSS-ben

Floats szülőelemének magassága CSS-ben

Szöveg float szülőelemben CSS-ben

Lebegés a CSS-ben

A float törlése a CSS clear tulajdonságával

Külön div clearfix-szel CSS-ben

Clearfix és a szülő magassága a CSS-ben

A float tulajdonság CSS blokkokhoz

A float tulajdonság és több blokk a CSS-ben

A float tulajdonság és a szöveg nélküli szülő a CSS-ben

Flexbox

A flex elemek sorba vagy oszlopba rendezése CSS-ben

CSS flex elemek elhelyezése fordított sorban

Flex elemek elhelyezése oszlopban CSS-ben

Oszlop megfordítása flex elemekkel CSS-ben

Fő- és keresztirányú tengelyek a CSS flex blokkokban

Flex elemek igazítása a főtengely mentén CSS-ben

Flex elemek igazítása a keresztirányú tengely mentén CSS-ben

A center értéke az align-items tulajdonságnak a CSS-ben

Középre igazítás magasság nélkül CSS-ben

Különböző magasságú elemek középre igazítása CSS-ben

A stretch értéke az align-items tulajdonságnak CSS-ben

Gyakorlat a tengelyek menti igazításra CSS-ben

Egyedi elem igazítása a flex modellben CSS-ben

A flex blokkok sorrendje CSS-ben

Grid-ek

Bevezetés a CSS Gridbe

CSS Grid pályák és vonalak

Gridok megjelenítése a böngésző hibakeresőjében

Oszlopok számának és szélességének beállítása CSS grid-ben

Az fr egység a CSS Gridben

A fr tört egységek a CSS Gridben

Pixelek és fr egységek a CSS grid-ekben

Százalékok és fr egységek a CSS grid-ekben

A repeat függvény a CSS grid-ekben

Az auto érték jelentése CSS grid-ekben

Az auto-fill érték jelentése CSS grid-ekben

A minmax függvény a CSS grid-ekben

Az auto-fit érték jelentése a CSS Gridben

A sorok számának és szélességének beállítása CSS grid-ben

RÖVIDÍTÉS A SOROK ÉS OSZLOPOK SZÁMÁRA CSS GRID-BEN

Sorok egyesítése CSS grid-ekben

Oszlopok egyesítése CSS grid-ekben

Sor- és oszlopkombinációk a CSS grid-ben

Oszlopok átfedése CSS grid-ekben

Oszlopok közötti távolság a CSS grid-ben

Távolság a sorok között a CSS grid-ben

Távolság az oszlopok és sorok között CSS grid-ben

CSS Grid csempe elrendezés

Elrendezések

Menükészítés CSS-ben

Egyszerű egyoszlopos weboldal elrendezések CSS-ben

Több wrapperes elrendezési séma CSS-ben

A weboldal szerkezeti blokkjai HTML-ben

Kétszálas weboldal elrendezési séma CSS-ben

Háromoszlopos weboldal elrendezési séma CSS-ben

Speciális címkék a weboldal elrendezési elemeihez a HTML-ben

Alapvető elrendezési címkék a HTML-ben

Szakaszokhoz használt tag a HTML-ben

Gyakorlat HTML és CSS vázlatokon