01. TÉMACSS
Szelektorok erőssége
Melyik szabály nyer, ha több is ugyanarra az elemre vonatkozik?
- kaszkád
- specificitás (ID, osztály, típus)
- :is() és :where()
- inline stílus
- !important
Interaktív szemléltető
WEBFEJLESZTÉS · CSS ALAPOK
CSS műhely.
Kilenc interaktív szemléltető a CSS legfontosabb fogalmaihoz. Nem képeket nézel: minden csúszka és gomb a valódi CSS-t módosítja, a kódpanel pedig pontosan azt a szabályt mutatja, amit éppen látsz.
- Állítsd átcsúszkákkal és gombokkal, a kód közben együtt változik
- Lásd, mitől vanrétegmutató, méretvonalak, tengelyek és rácsvonalak a valódi elemen
- Vidd hazaa kódpanel tartalma egy kattintással másolható a saját oldaladba
PRÓBÁLD KI
Mitől akkora a doboz?
szülő
.doboz
szomszéd
marginborderpaddingtartalom
stilus.css
TÉMÁK JAVASOLT SORRENDBEN
02. TÉMACSS
Pszeudo-osztályok és -elemek
Állapotok, pozíciók és generált tartalom extra HTML nélkül
- :hover, :active
- :focus-visible
- :nth-child(an+b)
- ::before, ::after
- űrlapállapotok
Interaktív szemléltető
03. TÉMACSS
Doboz-modell
Tartalom, belső margó, szegély, margó – és hogy mennyi helyet foglal az elem
- content
- padding
- border
- margin
- box-sizing
Interaktív szemléltető
04. TÉMACSS
Display
block, inline, inline-block, none – hogyan helyezkedik el az elem
- block
- inline
- inline-block
- none
- visibility: hidden
Interaktív szemléltető
05. TÉMACSS
Mértékegységek
px, %, em, rem, vw, vh – mihez viszonyít a méret?
- px
- %
- em
- rem
- vw, vh
Interaktív szemléltető
06. TÉMACSS
Háttér és színátmenet
Színformátumok, színátmenetek, háttérkép és háttérrétegek
- hex, rgb(), hsl()
- átlátszóság
- linear-gradient()
- radial-gradient()
- background-size
Interaktív szemléltető
07. TÉMACSS
Pozicionálás
static, relative, absolute, fixed, sticky
- dokumentumfolyam
- top, right, bottom, left
- tartalmazó blokk
- fixed
- sticky
Interaktív szemléltető
08. TÉMACSS
Flexbox
Egydimenziós elrendezés: fő tengely és kereszttengely
- display: flex
- flex-direction
- justify-content
- align-items
- flex-wrap
Interaktív szemléltető
09. TÉMACSS
Grid
Kétdimenziós rács: sorok, oszlopok, rácsvonalak, területek
- grid-template-columns
- fr egység
- repeat(), minmax()
- gap
- grid-template-areas
Interaktív szemléltető
ARCHÍVUM · 2024–2025
A szemléltetők korábbi változata
Az anyag első, 2024–2025 körül készült formája, változtatás nélkül megőrizve. Egyes példái pontatlanok – a javítások listája a repó docs/HIBAJEGYZEK.md fájljában olvasható.