Inserimento del codice CSS e precedenza

Inserimento del codice CSS e precedenza

Di inCSS

Inserimento del fogli di stile

Possiamo caricare un foglio di stile esterno nel tag head in un documento due modi: utilizzando il tag link o la direttiva @import.
<link href="stile.css" rel="stylesheet" type="text/css">
oppure

<style>
@import url(stile.css)
</style>

Possiamo incorporare i fogli direttamente nella pagina HTML racchiudendo il codice CSS tra i tag <style>:

<style type="text/css">
body {background: white;}
p {color: black;}
[...]
</style>
ovviamente tutto all’interno del tag <head>

Altro modo è quello di inserire lo style inline, cioè direttamente nel tag da modificare, utilizzando l’attributo style.

<span style=”color: red”>Questo testo è rosso</span>

Priorità dei fogli di stile

Ovviamente in una pagina HTML possono presentarsi più stili contemporaneamente per ogni tag.

Quindi chi dirà al nostro paragrafo di quale colore sarà il testo al suo interno?

Facciamo qualche esempio.

Spulciando nel file default.css ho trovato stile abbinato alla class comment-date:

.comment-detail-title { color: #0f0f16; }

quindi creiamo un paragrafo con questa classe e vediamo:

<span class="comment-detail-title">cosa succede con questa classe? </span>
cosa succede con questa classe? (è solamente un po’ più scura, vero?)

adesso inserisco questo CSS nel file personalizzato del blog e cambio il colore a blu:
.comment-detail-title-test { color: blue; }

nel prossimo inseriamo entrambe le classi
<span class="comment-detail-title comment-detail-title-test">di che colore sono?</span>
di che colore sono?

e nel prossimo inseriamo uno style in-line e chiediamo di cambiare il colore in verde:
<span class="comment-detail-title comment-detail-title-test" style="color: green;">di che colore sono adesso?</span>
di che colore sono adesso?

Quindi più il codice CSS è “vicino” al tag più avrà importanza:
il CSS in file esterno sarà sovrascritto dal CSS scritto nell’head della pagina che sarà sovrascritto dallo stile in-line del tag.

La direttiva !important può modificare questa serie e fissare un attributo, in questo caso il colore, per tutti gli elementi con quella classe specifica.
Infatti, se avessimo forzato nel nostro CSS aggiuntivo (quello della pagina) il colore blu come importante, gli ultimi due sarebbero stati blu:
.comment-detail-title-test { color: blue !important; }

Filippo