Ebben a leckében megismerkedünk a kiértékelési sorrenddel, a különböző rangsorolási szempontokkal és ezek egymásra hatásával.
A CSS szabvány egy fő elve a lépcsőzetesség, vagyis az oldalak megjelenését egyszerre több stíluslappal (pl. lapon belüli definíciók, külső stílusállományok) is beállíthatjuk, módosíthatjuk. Ezekben akár egymásnak ellentmondó definíciókat is megadhatunk, ezért nagyon fontos, hogy legyen egy olyan kiértékelési sorrend, amely alapján eldől, hogy melyik definíció jut érvényre.
De ugyanezen mechanizmus alapján dől el az is, hogy az elemek őseire megadott tulajdonságok megjelennek-e (öröklődnek-e) az adott elemre vonatkozóan, vagy sem.
Ahhoz azonban, hogy hatékony kódot írjunk (vagy esetleg megértsük, hogy miért nem az történik, mint amit elterveztünk), a CSS kiértékelési sorrenddel is meg kell ismerkednünk.
Nézzük az alábbi példát!
<!DOCTYPE html>
<html lang="hu">
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
div.szegely h1 {color:green;}
h1 {color:blue;}
</style>
</head>
<body>
<div class="szegely">
<h1 style="color:red;">Címsor</h1>
</div>
</body>
</html>
A kérdés: Milyen színnel fog megjelenni a címsor?
Láthatjuk, hogy akár zöld, akár kék, illetve piros színnel is megjelenhetne, attól függően, hogy a szabályok közül melyiket tekinti érvényesnek az értelmező.
Ebben a konkrét esetben a piros szín fog érvényre jutni, mert az in-line (beágyazott) stílusdefiníciónak nagyobb súlya van, mint a másik két definíciónak. Ha azonban a példánk nem tartalmazná ezt a beágyazott stílusmegadást, akkor viszont zöld színnel jelenne meg. Miért van ez? Ha a kiértékelési sorrendet megnézzük, minden világos lesz.
A kiértékelési sorrend – ami alapján a böngészők hozzárendelik a stílust a HTML-elemeinkhez – a következő:
Az egyéni stíluslap beállítás legtöbbször arra vezethető vissza, hogy az oldal készítője nem gondolt a gyengén látó felhasználókra, illetve más, IKT szempontból hátrányos helyzetű felhasználókra (pl. színtévesztő, színvak felhasználók). Egyéni stíluslappal korrigálni a weboldalak hátrányait nagyon nehézkes, ezért az oldal tervezésekor figyelembe kell venni, hogy az egyenlő esélyű hozzáférés megfelelően támogatott legyen!
Szelektor | Id attribútumok száma | Egyéb attribútumok száma (osztály, pszeudó osztály) | Elemek és pszeudó elemek száma | Egyediség |
|---|---|---|---|---|
* | 0 | 0 | 0 | 0 |
li { } | 0 | 0 | 1 | 1 |
li:first-letter {...} | 0 | 0 | 2 | 2 |
ol ul li {...} | 0 | 0 | 3 | 3 |
ol ul+li {...} | 0 | 0 | 3 | 3 |
li.red {...} | 0 | 1 | 1 | 11 |
li.red.level {...} | 0 | 2 | 1 | 21 |
#azon {...} | 1 | 0 | 0 | 100 |
A fentiek szemléltetéséhez nézzünk néhány példát!
Példa - Meghatározás sorrendje
A címsor zöld színű lesz, mivel két azonos prioritású szabályból a későbbi deklaráció jut érvényre.
Nézzük ugyanezt a példát úgy, hogy az !important attribútumot használjuk.
Példa - !important attribútum használata
A címsor kék színű lesz, mivel a korábban szereplő definíciónak nagyobb súlyt adtunk az !important attribútum használatával.
Nézzük ugyanezt a példát úgy, hogy in-line stílusmegadást is használunk.
Példa - !important attribútum és in-line megadás együttes használata
A címsor kék színű lesz, mivel a korábban szereplő definíciónak nagyobb súlyt adtunk az !important attribútum használatával.
Példa - Rangsor számítás egyediség szerint
Ebben a példában a címsor kék színű lesz, mert az egyedisége a div#pelda h1 szelektornak nagyobb, mint a h1 szelektornak.
  |
 |
 |
A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.