Elit Hardver
10. CSS alapok és szelektorok
A CSS (Cascading Style Sheets) a weboldalak vizuális megjelenéséért felelős nyelv. Míg a HTML a tartalom struktúráját határozza meg, a CSS segítségével színeket, betűtípusokat, elrendezéseket és animációkat adhatunk az oldalunkhoz. Ebben a cikkben megismerkedhetsz a CSS alapjaival és a szelektorok használatával.
Érettségi információ
Ez a lecke EMELT SZINTŰ érettségi anyag!
A webes publikálás (HTML + CSS) csak emelt szinten követelmény. Ebből a leckéből érettségi anyag:
- CSS beágyazási módok (inline, belső, külső)
- Külső CSS fájl csatolása (
<link>) - Alap szelektorok (elem, osztály, azonosító)
- CSS szintaxis (szelektor, tulajdonság, érték)
Bónusz anyag (nem érettségi követelmény): pszeudo-osztályok részletesen, specificitás pontozás, kombinátorok.
Mi a CSS és mire használjuk? EMELT SZINT
A CSS (Cascading Style Sheets, magyarul: lépcsőzetes stíluslapok) egy stílusleíró nyelv, amely a HTML elemek megjelenését szabályozza. A "cascading" (lépcsőzetes) szó arra utal, hogy a stílusok egymásra épülnek és felülírhatják egymást meghatározott szabályok szerint.
A CSS három fő feladata
- Megjelenés: Színek, betűtípusok, háttérképek beállítása
- Elrendezés: Elemek pozicionálása, Flexbox, Grid layoutok
- Interakció: Hover effektek, animációk, átmenetek
HTML és CSS kapcsolata
A HTML és CSS szétválasztása a tartalom és megjelenés elkülönítésének elvét követi. Ez lehetővé teszi, hogy:
- Ugyanazt a HTML tartalmat különböző stílusokkal jelenítsük meg
- Egy CSS fájl több HTML oldalt is formázzon
- A weboldal karbantartása egyszerűbb legyen
- A fejlesztők és designerek külön dolgozhassanak
CSS beágyazási módok EMELT SZINT
A CSS-t háromféle módon kapcsolhatjuk a HTML dokumentumhoz. Mindegyiknek megvan a maga helye és célja.
1. Inline CSS - Soron belüli stílus
Az inline CSS közvetlenül a HTML elem style attribútumában helyezkedik el. Ez a legkevésbé ajánlott módszer, mert nehezen karbantartható.
<!-- Inline CSS - közvetlenül az elemen -->
<p style="color: red; font-size: 18px;">Piros szöveg</p>
<h1 style="background-color: yellow; padding: 10px;">
Sárga háttér
</h1>
<button style="background: #4CAF50; color: white; border: none; padding: 10px 20px;">
Stílusos gomb
</button>Mikor használd az inline CSS-t?
- ✅ Gyors teszteléshez: Ideiglenesen kipróbálni egy stílust
- ✅ Email template-ekben: Sok email kliens csak inline CSS-t támogat
- ✅ JavaScript dinamikus stílusokhoz: Futásidőben változó értékek
- ❌ Ne használd: Általános stílusozáshoz, mert nem újrafelhasználható
Érettségi vizsga - Fontos!
Az érettségi vizsgán SOHA ne használj inline CSS-t! A vizsgafeladatokban minden stílust a külső CSS fájlban (stíluslapon) kell elhelyezni. Az inline stílusok használata pontvesztéssel járhat, mivel a feladat általában külön kéri a HTML és CSS szétválasztását. Mindig a <link rel="stylesheet" href="style.css"> módszert alkalmazd!
2. Internal CSS - Belső stíluslap
Az internal CSS a HTML dokumentum <head> részében, a <style> tagen belül helyezkedik el. Egyetlen oldalra vonatkozó stílusokhoz hasznos.
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>Internal CSS példa</title>
<!-- Internal CSS a style tagben -->
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
h1 {
color: #333;
text-align: center;
}
p {
line-height: 1.6;
color: #666;
}
.kiemelt {
background-color: yellow;
padding: 5px;
}
</style>
</head>
<body>
<h1>Címsor</h1>
<p>Bekezdés szövege.</p>
<p class="kiemelt">Kiemelt bekezdés.</p>
</body>
</html>Érettségi vizsga - Fontos!
Az érettségi vizsgán az internal CSS-t se használd! Bár a belső stíluslap technikailag helyes megoldás, a vizsgafeladatok szinte mindig külső CSS fájl használatát kérik. A stílusokat mindig különálló .css fájlban helyezd el, és a <link> taggel linkeld be!
3. External CSS - Külső stíluslap (ajánlott)
Az external CSS egy külön .css fájlban található, amelyet a HTML <link> taggel kapcsolunk be. Ez a legjobb gyakorlat valós projektekben.
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>External CSS példa</title>
<!-- External CSS belinkelése -->
<link rel="stylesheet" href="style.css">
<!-- Több CSS fájl is belinkelhető -->
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/components.css">
</head>
<body>
<h1>Az oldal címe</h1>
<p>A stílusok a külső CSS fájlból jönnek.</p>
</body>
</html>/* style.css - Külső stíluslap */
/* Alap beállítások */
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
/* Címsor stílus */
h1 {
color: #333;
text-align: center;
margin-top: 20px;
}
/* Bekezdés stílus */
p {
line-height: 1.6;
color: #666;
padding: 0 20px;
}Miért a külső CSS a legjobb?
- Újrafelhasználható: Egy CSS fájl több HTML oldalt is formázhat
- Cache-elhető: A böngésző eltárolja, gyorsabb betöltés
- Karbantartható: Egy helyen módosítható az összes oldal stílusa
- Tiszta kód: HTML és CSS elkülönül, átláthatóbb
Beágyazási módok összehasonlítása
| Módszer | Előny | Hátrány | Használat |
|---|---|---|---|
| Inline | Gyors, specifikus | Nem újrafelhasználható | Tesztelés, email |
| Internal | Egy fájlban minden | Nem cache-elhető | Egyoldalas projektek |
| External | Újrafelhasználható, cache | Extra HTTP kérés | Valós projektek (ajánlott) |
CSS szintaxis EMELT SZINT
A CSS szabályok (rules) három fő részből állnak: szelektor, tulajdonság és érték.
/* CSS szabály felépítése */
szelektor {
tulajdonság: érték;
tulajdonság2: érték2;
}
/* Konkrét példa */
h1 {
color: blue; /* szín */
font-size: 24px; /* betűméret */
text-align: center; /* igazítás */
}
/* Több szelektor ugyanazzal a stílussal */
h1, h2, h3 {
font-family: Arial, sans-serif;
color: #333;
}
/* Megjegyzések CSS-ben */
/* Ez egy egysoros megjegyzés */
/*
Ez egy
többsoros
megjegyzés
*/CSS szintaxis szabályok
- Kapcsos zárójel: A tulajdonságok
{ }között vannak - Kettőspont: Tulajdonság és érték között
: - Pontosvessző: Minden deklaráció végén
;(az utolsónál opcionális, de ajánlott) - Kis-nagybetű: A CSS nem case-sensitive, de a konvenció a kisbetű
Alap szelektorok EMELT SZINT
A szelektorok határozzák meg, hogy mely HTML elemekre vonatkozzon a stílus. Íme a legfontosabb szelektortípusok:
1. Elem (típus) szelektor
Az elem szelektor az összes azonos típusú HTML elemet kiválasztja.
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>Elem szelektor példa</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Főcímsor</h1>
<p>Ez az első bekezdés.</p>
<p>Ez a második bekezdés.</p>
<a href="#">Ez egy link</a>
</body>
</html>/* Minden bekezdés kék színű lesz */
p {
color: blue;
}
/* Minden h1 címsor */
h1 {
font-size: 32px;
margin-bottom: 20px;
}
/* Minden link */
a {
color: #007bff;
text-decoration: none;
}Élő példa - Elem szelektor:
Figyeld meg: minden <p> elem kék színű lett, mert a CSS-ben a p szelektort használtuk.
2. Osztály (class) szelektor
Az osztály szelektor a . (pont) karakterrel kezdődik, és az adott class attribútummal rendelkező elemeket választja ki. Egy osztály több elemen is használható.
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>Osztály szelektor példa</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="kiemelt">Ez egy kiemelt bekezdés.</p>
<p>Ez egy normál bekezdés.</p>
<p class="kiemelt">Ez is kiemelt.</p>
<div class="kartya">Termékkártya 1</div>
<div class="kartya">Termékkártya 2</div>
<!-- Több osztály egy elemen -->
<button class="gomb gomb-primary nagy">Kattints!</button>
</body>
</html>/* Osztály szelektor ponttal kezdődik */
.kiemelt {
background-color: yellow;
padding: 10px;
border-left: 4px solid orange;
}
.kartya {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin: 10px 0;
}
/* Több osztály kombinálása */
.gomb {
padding: 10px 20px;
border: none;
cursor: pointer;
border-radius: 4px;
}
.gomb-primary {
background-color: #007bff;
color: white;
}
.nagy {
font-size: 18px;
padding: 15px 30px;
}Élő példa - Osztály szelektor:
Ez egy kiemelt bekezdés. (class="kiemelt")
Ez egy normál bekezdés. (nincs class)
Ez is kiemelt. (class="kiemelt")
Figyeld meg: a .kiemelt osztály két bekezdésre is vonatkozik, a gomb pedig három osztályt kombinál.
3. Azonosító (ID) szelektor
Az ID szelektor a # (kettőskereszt) karakterrel kezdődik. Egy ID csak egyszer használható egy oldalon!
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>ID szelektor példa</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="fejlec">
<h1>Oldal fejléc</h1>
</header>
<main id="fo-tartalom">
<p>Fő tartalom itt található...</p>
</main>
<footer id="lablec">
<p>Lábléc szövege</p>
</footer>
</body>
</html>/* ID szelektor kettőskereszttel (#) kezdődik */
#fejlec {
background-color: #333;
color: white;
padding: 20px;
}
#fo-tartalom {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
}
#lablec {
background-color: #222;
color: #999;
text-align: center;
padding: 15px;
}Élő példa - ID szelektor:
Figyeld meg: minden ID egyedi - #fejlec, #fo-tartalom és #lablec csak egyszer szerepelhet az oldalon.
Osztály vs ID - Melyiket használd?
- Osztály (.class): Többször használható, alacsonyabb specificitás → Ajánlott stílusozáshoz
- ID (#id): Egyedi, magas specificitás → JavaScript célpontnak, anchor linkekhez
- Tipp: A modern CSS-ben inkább osztályokat használunk, az ID-t kerüljük stílusozásra
4. Univerzális szelektor
A * (csillag) szelektor az összes elemet kiválasztja. Óvatosan használd, mert minden elemre hatással van.
/* Minden elem kiválasztása */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* Gyakori reset */
}
/* Egy elemen belül minden gyerek */
.container * {
font-family: Arial, sans-serif;
}Alap szelektorok összefoglalása
| Szelektor | Szintaxis | Mit választ ki? | Példa |
|---|---|---|---|
| Elem | elem |
Összes ilyen típusú elem | p { } |
| Osztály | .osztaly |
Elemek ezzel az osztállyal | .kartya { } |
| ID | #azonosito |
Egyetlen elem ezzel az ID-val | #header { } |
| Univerzális | * |
Minden elem | * { } |
Kombinált szelektorok VEGYES
A kombinált szelektorok több szelektort kapcsolnak össze, hogy pontosabban célozzunk meg elemeket.
1. Leszármazott szelektor (szóköz) EMELT SZINT
A szóközzel elválasztott szelektorok bármely mélységű leszármazottat kiválasztják.
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>Leszármazott szelektor</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="doboz">
<p>Közvetlen gyerek bekezdés</p>
<div>
<p>Beágyazott bekezdés (unoka)</p>
<div>
<p>Mélyebben beágyazott (dédunoka)</p>
</div>
</div>
</div>
<p>Kívüli bekezdés (nem leszármazott)</p>
</body>
</html>/* Leszármazott szelektor: szóközzel */
/* A .doboz-on belül MINDEN p elem (bármely mélységben) */
.doboz p {
background-color: #e3f2fd;
padding: 10px;
margin: 5px 0;
border-left: 4px solid #2196f3;
}Élő példa - Leszármazott szelektor (.doboz p):
Közvetlen gyerek bekezdés ✓
Beágyazott bekezdés (unoka) ✓
Mélyebben beágyazott (dédunoka) ✓
Kívüli bekezdés (nem leszármazott) ✗
A .doboz p minden bekezdést kiválaszt a .doboz-on belül, bármilyen mélyen legyen is.
2. Gyerek szelektor (>) BÓNUSZ
A > jel csak a közvetlen gyerekeket választja ki, a mélyebb leszármazottakat nem.
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>Gyerek szelektor</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="doboz">
<p>Közvetlen gyerek bekezdés</p>
<div>
<p>Beágyazott bekezdés (unoka)</p>
</div>
<p>Másik közvetlen gyerek</p>
</div>
</body>
</html>/* Gyerek szelektor: > jellel */
/* CSAK a .doboz közvetlen gyerek p elemei */
.doboz > p {
background-color: #e8f5e9;
padding: 10px;
margin: 5px 0;
border-left: 4px solid #4caf50;
}Élő példa - Gyerek szelektor (.doboz > p):
Közvetlen gyerek bekezdés ✓
Beágyazott bekezdés (unoka) ✗
Másik közvetlen gyerek ✓
A .doboz > p csak a közvetlen gyerekeket választja ki, az unokákat nem!
3. Szomszédos testvér szelektor (+) BÓNUSZ
A + jel a közvetlenül utána következő testvér elemet választja ki.
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>Szomszédos testvér szelektor</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Cím</h2>
<p>Első bekezdés (közvetlenül a h2 után)</p>
<p>Második bekezdés</p>
<p>Harmadik bekezdés</p>
</body>
</html>/* Szomszédos testvér szelektor: + jellel */
/* CSAK a h2 után KÖZVETLENÜL következő p elem */
h2 + p {
background-color: #fff3e0;
padding: 10px;
border-left: 4px solid #ff9800;
font-size: 1.1em;
}Élő példa - Szomszédos testvér szelektor (h2 + p):
Cím
Első bekezdés (közvetlenül a h2 után) ✓
Második bekezdés ✗
Harmadik bekezdés ✗
A h2 + p csak az első, közvetlenül utána következő testvér bekezdést választja ki.
4. Általános testvér szelektor (~) BÓNUSZ
A ~ jel az összes utána következő testvért kiválasztja (nem csak a közvetlent).
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>Általános testvér szelektor</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Bekezdés a h2 előtt</p>
<h2>Cím</h2>
<p>Első bekezdés</p>
<p>Második bekezdés</p>
<div>Egy div elem</div>
<p>Harmadik bekezdés</p>
</body>
</html>/* Általános testvér szelektor: ~ jellel */
/* MINDEN p elem, ami a h2 UTÁN következik testvérként */
h2 ~ p {
background-color: #f3e5f5;
padding: 10px;
margin: 5px 0;
border-left: 4px solid #9c27b0;
}Élő példa - Általános testvér szelektor (h2 ~ p):
Bekezdés a h2 előtt ✗
Cím
Első bekezdés ✓
Második bekezdés ✓
Harmadik bekezdés ✓
A h2 ~ p az összes testvér bekezdést kiválasztja, ami a h2 után jön - akkor is, ha van közöttük más elem (pl. div).
Kombinált szelektorok összefoglalása
| Szelektor | Szintaxis | Mit választ ki? |
|---|---|---|
| Leszármazott | A B |
Minden B, ami A-n belül van (bármely mélységben) |
| Gyerek | A > B |
Csak közvetlen gyerek B elemek |
| Szomszéd testvér | A + B |
A közvetlenül utáni B testvér |
| Általános testvér | A ~ B |
Minden B testvér, ami A után jön |
Pszeudo-osztályok BÓNUSZ
A pszeudo-osztályok az elemek különleges állapotait vagy pozícióját célozzák meg. Kettősponttal (:) kezdődnek.
Interakciós pszeudo-osztályok
Az interakciós pszeudo-osztályok a felhasználói műveletek alapján változtatják az elemek megjelenését.
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>Interakciós pszeudo-osztályok</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#">Ez egy link</a>
<button class="gomb">Kattints rám!</button>
<input type="text" placeholder="Kattints ide...">
</body>
</html>/* :hover - Egér rámutat az elemre */
.gomb:hover {
background-color: #45a049;
transform: translateY(-2px);
}
/* :active - Elem aktív (kattintás pillanata) */
.gomb:active {
background-color: #1b5e20;
transform: scale(0.95);
}
/* :focus - Elem fókuszban van (Tab vagy kattintás) */
input:focus {
outline: none;
border-color: #007bff;
background-color: #f0f7ff;
box-shadow: 0 0 0 4px rgba(0,123,255,0.4);
}Élő példa - Interakciós pszeudo-osztályok:
Próbáld ki: Húzd fölé az egeret, kattints, vagy használd a Tab billentyűt!
A :hover egér rámutatáskor, a :focus fókuszáláskor, az :active kattintáskor aktiválódik.
Pozíció alapú pszeudo-osztályok
A pozíció pszeudo-osztályok az elemek sorrendje alapján választanak ki elemeket.
:first-child, :last-child és :nth-child(n)
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>Pozíció pszeudo-osztályok</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="lista">
<li>Első elem</li>
<li>Második elem</li>
<li>Harmadik elem</li>
<li>Negyedik elem</li>
<li>Ötödik elem</li>
</ul>
</body>
</html>/* :first-child - Első gyerek */
.lista li:first-child {
background-color: #e3f2fd;
font-weight: bold;
}
/* :last-child - Utolsó gyerek */
.lista li:last-child {
background-color: #fce4ec;
font-weight: bold;
}
/* :nth-child(n) - N-edik gyerek */
.lista li:nth-child(3) {
background-color: #ff9800;
color: white;
}Élő példa - :first-child, :last-child, :nth-child(3):
- Első elem (:first-child) - kék háttér ✓
- Második elem
- Harmadik elem (:nth-child(3)) - narancs háttér ✓
- Negyedik elem
- Ötödik elem (:last-child) - rózsaszín háttér ✓
A :first-child és :last-child az első/utolsó elemet célozza, a :nth-child(3) pedig pontosan a 3. elemet.
:nth-child(odd) és :nth-child(even) - Zebra minta
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>Zebra minta</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="lista">
<li>Első elem</li>
<li>Második elem</li>
<li>Harmadik elem</li>
<li>Negyedik elem</li>
<li>Ötödik elem</li>
</ul>
</body>
</html>/* :nth-child(odd) - Páratlan elemek (1, 3, 5...) */
.lista li:nth-child(odd) {
background-color: #f5f5f5;
border-left: 4px solid #2196f3;
}
/* :nth-child(even) - Páros elemek (2, 4, 6...) */
.lista li:nth-child(even) {
background-color: #fff;
border-left: 4px solid #4caf50;
}Élő példa - Zebra minta:
- 1. Páratlan (:nth-child(odd)) - kék csík ✓
- 2. Páros (:nth-child(even)) - zöld csík ✓
- 3. Páratlan (:nth-child(odd)) - kék csík ✓
- 4. Páros (:nth-child(even)) - zöld csík ✓
- 5. Páratlan (:nth-child(odd)) - kék csík ✓
A zebra minta táblázatoknál és listáknál javítja az olvashatóságot.
nth-child() képletek
:nth-child(3)- Pontosan a 3. elem:nth-child(odd)- Páratlan elemek (1, 3, 5...):nth-child(even)- Páros elemek (2, 4, 6...):nth-child(3n)- Minden 3. elem (3, 6, 9...):nth-child(3n+1)- Minden 3.-tól 1-gyel eltolva (1, 4, 7...):nth-child(-n+3)- Első 3 elem
Űrlap pszeudo-osztályok
Az űrlap pszeudo-osztályok a beviteli mezők állapotát célozzák meg.
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>Űrlap pszeudo-osztályok</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form>
<input type="text" placeholder="Opcionális mező">
<input type="email" placeholder="Email (kötelező)" required>
<input type="text" value="Letiltott mező" disabled>
<input type="checkbox" id="cb1">
<label for="cb1">Jelölj be!</label>
</form>
</body>
</html>/* :required - Kötelező mező */
input:required {
border-left: 4px solid #ff5500;
}
/* :optional - Opcionális mező */
input:optional {
border-left: 4px solid #ccc;
}
/* :disabled - Letiltott mező */
input:disabled {
background: #e0e0e0;
cursor: not-allowed;
}
/* :valid - Érvényes érték */
input:valid {
border-color: #28a745;
}
/* :invalid - Érvénytelen érték */
input:invalid {
border-color: #dc3545;
}
/* :checked - Bejelölt checkbox */
input[type="checkbox"]:checked + label {
color: #007bff;
font-weight: bold;
}Élő példa - Űrlap pszeudo-osztályok:
Próbáld ki: írj be egy érvényes email címet (pl. pelda@email.hu) a :valid/:invalid állapotok megtekintéséhez!
Kaszkád és specificitás BÓNUSZ
A "Cascading" (lépcsőzetes) a CSS nevében arra utal, hogy a stílusok egymásra épülnek. Ha több szabály vonatkozik ugyanarra az elemre, a böngésző a specificitás és a sorrend alapján dönti el, melyik érvényesül.
Specificitás számítása - Pontrendszer
A specificitás megmutatja, mennyire "erős" egy CSS szabály. Képzeld el úgy, mint egy pontversenyt: amelyik szelektor több pontot ér, az nyer!
A pontrendszer egyszerűen
Számold össze, hány darab van a szelektorodban az alábbi típusokból:
| Inline stílus | 1000 pont |
| #ID szelektor | 100 pont |
| .osztály, :pszeudo-osztály | 10 pont |
| elem (p, div, h1...) | 1 pont |
A magasabb pontszám nyer! Ha két szabály ugyanarra az elemre vonatkozik, a több pontot érő érvényesül.
Példák a pontszámításra
| Szelektor | Számítás | Összesen |
|---|---|---|
p |
1 elem = 1 pont | 1 pont |
.kiemelt |
1 osztály = 10 pont | 10 pont |
p.kiemelt |
1 elem + 1 osztály = 1 + 10 | 11 pont |
#fejlec |
1 ID = 100 pont | 100 pont |
#fejlec .menu a |
1 ID + 1 osztály + 1 elem = 100 + 10 + 1 | 111 pont |
div p.kiemelt:hover |
2 elem + 1 osztály + 1 pszeudo = 2 + 10 + 10 | 22 pont |
style="..." |
inline stílus = 1000 pont | 1000 pont |
Élő példa - Melyik szín nyer?
Ha mindhárom szabály ugyanarra a bekezdésre vonatkozik:
Eredmény:
PIROS NYER! (100 pont > 10 pont > 1 pont)
Fontos szabályok
- * (univerzális) szelektor = 0 pont (a leggyengébb)
- !important = mindent felülír (de KERÜLD! Az érettségi vizsgán NEM használható, és nehezen módosítható kódot eredményez!)
- Ha azonos a pontszám → a később írt szabály nyer (kaszkád elv)
Kaszkád sorrend
/* Ha azonos specificitás, a sorrend dönt */
p { color: red; } /* Ez definiálódik először */
p { color: blue; } /* Ez később, tehát EZ érvényesül */
/* A sorrend a fájlok belinkelésénél is számít */
/* style.css: p { color: red; } */
/* theme.css: p { color: blue; } - Ez érvényesül, ha később van belinkelve */
<!-- HTML -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="theme.css"> <!-- Ez nyer azonos specificitásnál -->Gyakorlati példa: Navigáció stílusozása EMELT SZINT
Nézzük meg, hogyan alkalmazzuk az eddig tanultakat egy valós navigációs menü stílusozásához:
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>Navigáció példa</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="fonavigacio">
<ul>
<li><a href="index.html" class="aktiv">Főoldal</a></li>
<li><a href="termekek.html">Termékek</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="kapcsolat.html">Kapcsolat</a></li>
</ul>
</nav>
</body>
</html>/* Navigáció alap stílus */
.fonavigacio {
background-color: #e9ecef;
padding: 0 20px;
border-radius: 4px;
}
/* Lista stílus reset */
.fonavigacio ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
/* Linkek alap stílusa */
.fonavigacio a {
display: block;
color: #333;
text-decoration: none;
padding: 15px 20px;
transition: all 0.3s ease;
}
/* Hover effekt */
.fonavigacio a:hover {
background-color: #dee2e6;
color: #000;
}
/* Aktív oldal kiemelése */
.fonavigacio a.aktiv {
background-color: #007bff;
color: white;
}
/* Linkekhez keret */
.fonavigacio a {
border: 2px solid #007bff;
border-left: none;
}
/* Első elem: bal keret + lekerekítés */
.fonavigacio li:first-child a {
border-left: 2px solid #007bff;
border-radius: 20px 0 0 20px;
}
/* Utolsó elem: jobb oldali lekerekítés */
.fonavigacio li:last-child a {
border-radius: 0 20px 20px 0;
}Élő példa - Navigáció:
Próbáld ki: Vidd az egeret a menüpontok fölé!
A navigáció használja: .fonavigacio (osztály szelektor), a:hover (hover pszeudo-osztály), .aktiv (osztály az aktuális oldalhoz), li:first-child és li:last-child (pozíció pszeudo-osztályok - ezekkel kerekítjük le az első elem bal és az utolsó elem jobb sarkait).
Összefoglalás
Ebben a cikkben megismerkedtél a CSS alapjaival:
- CSS szerepe: Weboldalak vizuális megjelenésének szabályozása
- Beágyazási módok: Inline, Internal, External (külső CSS ajánlott)
- Alap szelektorok: elem, .osztály, #id, * (univerzális)
- Kombinált szelektorok: leszármazott, gyerek (>), testvér (+, ~)
- Pszeudo-osztályok: :hover, :focus, :first-child, :nth-child()
- Specificitás: inline > ID > osztály > elem
Példák a weboldalunkon
Nézd meg, hogyan használjuk a CSS szelektorokat a gyakorlatban:
- Főoldal - Navigáció :hover effektjei
- Processzor oldal - Termékkártyák .class szelektorokkal
- Blog oldal - Cikklista :nth-child() zebra mintával
Következő lépések
Gyakorold a szelektorokat: nyisd meg a böngésző DevTools-át (F12), és kísérletezz különböző szelektorokkal. Próbáld ki a :hover és :nth-child() pszeudo-osztályokat!
Következő cikk: Színek és háttér - Ismerd meg a színformátumokat (HEX, RGB, HSL), a háttérképek beállítását és a gradiens háttereket!