logo del sito

W3C

Al giorno d'oggi è importante che un sito Web, sia compatibile con gli standard del Consorzio Internazionale W3C.

HTML

Tutte le pagine dei siti web sono scritte in HTML, linguaggio che viene letto ed elaborato dal browser, il quale genera la pagina che viene visualizzata sullo schermo del nostro computer.

CSS

Con il termine CSS (dall'inglese Cascading Style Sheets) vengono semplicemente definiti appunto i "fogli di stile a cascata", usati per separare all'interno delle pagine di un sito, i contenuti dalla formattazione, permettendo una programmazione più facile per gli autori delle pagine HTML.

Il meccanismo dei CSS

In questa lezione, tratteremo un argomento importantissimo, cioè quel meccanismo basilare, che regola il funzionamento dei CSS, quindi parleremo di ereditarietà, di peso, di cascade e di qualche altro termine. Sono regole un pò complesse, ma essenziali e per capirle meglio, guardiamo sempre gli esempi correlati.

Il primo concetto è quello di ereditarietà. Nei fogli di stile l'ereditarietà, come dice la parola stessa, si verifica quando, se definiamo uno stile per un elemento Xhtml, anche tutti i suoi elementi figli (cioè contenuti anche indirettamente in esso) avranno lo stesso stile (si dice che la proprietà viene ereditata), a meno che non intervengano cambiamenti che modificano quest'impostazione.

Per es. se usiamo il colore rosso per il testo (color: red;) a livello di Body tutti gli altri elementi suoi discendenti erediteranno questa regola. Ma se ad un certo punto definiamo nel codice del CSS un selettore con una proprietà diversa, cioè {color: black;} l'ereditarietà viene spezzata. Questo esempio al riguardo chiarisce il concetto.

Però non tutte le proprietà sono ereditabili: non avrebbe senso per esempio, forzare l'ereditarietà delle dimensioni di un elemento o i suoi bordi, in quanto sono normalmente tutti diversi. Saranno invece ereditate quelle proprietà che rendano la pagina omogenea, come appunto il colore o le dimensioni del testo. Per forzare l'ereditarietà di una proprietà per una particolare dichiarazione, è possibile usare il valore speciale inherit (eredità), che è un valore valido per qualsiasi proprietà e imposta il valore dell'elemento appena genitore.

D'ora in avanti affronteremo un'altra serie di concetti fondamentali tutti ricollegabili comunque ad uno stesso argomento, e cioè le possibili incompatibilità tra gli stili e le regole. Tenteremo in pratica di rispondere a quesiti come questo. Se inseriamo queste regole in un CSS:

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

E in una pagina Xhtml, scriviamo questo codice:

    <p class="testo">"Lorem ipsum dolor sit amet....</p>

apparirà che il testo del paragrafo sarà rosso e non nero, perchè il selettore classe (.testo) prevale su quello semplice del paragrafo (p). Guardate l'esempio.

La specificità, descrive il peso relativo delle varie regole all'interno di un foglio di stile. Esistono regole ben precise per calcolarla e sono quelle che applicano i vari browser quando si trovano davanti ad un CSS. Spesso capita di avere due o più regole che, anche con selettori diversi, si riferiscono allo stesso oggetto. In questo caso le due o più regole si applicano contemporaneamente, ma cosa accade se alcune dichiarazioni sono in conflitto tra loro? In questo caso entrano in gioco alcune norme definite dal W3C che ci permettono di calcolare la priorità di tali regole. La specificità di un selettore si basa su un numero di tre cifre determinate in questo modo:

Per prima cosa si conta il numero di selettori id presenti nella regola, poi si passa a verificare la presenza di classi e pseudo-classi e infine si conta il numero di elementi definiti nella regola. In questo primo esempio abbiamo:

   #titolo {color: black;} Regola: 1 id, 0 classi, 0 elementi: quindi: 1-0-0

secondo esempio:

.classe1{background:#C00;} 0 id, 1 classe, 0 elementi: quindi: 0-1-0

terzo esempio:

   h1 {color: red;} Regola: 0 id, 0 classi, 1 elemento quindi: 0-0-1

Come potete notare, il peso specifico della regola del primo esempio è maggiore, invece quello dell'ultima regola è il minore, questo perch è gli id pesano più delle classi, queste ultime pesano più degli elementi, ecc. ecc. Quando due dichiarazioni sono in conflitto si applica la dichiarazione il cui selettore ha maggiore specificità. A parità di specificità si applica la dichiarazione scritta per ultima.

Visto che siamo nel mondo dei fogli di stile a cascata, introduciamo adesso il concetto di cascade, o meglio tentiamo di capire il procedimento di un browser quando incontra un foglio di stile e lo fà visualizzare sul monitor del nostro computer. Il browser quando riceve una pagina dal server, esegue un "filtraggio" degli stili. Inizialmente valuta il valore dell’attributo media (se è presente) e quindi imposta le prime regole di visualizzazione. Successivamente verifica la presenza di eventuali stili definiti dall’utente, (come la stampa) e comincia ad ordinare i vari elementi in base al loro peso e alla loro origine. Infine ordina le varie dichiarazioni in questo modo: gli stili in linea hanno più importanza di quelli incorporati che a loro volta prevalgono su quelli collegati

Esempi e commenti in questa pagina:

Bisogna inoltre sapere che se dopo la dichiarazione è presente la parola !important, essa balza al primo posto nell'ordine di applicazione a prescindere da peso, origine, specificità e ordine. In questo esempio è chiaro il concetto.

^ Inizio pagina

Ricerca personalizzata


Lezione successiva successiva

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

Indice