19. CSS Összefoglaló – Emelt szintű érettségi

2025. november 23. • 20 perc olvasás • Összefoglaló

Ez a lecke összefoglalja a CSS témakörben tanultakat az emelt szintű digitális kultúra érettségire. Itt csak az érettségin elvárt anyag szerepel, tömören és áttekinthetően.

Érettségi összefoglaló

Ez az oldal kizárólag az emelt szintű érettségi CSS anyagát tartalmazza. Használd ismétléshez és gyors áttekintéshez!

1. CSS alapok

Mi a CSS?

CSS (Cascading Style Sheets) = lépcsőzetes stíluslapok. A HTML elemek megjelenését szabályozza: színek, méretek, elrendezés.

CSS beágyazás 3 módja

Mód	Szintaxis	Hol?
Inline	`<p style="color: red;">`	HTML elemben
Belső	`<style>...</style>`	head-ben
Külső (ajánlott)	`<link rel="stylesheet" href="style.css">`	head-ben, külön fájl

CSS szintaxis

szelektor {
    tulajdonság: érték;
    tulajdonság2: érték2;
}

2. Szelektorok

Szelektor típus	Szintaxis	Példa	Magyarázat
Elem	`elem`	`p { color: blue; }`	Minden <p> elemre
Osztály	`.osztaly`	`.kiemelt { color: red; }`	class="kiemelt" elemekre
Azonosító	`#azonosito`	`#fejlec { height: 60px; }`	id="fejlec" elemre
Univerzális	`*`	`* { margin: 0; }`	Minden elemre
Leszármazott	`A B`	`.doboz p { color: gray; }`	A-n belüli összes B
Elem + osztály	`elem.osztaly`	`p.kiemelt { font-weight: bold; }`	kiemelt osztályú p elemek

Specificitás (fontossági sorrend)

Ha több szabály vonatkozik egy elemre, a specifikusabb nyer:

Szelektor	Érték	Példa
Inline style	1000	`style="..."`
ID szelektor	100	`#fejlec`
Class szelektor	10	`.kiemelt`
Elem szelektor	1	`p`

Összeadódnak! Példa: .doboz p = 10 + 1 = 11

3. Színek és háttér

Szövegszín és háttérszín

Színek beállítása

/* Szöveg színe */
color: red;              /* névszín */
color: #FF0000;          /* HEX */
color: rgb(255, 0, 0);   /* RGB */

/* Háttérszín */
background-color: yellow;
background-color: #FFFF00;
background-color: rgb(255, 255, 0);

Színformátumok

Formátum	Szintaxis	Példa
Névszín	színnév angolul	`red`, `blue`, `white`
HEX	#RRGGBB	`#FF0000` (piros)
RGB	rgb(R, G, B)	`rgb(255, 0, 0)` (piros)

HEX értékek: 00 (0) – FF (255) minden színcsatornán

Háttérkép

Háttérkép beállítása

background-image: url("kepek/hatter.jpg");

4. Szövegformázás

Tulajdonság	Értékek	Leírás
`font-family`	Arial, sans-serif	Betűtípus
`font-size`	16px, 1.2em, 100%	Betűméret
`font-weight`	normal, bold, 100-900	Betűvastagság
`font-style`	normal, italic	Dőlt betű
`text-align`	left, center, right, justify	Szöveg igazítás
`text-decoration`	none, underline, line-through	Aláhúzás, áthúzás
`text-transform`	uppercase, lowercase, capitalize	Kis/nagybetű
`line-height`	1.5, 24px	Sormagasság
`letter-spacing`	2px, 0.1em	Betűköz

Szövegformázás példa

p {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: normal;
    text-align: justify;
    line-height: 1.6;
}

h1 {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
}

5. Box model

Minden HTML elem egy doboz, ami négy részből áll:

MARGIN (külső margó)

BORDER (keret)

PADDING (belső margó)

CONTENT
(tartalom)

Box model tulajdonságok

Tulajdonság	Példa	Leírás
`width`	300px, 50%	Szélesség
`height`	200px	Magasság
`max-width`	100%, 800px	Maximális szélesség
`min-width`	200px	Minimális szélesség
`padding`	20px, 10px 20px	Belső margó
`border`	1px solid #333	Keret (vastagság stílus szín)
`border-radius`	8px, 50%	Lekerekített sarkok
`margin`	20px, 0 auto	Külső margó
`box-sizing`	content-box, border-box	Méretszámítás módja

Padding és margin rövidítések

Rövidített írásmód

/* 1 érték: mind a 4 oldal */
padding: 20px;

/* 2 érték: fent-lent | bal-jobb */
padding: 10px 20px;

/* 4 érték: fent | jobb | lent | bal (óramutató) */
padding: 10px 20px 15px 25px;

/* Vízszintes középre igazítás */
margin: 0 auto;

Box-sizing

Box-sizing különbség

/* content-box (alapértelmezett) */
/* A width CSAK a tartalomra vonatkozik */
/* Teljes szélesség = width + padding + border */

.doboz {
    width: 300px;
    padding: 20px;
    border: 5px solid;
}
/* Tényleges szélesség: 300 + 20 + 20 + 5 + 5 = 350px */

