css3-inheritance-thumbnail

Ehi gente del web in questo tutorial parliamo di inheritance, l’eredità, grazie all’inheritance gli elementi posso appunto ereditare alcuni stili dagli elementi in cui sono racchiusi. 

Un esempio chiaro di inheritance lo abbiamo quando applichiamo il font-family al body, in questo modo tutta la pagina web avrà lo stesso carattere.

the Document Object Model tree
the Document Object Model tree

L’inheritance va dall’alto verso il basso e in termine tecnico viene passata da parent a child, da genitore a figlio, ovvero l’elemento genitore racchiude l’elemento figlio. Nell’immagine sopra possiamo vedere come funziona: ad esempio body è il parent di header e main, header è il parent di img e ul. Se applico uno stile che può essere ereditato al body, tutti gli elementi avranno lo stesso stile. Se invece lo applico all’elemento header solo i discendenti di header avranno questo stile.

Non tutte le proprietà vengono ereditate, ma solo quelle che è utile che vengano ereditate altrimenti ci troveremo a scrivere codice ripetutamente per applicare lo stile di volta in volta.

Di seguito la lista delle principali proprietà che vengono ereditate:

  • border-collapse
  • border-spacing
  • caption-side
  • color
  • cursor
  • direction
  • empty-cells
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • font-size-adjust
  • font-stretch
  • font
  • letter-spacing
  • line-height
  • list-style-image
  • list-style-position
  • list-style-type
  • list-style
  • orphans
  • quotes
  • tab-size
  • text-align
  • text-align-last
  • text-decoration-color
  • text-indent
  • text-justify
  • text-shadow
  • text-transform
  • visibility
  • white-space
  • widows
  • word-break
  • word-spacing
  • word-wrap
body {
  font-family: arial; /*valore che viene ereditato */
}
main {
  line-height: 1.5; /*valore che viene ereditato */
  border: 1px solid red; /*valore che non viene ereditato */
}

Valori Speciali

Abbiamo anche due valori speciali collegati all’inheritance che ci aiutano a modificare le pagine web , questi sono inherit ed initial.

Inherit

Quando le proprietà non vengono ereditate ma noi vogliamo che vengano ereditate si usa il valore inherit, così la proprietà passa da parant a child.

h1 {
  border: inherit;
}

Initial

Initial invece lavora nel senso opposto di inherith, quando vogliamo che un elemento child non erediti lo stile dal parent usiamo initial. In poche parole elemina lo stile ereditato e la fa tornare allo stato originale.

p {
  font-family: initial;
}

L’inheritance è stata studiata e creata dai programmatori di CSS per facilitarci a costruire le pagine web, alcuni stili sono intenzionalmente ereditati ed altri no, giusto appunto per farci scrivere meno codice e mantenere il tutto pulito ed in ordine.


Guarda il video:

Articoli simili