5.03 Öröklődés - precedencia

HTML oldal TAG-ek leírása gráffal

A HTML oldalakban lévő információ egy fa jellegű gráffal írható le, amelyben minden egyes TAG a gráfnak egy csomópontja. A fa gyökere a HTML oldal esetén a HTML TAG, és a többi TAG ennek a közvetlen vagy közvetett leszármazottja. Valahogy így:

Szülő-gyerek viszony

Az informatikában gyakran előforduló fogalom a szülő-gyerek viszony. Amikor egy fogalom, egy TAG, egy objektum a tulajdonságainak egy részét egy másik objektumtól örökli, akkor a két objektum között szülő-gyerek kapcsolat áll fent. Aki a tulajdonságait átadja az a szülő és aki örökli a tulajdonságot, az a gyerek, másnéven leszármazott.A gyerek gyereke is leszármazott. A sor folytatható a végtelenségig. Ilyen módon egy HTML oldalnak minden TAG az oldalon végső soron a leszármazottja.

Öröklődés

A tulajdonságok öröklése angolul: inherit

Egy weboldalon a leszármazott TAG-ek öröklk a szülők tulajdonságait, más néven minden leszármazott TAG rendelkezik azokkal a tulajdonságokkal, amelyek rá értelmezhetők és a szülei, nagyszülei, dédszület, stb... rendelkeznek vele.

Például ha egy HTMl oldalon a betű méretét minden TAG-ben 16px méretűn akarjuk használni, akkor a HTML tagben a font-size tulajdonságot 16px-re álltva minden TAG-neg a betű mérete ez lesz. Jó ez így? Elvileg igen, de mivel a HTMl oldal látható része a BODY TAG és annak leszármazottjai, ezért elég a BODY tag-et ellátni ezzel a tulajdonsággal, valahogy így:

BODY {
  font-size: 16px;
}

Ha a fenti példában egy <li> tagnek a betűméretét szeretnénk megtudni, akkor biztosak lehetünk, hogy a betűméret 16px lesz, ha más stíluselem ezt az oldalon nem írja át.

Megjegyzések

  • Nem minden tulajdonság öröklődik automatikusan a szülőktől. Ilyen például egy keret (border) tulajdonsága. Ennek nem is lenne értelme egyébként sem.
  • Az öröklődés során vannak számított értékek. Pl. font-size: 1.2em. Ez a tulajdonság az öröklődésnél kiszámításra kerül. Ha egy beágyazott TAG-ben a font-size: 2em értéket használjuk, akkor a leszármazott leszármazottja végül az eredeti mérethez képest 1.2*2 = 2.4em lesz!!!
  • Ha egy tulajdonság nem öröklődik automatikusan, de mi mégis automatikus öröklést akarunk, akkor használhatjuk az inherit kulcsszót.

A <div> TAG eredetileg egy blokk típusú konténer, azaz egy téglalapot határoz meg a böngésző ablakában. Az alábbi kis HTML részletben a szülő konténer (<div>)  display tulajdonságát inline-ra állítottuk, azaz már nem téglalap. A belső <div> nem örökli automatikusan a display: inline tulajdonságot, hanem vagy beállítjuk vagy használjuk a stíluslapban a display:inherit értéket.

Itt látható A html kódrészlet

<div class="szulo">Ez a szülő konténer
  <div class="gyerek">
    Ez a gyerek konténer
  </div>
</div>

Itt látható a CSS kódrészlet:

.szulo {
  display: inline;
}

.gyerek{
  display: inherit;
}

Initial érték - kezdőérték

Minden tulajdonságnak van kezdőrétéke, amely szabványos, illetve kissé függ a böngészőtől magától, mert a böngészők nem teljesen egyformán kezelik a stíluselemeket. Ez a tulajdonság a böngésző definíciós táblájában van elrejtve. Ha vissza akarjuk állítani valamely TAG-nek az eredeti értékét, akkor az initial kulcsszót kell használnunk:

div {
 min-width: initial;
}

Precedencia

A selectoroknál tárgyaltuk, hogy inline módon, class vagy id selectorral is kiválaszthatunk TAG-et, aminek a tulajdonságait több helyen is, akár egymásnak ellentmondóan is állíthtjuk. Mi lesz a több féle beállítás eredménye?

A későbbi eset felülírja a korábbit.

  1. A böngésző beállításait
  2. Felhasználó saját beállításai a böngészőben
  3. Külső stíluslap billesztve az oldalra
  4. Az oldalra beágyazott stílusdefiníció
  5. A szövegben inline módon megadott érték

Ezen kívül az eredményt még befolyásolja, hogy

  1. Ha több külső stíluslap van, akkor a később beillesztett lesz érvényes.
  2. A CSS-ben később definiált tulajdonság felülírja a korábban definiált értéket.
  3. Ha egy tulajdonságot !important jelzéssel látunk el, akkor az mindent felülír. pl.

!Important - a legfontosabb

p {
  color: black !important;
}
...
p{
  color: red;
}

A fenti példában hiába állították be később a <p> tag szövegének színét pirosra, de a korábban !important kulcsszóval beállított fekete szín a legfontosabb.