CSS  »  Guide  »  Guida CSS di base 

Se c'è una lezione di questa guida che dovreste stampare e conservare in una cartellina è quella che state per leggere. Stiamo per entrare nel cuore del meccanismo di funzionamento dei CSS. Sono regole un pò complesse, ma basilari. Quindi attenzione massima. Gli esempi che accompagnano la parte teorica vi aiuteranno nel percorso di apprendimento: usateli sempre.

Ereditarietà

Il primo concetto è quello di ereditarietà. Secondo questo meccanismo le impostazioni stilistiche applicate ad un elemento ricadono anche sui suoi discendenti. Almeno fino a quando, per un elemento discendente, non si imposti esplicitamente un valore diverso per quella proprietà. L'esempio è al riguardo chiarificatore. Se impostiamo il colore rosso per il testo (color: red;) a livello dell'elemento BODY tutti gli altri elementi suoi discendenti erediteranno questa impostazione. Ma se ad un certo punto definiamo nel codice del CSS un selettore con la proprietà color: black; l'ereditarietà viene spezzata.

Non tutte le proprietà sono ereditate e lo renderemo esplicito nell'analisi di ciascuna di esse. In genere sono quelle attinenti la formattazione del box model: margini, bordi, padding, background le più importanti. Il motivo è semplice. Ereditare un bordo è semplicemente senza senso. Se ne imposto uno, diciamo, per un paragrafo sarebbe assurdo che un elemento <A> o un testo in grassetto vengano circondati dallo stesso bordo!

Fin qui tutto semplice. Ora scendiamo nei dettagli. L'ereditarietà non basta a spiegare le molteplici possibilità di relazione tra le regole di un CSS.

Peso e origine

Da qui in avanti affronteremo un'altra serie di concetti fondamentali tutti riconducibili comunque ad uno stesso ambito: i conflitti possibili tra gli stili e le regole. Tenteremo in pratica di rispondere a quesiti come questo. Se definisco queste regole in un CSS:

p {color: black;}
.testo {color: red;}

E in una pagina HTML scrivo questo codice:

<p class="testo">Testo del paragrafo</p>

Perchè il testo del paragrafo sarà rosso e non nero? Perchè il selettore classe prevale su quello semplice con elemento? Provare per credere: esempio.

Il primo concetto da imparare è quello di peso. Si riferisce alla maggiore o minore importanza da assegnare a ciascuna regola. Un primo criterio di importanza è dato dall'origine del foglio di stile. Quando visualizziamo una pagina (X)HTML possono entrare in gioco nel modificare lo stile degli elementi tre diversi fogli di stile:

• foglio dell'autore
• foglio dell'utente
• foglio predefinito del browser

In ordine di importanza avremo: foglio dell'autore, foglio dell'utente, foglio predefinito del browser.

Tutti i software di navigazione di ultima generazione consentono una gestione di questo aspetto. E' possibile, ad esempio, far sì che il browser ignori i CSS definiti dall'autore delle pagine e formattare queste ultime con un CSS realizzato dall'utente. E ancora, come vedremo, è possibile modificare questa gerarchia con l'uso della parola chiave !important. Di base, però, l'ordine è quello definito qui sopra.

Specificità

La specificità, come il nome può suggerire, descrive il peso relativo delle varie regole all'interno di un foglio di stile. Esistono regole ben precise per calcolarla e sono quelle che applica lo user agent di un browser quando si trova davanti ad un CSS.

I fattori del calcolo sono tre e ciascuno di essi rappresenta il valore di una tripletta. Per prima cosa si conta il numero di selettori ID presenti nella regola. Si passa quindi a verificare la presenza di classi e pseudo-classi. Infine si conta il numero di elementi definiti nella regola. Mai come in questo caso urge l'esempio. Prima regola:

#titolo {color: black;}

Calcolo: un ID, 0 classi, 0 elementi. tripletta dei valori: 1-0-0

.classe1 {background: #C00;}

0 ID, 1 classe, 0 elementi. tripletta: 0-1-0

h1 {color: red;}

0 ID, 0 classi, un elemento. tripletta: 0-0-1

Il peso specifico della prima regola è il maggiore. Quello dell'ultima il minore. In pratica: gli ID pesano più delle classi che pesano più dei singoli elementi. Non commettete l'errore di valutare il numero più grande a prescindere dalla sua posizione. Questa regola presenta la seguente specificità 1-0-0:

#paragrafo {color: green;}

ed è più importante di questa che ha i seguenti valori 0-0-2:

div p {color: red;}

Subito la prova. Se osservate il terzo esempio di questa pagina vedrete che il paragrafo sarà verde e non rosso.

Il concetto di cascade

Ed ora la summa di tutto quello cha abbiamo detto. Il concetto e il meccanismo di cascade spiegato con parole semplici. E che sia un elemento chiave lo capite dal nome stesso di quello che state studiando: Cascading Style Sheets. Tenteremo di ricostruire il procedimento di un browser quando incontra un foglio di stile e lo rende sul monitor del nostro computer.

1. Per prima cosa controlla il target stabilito con l'attributo media o con dichiarazioni equivalenti. Scarta quindi tutti gli stili riferiti alla stampa o ad altri supporti. Allo stesso tempo scarta tutte le regole che non trovino corrispondenza negli elementi strutturali del documento.

2. Comincia ad ordinare per peso e origine secondo le regole viste sopra. C'è un CSS definito dall'autore? Userà quello. Altrimenti verificherà la presenza di un foglio di stile utente e in sua assenza applicherà le sue regole stilistiche predefinite.

3. Quindi calcola la specificità dei selettori e in caso di conflitto tra regole usa questo criterio di prevalenza.

4. Se non ci sono conflitti o se peso, origine e specificità coincidono, viene applicata la regola più vicina all'elemento nel codice del documento. L'ordine, se le dichiarazioni degli stili sono fatte nell'ordine più corretto e logico, è quindi il seguente: gli stili in linea prevalgono su quelli incorporati che a loro volta prevalgono su quelli collegati.

Esempi e commenti in questa pagina.

Importanza

Ed ora il concetto di importanza. Semplice e lineare la regola: se una dichiarazione viene accompagnata dalla parola chiave !important essa balza al primo posto nell'ordine di applicazione a prescindere da peso, origine, specificità e ordine. Ancora un esempio per verificare il concetto.

Altri articoli

Altre guide

Altre newsletter