/* border-box (ajánlott) */
/* A width TARTALMAZZA a padding-et és border-t */

.doboz {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 5px solid;
}
/* Tényleges szélesség: 300px */

6. Táblázat formázás

A HTML táblázatok megjelenését CSS-sel tudjuk formázni:

Tulajdonság	Példa	Leírás
`border-collapse`	collapse, separate	Szegélyek összevonása
`border`	1px solid #ddd	Cella szegélye
`padding`	8px, 10px	Cella belső margója
`background-color`	#f2f2f2	Cella/sor háttérszíne
`text-align`	left, center, right	Szöveg igazítás cellában
`width`	100%, 200px	Táblázat/oszlop szélessége

Táblázat formázás példa

/* Táblázat alapbeállítások */
table {
    border-collapse: collapse;
    width: 100%;
}

/* Cellák formázása */
td, th {
    border: 1px solid #dddddd;
    padding: 10px;
    text-align: left;
}

/* Fejléc kiemelése */
th {
    background-color: #1976d2;
    color: white;
}

Élő példa - Formázott táblázat:

Tulajdonság	Érték
border-collapse	collapse
padding	10px
width	100%

7. Display és float

Display tulajdonság

Érték	Viselkedés	Példa elemek
`block`	Új sorban, teljes szélesség, méret állítható	div, p, h1-h6
`inline`	Sorban marad, szélesség/magasság NEM állítható	span, a, strong
`inline-block`	Sorban marad, DE méret állítható	img, button
`none`	Elem elrejtése (nem foglal helyet)	rejtett elemek

Float (lebegtetés)

A float segítségével egy elem kikerül a normál folyamból és balra vagy jobbra „lebeg", a többi tartalom körbefolyja.

Float használata

/* Kép balra lebeg, szöveg körbefolyja */
img {
    float: left;
    margin-right: 15px;
}

/* Elem jobbra lebeg */
.oldalsav {
    float: right;
    width: 200px;
}

/* Float törlése - új sorba kerül */
.lablec {
    clear: both;
}

Tulajdonság	Értékek	Leírás
`float`	left, right, none	Lebegtetés iránya
`clear`	left, right, both	Float törlése

8. Mértékegységek

Egység	Típus	Leírás	Példa
`px`	Abszolút	Pixel (fix méret)	`font-size: 16px;`
`%`	Relatív	Szülő elem %-ában	`width: 50%;`
`em`	Relatív	Szülő betűméretéhez képest	`padding: 1.5em;`

9. Gyakorló feladatok

1. feladat – Szelektor azonosítás

Kérdés: Mit jelent a következő szelektor: .kartya p?

Válasz megjelenítése

A kartya osztályú elemen belüli összes <p> (bekezdés) elemet jelöli ki.

2. feladat – Specificitás

Kérdés: Melyik szabály érvényesül és miért?

#menu .link { color: red; }
.menu .link { color: blue; }
a.link { color: green; }

Válasz megjelenítése

A piros érvényesül.

#menu .link = 100 + 10 = 110
.menu .link = 10 + 10 = 20
a.link = 1 + 10 = 11

Az ID szelektor (#) erősebb mint bármennyi class.

3. feladat – Box model számítás

Kérdés: Egy elem CSS-e:

.doboz {
    width: 200px;
    padding: 15px;
    border: 5px solid black;
    box-sizing: content-box;
}

Mekkora a doboz teljes szélessége?

Válasz megjelenítése

240px

Számítás: 200 + 15 + 15 + 5 + 5 = 240px

(content-box esetén a width csak a tartalomra vonatkozik)

4. feladat – Színkód

Kérdés: Milyen színt ad a #00FF00 HEX kód?

Válasz megjelenítése

Zöld

HEX: #RRGGBB → 00 (piros) + FF (zöld max) + 00 (kék) = tiszta zöld

10. Gyakori hibák

Kerülendő hibák az érettségin

Hiányzó pontosvessző: Minden deklaráció végén kell! color: red;
Class szelektor pont nélkül: .osztaly nem osztaly
ID szelektor # nélkül: #azonosito nem azonosito
Hiányzó mértékegység: margin: 20px; nem margin: 20; (kivéve 0)
Elírt tulajdonságnév: background-color nem backgroundcolor
Hiányzó kapcsos zárójel: p { color: red; }

Végső összefoglalás

Az emelt szintű érettségin elvárt CSS ismeretek:

CSS beágyazás: inline, belső, külső (link)
Szelektorok: elem, .class, #id, *, leszármazott
Színek: névszín, HEX, RGB + background-color, background-image
Szövegformázás: font-family, font-size, font-weight, font-style, text-align, text-decoration
Box model: width, height, padding, border, margin, box-sizing
Táblázat: border-collapse, border, padding cellákra
Display: block, inline, inline-block, none
Float: float, clear
Mértékegységek: px, %, em

Sok sikert az érettségihez!

Következő: Gyakorlati projekt - Receptoldal készítése - Gyakorold az érettségi anyagot egy komplett receptoldal elkészítésével!