CSS/Unità di misura, ereditarietà e box model: differenze tra le versioni

Contenuto cancellato Contenuto aggiunto
Ramac (discussione | contributi)
spostamento unità di misura
Ramac (discussione | contributi)
→‎Ereditarietà: inherit + box model
Riga 63:
 
==Ereditarietà==
AvvieneNei fogli di stile l'ereditarietà, come suggerisce la parola, si verifica quando, noidefinito uno stile per un oggettoelemento definiamo una proprietàHTML, a tutti i suoi elemtentielementi discendentifigli ereditarieranno(cioè quellacontenuti anche indirettamente in esso) verrà applicato lo stesso stile (si dice che la proprietà viene ''ereditata''). Non tutte le proprietà sono ereditabili.
 
Per esempio, se all'elemento <code>&lt;body&gt;</code> applichiamo un colore rosso tramite la proprietàdichiarazione <code>color: red</code>, tutti i suoi elementi discendenti (quindi tutti gli elementi della pagina) erediteranno questa proprietà, a meno chè non vienevenga decisaimpostato diversamente ''inline'' dall'dal singolo elemento stessotramite l'attributo <code>style</code>, che ha una maggiore specificità.
 
Per forzare l'ereditarietà di una proprietà per una particolare dichiarazione, è possibile usare il valore speciale '''inherit''' (eredita), che è un valore valido per qualsiasi proprietà.
 
== Il box model ==
Per box model si intende l'insieme delle regole per la definizione degli stile degli elementi blocco. Ogni box comprende alcuni elementi di base:
*un'area del contenuto vero e proprio (il testo, un'immagine, ecc...), di cui è possibile definire l'altezza e la larghezza ('''width''' e '''height''')
*un '''padding''', ossia uno spazio vuoto tra il contenuto e il bordo dell'elemento
*un bordo ('''border'''), del quale è possibile impostare colore, stile e spessore
*un margine ('''margin''') che identifica uno spazio intercorrente tra l'elemento e gli altri elementi presenti nella pagina. Nel caso di due box con margini allineati in verticale, la loro distanza sarà data dalla somma dei due margini. Se sono allineati orizzontalmente, intervegono le regole del ''margin collapsing'' e la distanza effettiva tra i due elementi sarà pari al valore del margine maggiore.
 
Per esempio, se all'elemento <body> applichiamo la proprietà <code>color:red</code>, tutti i suoi elementi discendenti della pagina erediteranno questa proprietà, a meno chè non viene decisa ''inline'' dall'elemento stesso.
 
[[Categoria:Linguaggio CSS|Unità di misura, ereditarietà e box model]]