CSS Gyakorló

Írd meg. Nézd meg. Értsd meg. • v1.0
CSS LAB

HTML-környezet

Enter: ellenőrzés • Shift+Enter: új sor • Tab: következő vezérlő
Célállapot
A te megoldásod • élő előnézet
A fehér előnézet önálló mintalap. A feladat a kért tulajdonságokat ellenőrzi; teljes szabálynál a kijelölt elemek körét is.


Helyes: 0Hibás próbálkozás: 0Segítség: 0Sorozat: 0


Használati útmutató és CSS-emlékeztető
Tanulás: a megoldás rögtön látható. Gyakorlás: kérhetsz tippet vagy megoldást; segítséggel teljesített feladat nem növeli a hibátlan sorozatot. TESZT: nincs segítség és kihagyás. Egy hibás válasz lezárja a tesztet; az „Új sorozat” vagy az F5 új próbát indít.
A téma vagy nehézség módosítása új sorozatot indít. A sikerlap feltünteti a választott szűrést. A gyakorló nem ismétli közvetlenül ugyanazt a feladatsablont, ha több sablon áll rendelkezésre.
.kartya {
  color: red;
  padding: 16px;
}
Osztály: .kartya • azonosító: #cim • elemtípus: p • leszármazott: .kartya p • közvetlen gyermek: .kartyak > .kartya.
margin: külső térköz • padding: belső térköz • border: szegély • box-sizing: border-box: a megadott szélességbe a padding és a border is beleszámít.
A szóközök, sortörések, színjelölések és az egyenértékű rövidítések megengedettek. Írj szabályos CSS-t, csak a feladat megoldását. Ebben a változatban nincs HTML, külső erőforrás, CSS-változó, calc(), animáció vagy JavaScript. A reszponzív feladatok a megadott max-width médiafeltételt kérik. Az előnézet a feltétel aktív állapotát szemlélteti; nem a tényleges ablakméret szerint vált.
A fájl offline is működik. Az eredmény ezen az oldalon, a böngészőben keletkezik; a képernyőkép nem hitelesített vizsgabizonylat. Érdemes rövid önálló formázási feladattal együtt értékelni.