|
Conflitti tra stili
Quando si applicano due o più stili CSS allo stesso testo, si può verificare un conflitto di stili con risultati inaspettati. I browser applicano gli attributi di stile in base alle successivi regole:
 |
Se due stili sono applicati allo stesso testo, il browser visualizza tutti gli attributi di entrambi gli stili, a meno che non siano in conflitto tra loro. Ad esempio, uno stile può specificare il blu come colore del testo e l'altro stile il rosso. |
 |
Se gli attributi di due stili applicati allo stesso testo sono in conflitto, il browser visualizza l'attributo dello stile più interno (quello più vicino al testo stesso). |
 |
In caso di conflitto diretto, gli attributi degli stili CSS (quelli applicati con l'attributo class ) hanno la precedenza sugli stili dei tag HTML. |
Nell'esempio che segue, lo stile definito per h1 potrebbe specificare il tipo di carattere, la dimensione e il colore per tutti i paragrafi h1 , ma lo stile CSS personalizzato .Blu applicato al paragrafo ha la precedenza sull'impostazione del colore dello stile H1 . Il secondo stile CSS personalizzato .Rosso ha a sua volta la precedenza su .Blu perché si trova all'interno dello stile .Blu .
<h1><span class="Blu">Questo paragrafo è controllato dallo stile personalizzato .Blu e dallo stile
di tag HTML h1.<span class="Rosso">Eccetto questa frase che è controllata dallo stile .Rosso.</span>
Qui è applicato nuovamente lo stile .Blu.</span></h1>
|