# 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

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:

1. CSS beágyazás: inline, belső, külső (link)
2. Szelektorok: elem, .class, #id, *, leszármazott
3. Színek: névszín, HEX, RGB + background-color, background-image
4. Szövegformázás: font-family, font-size, font-weight, font-style, text-align, text-decoration
5. Box model: width, height, padding, border, margin, box-sizing
6. Táblázat: border-collapse, border, padding cellákra
7. Display: block, inline, inline-block, none
8. Float: float, clear
9. 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!