Vissza az előzőleg látogatott oldalra (nem elérhető funkció)Vissza a tananyag kezdőlapjára (P)Ugrás a tananyag előző oldalára (E)Ugrás a tananyag következő oldalára (V)Fogalom megjelenítés (nem elérhető funkció)Fogalmak listája (nem elérhető funkció)Oldal nyomtatása (nem elérhető funkció)Oldaltérkép megtekintése (D)Keresés az oldalon (nem elérhető funkció)Súgó megtekintése (S)

A weblapkészítés technikája (HTML5, CSS3) és ergonómiája / CSS kiértékelési sorrend (rangsorolás)

Tanulási útmutató

Összefoglalás

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.

CSS kiértékelési sorrend (rangsorolás)

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!

Példa
Forráskód
 <!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ő.

Magyarázat

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ő:

Kapcsolódó ergonómiai elvek

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

Interaktív példa
Magyarázat

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

Interaktív példa
Magyarázat

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

Interaktív példa
Magyarázat

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

Interaktív példa
Magyarázat

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.

Vissza a tartalomjegyzékhez

Új Széchenyi terv
A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.

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.