Gli stili definiti da SPIP
Come già si sa, i fogli di stile permettono di centralizzare e di gestire in modo molto più comodo le indicazioni grafiche che normalmente si inseriscono nell’HTML. Ciò rende apprezzabile il loro utilizzo, senza essere obbligatoriamente indispensabile: è possibile continuare a inserire, qua e là le indicazioni grafiche direttamente nell’HTML pur usando anche un foglio di stile.
Con SPIP, i fogli di stile acquisiscono una funzione supplementare e fondamentale: servono a modificare le proprietà grafiche degli elementi che non sono definite nell’HTML (quello del proprio modello)! In effetti, SPIP genera da solo una moltitudine di stili di visualizzazione diversi e vari. Quindi, le scorciatoie tipografiche (link ipertestuali, titoli di paragrafo, grassetto, corsivo, tabelle...) sono trasformati in codice HTML al fine di rappresentarli sullo schermo. Ciò vale anche per i form automatici (rispondere a un forum, firmare una petizione...) e altro ancora.
Per poter modificare anche l’apparenza grafica di questi stili, SPIP attribuisce loro un nome specifico, immutabile (questi nomi sono oggetto di un elenco esauriente in "SPIP e i fogli di stile"). Per esempio, i {{{titoli di paragrafo}}} non generano un semplice tag <h3>, ma un tag <h3 class="spip">. Qual è l’utilità? Questi tag hanno un nome specifico nell’attributo class: questo nome definisce a quale "classe" appartengono, cioè un insieme di elementi HTML che ereditano le medesime proprietà grafiche definite nel foglio di stile.
Pertanto, come si fa a cambiare l’apparenza di tutti i titoli di paragrafo di SPIP? È molto semplice, basta aprire il nostro file miei_stili.css (o qualiasi altro nome è stato dato al file) in un editor di testi e di aggiungervi le linee seguenti:
h3.spip {
color: red;
font-size: 18px;
}Aggiorniamo la pagina e tutti i titoli di paragrafo di SPIP appariranno come per magia in rosso; notiamo inoltre che gli altri tag <h3> della pagina, se ce ne sono, non sono mostrati in rosso... Se non appare nulla di tutto ciò è necessario verificare di aver dichiarato il foglio di stile nel modello (nel tag <head> come spiegato nell’articolo precedente), poi aggiorniamo la pagina...
Spieghiamo brevemente la sintassi di questa regola di impaginazione:
- h3.spip appena prima delle parentesi graffe significa che la regola che segue si applica solo ai tag <h3> che hanno un attributo class uguale a "spip". N.B.: né i tag <h3> che non hanno questo attributo né i tag che hanno questo attributo ma non sono tag <h3> saranno presi in considerazione.
- Le parentesi graffe contengono l’elenco delle proprietà grafiche associate allo stile così definito. Notiamo che tutte le proprietà non definite in questo elenco manterranno il proprio valore abituale per il tag considerato; nel nostro caso, il tag <h3> genera sempre un testo in grassetto, poiché nulla nello stile dice il contrario.
- Ogni proprietà elencata tra parentesi graffe viene terminata da un punto e virgola. Le proprietà sono costituite da un nome (questo nome è standardizzato dal linguaggio CSS), seguito da un due punti e da uno o più valori. Nel nostro esempio vediamo che il colore è impostato in rosso e la dimensione del font deve essere di 18 pixel.
Importante: se si aggiungono i propri stili è necessario sapere che il valore dato all’attributo
classè puramente arbitrario. Il browser non farà alcuna differenza, sia che l’attributo sia nominatospip,menu-rubricheocavallo321. L’unica cosa che conta è che questo valore corrisponda alla regola stabilita nel proprio foglio di stile.
Come si può notare, il linguaggio CSS è molto semplice e utilizza lo stesso tipo di vocabolario degli attributi HTML classici. Quando si sarà più smaliziati nel linguaggio dei fogli di stile si vedrà che alcuni concetti sono ereditati più o meno dall’HTML tradizionale (border, width, height...).
La gestione della cache
Il fatto che il proprio foglio di stile sia definito in un file separato (il famoso miei_stili.css) ha un’importante conseguenza. Infatti, al contrario dei propri modelli, questo file non viene gestito da SPIP (non ne ha bisogno!). Ciò significa che se si modifica il foglio di stile non è necessario svuotare la cache di SPIP: basta aggiornare la pagina nel browser. Ciò facilita ancora di più la modifica dell’impaginazione.
Ricordiamo anche che il proprio foglio di stile deve essere dichiarato nei file HTML, e che questi devono essere aggiornati una prima volta affinché la dichiarazione sia presa in considerazione: la linea <link rel="stylesheet" type="text/css" href="miei_stili.css"> deve trovarsi "nella cache" affinché il browser possa tenerne conto.