28/01/2012
Ereditarietà, cascade e conflitti tra stili
Se alcune proprietà sono state sono state definite per lo stesso selettore da diversi fogli di stile, il valore sarà ereditato dal foglio di stile più specifico.
Per esempio un foglio di stile esterno definisce lo stile seguente per un selettore h1:
h1
{
color: red;
text-align: left;
font-size: 8px;
}
Al tempo stesso un foglio di stile interno definisce queste proprietà per lo stesso selettore:
h1
{
text-align: right;
font-size: 20px;
}
Nel caso in cui la pagina con il foglio di stile interno risulti anche collegata al foglio di stile esterno, le proprietà per il selettore h1 saranno:
color: red;
text-align: right;
font-size: 20px;
Il colore viene ereditato dal foglio di stile esterno mentre per l’allineamento del testo e la dimensione del font vengono utilizzati i valori contenuti nel foglio di stile incorporato.
Riassumendo uno stile può essere specificato:
- All’interno di un elemento HTML
- All’interno della sezione <head> di una pagina HTML
- In un file CSS esterno
All’interno di un document HTML possono essere importati più folgi di stile esterni.
Quale sarà, dunque, lo stile applicato ad un elemento HTML nel caso in cui per lo stesso sia stato specificato più di uno stile?
In generale possiamo dire che tutti gli stili vengono “unificati” in un nuovo foglio di stile “virtuale” rispettando la seguente gerarchia:
- Stile in linea
- Foglio di stile esterno
- Foglio di stile interno
- Foglio di stile di default del browser
Nota: Se il link al foglio di stile esterno è posizionato dopo il foglio di stile interno nella sezione <head>, il foglio esterno sovrascriverà quello interno. Quindi fate attenzione!
Commenti (0) | | | 
Stampa
I commenti sono chiusi