CSS referencia => Rangsor

CSS, 3. fejezet - Rangsor

  1. Rangsor
    1. 'important'
    2. A rangsor felállítása

Ebben a fejezetben a terminológia egy új elemét kell bevezetnünk: a "súlyt". A stíluslap-szabályok súlya jelzi, hogy az adott szabály milyen prioritást élvez. Természetszerűen a nagyobb súlyú szabály erősebben érvényesül, mint az alacsonyabb súllyal rendelkező.

CSS használatával egyidejűleg egynél több stíluslap is befolyásolhatja a HTML oldal megjelenését. E tulajdonságnak két fő oka van: a modularitás és a szerző (tervező) / olvasó - egyensúly.

  • Modularitás
    A stíluslap tervezője a redundancia csökkentése érdekében több stíluslaprész használatát kombinálhatja:

    @import url("http://www.style.org/egyik");
    @import url("http://www.style.org/masik");

    H1 {color: red} /* Felülbírálja az importált stílust */

  • Szerző / olvasó egyensúly:
    Stíluslappal a szerző és az olvasó is befolyásolhatja a dokumentum megjelenését. Ehhez mindkettejüknek ugyanazt a stílusnyelvet kell használniuk, így tükrözve a web egyik alapvető tulajdonságát: mindenki közzéteheti elképzelését. A böngészők a saját stíluslapokra hivatkozás kiválasztását szabadon lehetővé teszik.

Néha ellentét merül fel a dokumentum megjelenését meghatározó stíluslapok között. Az ellentét feloldását a stílusszabályok súlyozása teszi lehetővé. Alapértelmezésben az olvasó által felállított stílusszabályok súlya kisebb, mint a dokumentum szerzője által felállítottaké. Tehát, ha ellentét merül fel egy dokumentum szerzői és olvasói stíluslapja között, a szerzői stíluslap kerül alkalmazásra. Mind a szerzői, mind az olvasói stíluslap-szabályok felülbírálják a böngésző alapértelmezett beállításait.

Az importált stíluslapok szintén jól meghatározott rangsorban állnak egymással. A rangsor az alább meghatározott szabályok szerint dől el. Bármely szabály, amely a stíluslapban van leírva, erősebb, mint az importált stíluslap(ok)ban levő(k). Tehát, az importált stíluslapokban leírt szabályok súlya kisebb a stílusok rangsorában, mint a stíluslapban magában leírt szabályoké. Az importált stíluslapok maguk is rekurzívan importálhatnak és ezáltal felülbírálhatnak más stíluslapokat.

A CSS minden @import utasításának a stíluslap legelején kell megjelennie, megelőzve minden más deklarációt. Ez megkönnyíti annak átláthatóságát, hogy melyik stíluslap melyik másikat bírálja felül.

Vissza a hivatkozó oldalra

3.1 'important'

A stíluslapok tervezői deklarációik súlyát megnövelhetik:

H1 {color: black ! important; background: white ! important }

P {font-size: 12pt ! important; font-style: italic }

Ebben a példában az első három deklaráció súlya a fontos! kiemeléssel meg van növelve, míg az utolsó deklaráció súlya normál.

Egy olvasó által felállított fontos szabály prioritásban megelőzi a szerző normál súlyú szabályát. A szerző által felállított fontos szabály prioritásban megelőzi az olvasó által felállított fontos szabályt.

Ebben a példában a lap háttérszínét beállítottuk szürkére, és a H1-re vonatkozóan két (részben ellentmondó) utasítást adtunk. (legyen fekete, majd legyen kék) Normális esetben a később szereplő utasítás felülbírálná az előzőt, de most az ! important szabály érvényesül. Ha kitöröljük az első definícióból kitöröljük az important szabályt, akkor a Címsor kék színű lesz. 

Vissza a hivatkozó oldalra

3.2 A rangsor felállítása

A deklaráció-rangsor felállításának szabályai lényegesek a CSS működésében. Egy elem/tulajdonság páros értékének meghatározásához az alábbi algoritmust kell követni:

  1. A kérdéses elem/tulajdonság párosra alkalmazott összes deklaráció előkeresése. A deklaráció akkor 'alkalmazott', ha a kérdéses elem szelektorként szerepel. Ha nincs az elemhez alkalmazott deklaráció, az öröklés szabályai érvényesülnek. Ha nincs örökölt érték (pl.: a HTML elem esetében), a kezdeti értékek lesznek irányadóak.
  2. A deklarációk explicit súlya szerinti rendezés: az !important jelölésű deklarációk erősebbek, mint a jelöletlen (normál) deklarációk.
  3. Eredet szerinti rendezés: A szerző stíluslapjában meghatározott szabályok mint az olvasó által meghatározottak; mindkettő erősebb a böngésző alapértelmezett beállításainál. Az importált stíluslapok eredete megegyezik annak a stíluslapnak az eredetével, ahonnan importálták.
  4. Szelektor egyedisége szerinti rendezés: Az egyedileg meghatározott szelektororhoz tartozó szabály erősebb, mint az általános meghatározásban leírtak. Az egyediség megállapításához meg kell állapítani a szelektorban található ID attribútumokat (a), a CLASS attribútumokat (b), és a tag-nevek számát (c). A három szám 'összeláncolásával' (concatenating) állapítható meg az adott szelektor egyedisége. A könnyebb megértés kedvéért néhány példa: 

    	
LI              {...}  /*  a=0  b=0  c=1   =>  egyediség =   1 */
UL LI           {...}  /*  a=0  b=0  c=2   =>  egyediség =   2 */
OL UL LI        {...}  /*  a=0  b=0  c=3   =>  egyediség =   3 */
LI.red          {...}  /*  a=0  b=1  c=1   =>  egyediség =  11 */
OL UL LI.red    {...}  /*  a=0  b=1  c=3   =>  egyediség =  13 */
#x34y           {...}  /*  a=1  b=0  c=0   =>  egyediség = 100 */

    A látszólagos elemeket és látszólagos osztályokat a számítás során normál elemekként, osztályokként kell figyelembe venni.
  5. Rendezés a meghatározás sorrendje szerint: Ha két szabály ugyanakkora súllyal bír, a később meghatározott győz. Az importált stíluslapban leírt szabályok a saját lapban írtak után lesznek csak figyelembe véve.

A tulajdonság-értékek keresése megszakítható, ha az egyik kiértékelt szabály súlya egy elem/tulajdonság vonatkozásban egyértelműen nagyobb bármely más szabályénál.

Egy elem STYLE attribútumában történő deklarációnak ugyanolyan súlya van, mint egy - a stíluslap végén meghatározott - ID alapú szelektornak.

A fenti példában a P elem színe vörös (red) lesz. Bár mindkét deklarációs forma egyedisége megegyezik, mégis - a rangsor-meghatározás 5. pontjában írt szabály alkalmazása miatt - a STYLE attribútumban levő deklaráció erősebb lesz a STYLE elem által tartalmazott deklarációnál.

előző  tetejére  következő