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íthatjuk. Mi lesz a több féle beállítás eredménye?
A későbbi eset felülírja a korábbit.
- A böngésző beállításait
- Felhasználó saját beállításai a böngészőben
- Külső stíluslap billesztve az oldalra
- Az oldalra beágyazott stílusdefiníció
- A szövegben inline módon megadott érték
Ezen kívül az eredményt még befolyásolja, hogy
- Ha több külső stíluslap van, akkor a később beillesztett lesz érvényes.
- A CSS-ben később definiált tulajdonság felülírja a korábban definiált értéket.
- 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.