APPUNTI SPARSI SUI CSS
Introduzione
Come spiegato al gruppo, l'adozione della tecnologia CSS permette di
tenere separate le informazioni contenute in un documento dalla sua formattazione.
Questa impostazioni ha diversi vantaggi, ma quelli che interessano di più agli autori del
sito del Marconi sono:
- l'utilizzo coerente ed uniforme degli stili all'interno di un singolo documento web;
- l'utilizzo coerente ed uniforme degli stili in tutte le pagine che appartengono allo stesso sito,
rendendo anche il sito stesso riconoscibile a una prima occhiata;
- la possibilità di concentrarsi sull'aspetto logico di ciò che si scrive, lasciando che il sistema
si prenda carico delle esigenze di formattazione.
Scopo di questo documento è quello di mostrare alcune delle particolarità più importanti
dei CSS, tra cui tutte quelle utilizzate attualmente nel
sito del Marconi. Il foglio di stile di questo documento
non è semplicissimo: lo puoi visualizzare e leggere all'indirizzo
http://www.melegari.net/css/redazione.css se sei
curioso di vedere come è ottenuta la formattazione delle diverse parti di cui il
documento è composto.
Struttura dei comandi CSS
La struttura di base dei comandi CSS è la seguente:
Selettore{proprietà: valore;}.
Per esempio, il comando:
body{color: red;}
fa in modo che il testo del <body> sia di colore rosso.
I comandi CSS si possono susseguire:
body{color: red;}
body{text-align: justify;}
oppure possono essere raggrupati:
body{color: red; text-align: justify;}.
Nel caso in cui la stessa proprietà sia ripetuta più volte, l'ultima
specificazione "sovrascrive" la precedente. Ciò permette, tra l'altro, di scrivere le
istruzioni CSS in modo più sintetico: per
esempio, le istruzioni
td
{width: 100px; text-align: left; border: 1 px black solid; color: black;}
th
{width: 100px; text-align: left; border: 1 px black solid; color: red;}
Possono essere sintetizzate, evitando le ripetizioni,come:
td, th
{width: 100px; text-align: left; border: 1 px black solid; color: black;}
th
{color: red;}
La virgola tra i due selettori td e th
indica che le istruzioni successive si applicano ad entrambi (vedi il
paragrafo sulla
combinazione dei selettori), mentre l'istruzione th
{color: red;} sostituisce la precedente {color: black}, ma
solo per il descrittore th.
Tra i selettori ce ne sono due di tipo speciale:
Le classi
In questo documento lo stile dei paragrafi è definito dal seguente codice:
p{text-indent: 1.5em; margin-top: 0.2em; margin-bottom: 0.5em;
line-height: 140%;}
Però è sempre possibile che sia necessario prevedere paragrafi con un
formato diverso, per esempio come quello che segue, che potrebbe essere utilizzato per
evidenziare note tecniche particolarmente importanti.
Prima di pubblicare un documento di rete è buona norma validarne il codice
HTML
all'indirizzo http://validator.w3.org/,
gestito dal World Wide Web Consortium.
In sistema per comunicare al browser la diversa formattazione consiste nell'utilizzo
di una classe. Nell'esempio precedente il nome della classe è
Nota. Attenzione perché, mentre in generale
HTML e CSS
sono case-independent, il nome della classe è case-dependent.
Per comunicare che un certo paragrafo, come il precedente con bordo blu, appartiene alla classe
Nota, si scrive il nome della classe all'interno del tag <p>
mediante la sintassi <p class="Nota">.
Le proprietà della classe stessa sono descritte, all'interno del documento
CSS, usando la dot-notation
p.Nota. Nel caso dell'esempio precedente il codice è
p.Nota{text-indent: 0em; margin-top: 0.7em; margin-bottom: 0.7em;
line-height: 100%; border: 2px ridge blue; padding: 0.5em;}
Le classi possono essere attribuite anche in modo multiplo. Per esempio, in questo documento
è definita la classe AlCentro, che si riferisce al selettore
universale mediante l'istruzione:
*.AlCentro{text-align: center;}
che significa: "qualunque elemento di classe AlCentro ha il testo centrato".
Allora possiamo utilizzare la sintassi <p class="Nota AlCentro">, che
permette di ottenere il risultato mostrato sotto.
Prima di pubblicare un documento di rete è buona norma validarne il codice
CSS
all'indirizzo
http://jigsaw.w3.org/css-validator/,
gestito dal World Wide Web Consortium.
È evidente che il paragrafo precedente ha la formattazione di p.Nota
e anche quella definita da *.AlCentro.
I selettori HTML possono essere combinati
in modo da rendere più veloci o raffinare le istruzioni di formattazione. Le combinazioni
possibili sono:
È il caso già visto in precedenza: a più
selettori, contenuti in un elenco separato dal segno di virgola, si applicano le stesse
regole di formattazione definte subito dopo.
Una combinazione di selettori del tipo sel1 sel2 [...]
definisce un nuovo selettore specifico, che permette di applicare una data formattazione
nel caso in cui l'elemento sel2 sia contenuto all'interno
di un elemento sel1 (in questo caso si dice che sel2
è un discendente di sel1, oppure che sel1
è un antenato di sel2).
Per esempio, in questo documento il tipo di punto usato negli elenchi è definito
dall'istruzione:
ul{list-style-type: disc;}.
Ma i sottoelenchi (elenchi contenuti in un elenco) hanno come punto-elenco il
quadrato. Ciò è possibile grazie all'istruzione:
ul ul{list-style-type: square;}.
E, infine, i sottoelenchi di ordine due hanno come punto-elenco il cerchio vuoto grazie
all'istruzione:
ul ul ul{list-style-type: circle;}.
In questo modo è possibile costruire delle strutture di elenco complesse
come quella che segue:
Facciamo un altro esempio: in questo documento l'enfasi (cioè la
sottolineatura dell'importanza di una parola o di una frase) è resa
attraverso il corsivo:
em{font-style: italic;}.
Supponiamo ora di inserire una citazione (dal primo
capitolo de I promessi sposi di Alessandro Manzoni), con la formattazione che segue:
Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti,
tutto a seni e a golfi, a seconda dello sporgere e del rientrare di quelli, vien, quasi a un tratto,
a ristringersi, e a prender corso e figura di fiume, tra un promontorio a destra, e
un'ampia costiera dall'altra parte; e il ponte, che ivi congiunge le due rive, par che renda ancor
più sensibile all'occhio questa trasformazione, e segni il punto in cui il lago cessa, e
l'Adda rincomincia, per ripigliar poi nome di lago dove le rive, allontanandosi di nuovo,
lascian l'acqua distendersi e rallentarsi in nuovi golfi e in nuovi seni.
Un'eventuale enfasi presente nel testo risulterebbe allora invisibile, perchè sarebbe
scritta in corsivo all'interno di un testo tutto in corsivo. Visto che la frase successiva della
stessa opera ha, appunto, un'enfasi, il problema può essere risolto con il comando:
blockquote em{font-style: normal;}.
In questo modo, nella citazione seguente spicca la parola "Resegone".
La costiera, formata dal deposito di tre grossi torrenti, scende appoggiata a due monti contigui,
l'uno detto di san Martino, l'altro, con voce lombarda, il Resegone, dai molti suoi
cocuzzoli in fila, che in vero lo fanno somigliare a una sega: talché non è chi, al
primo vederlo, purché sia di fronte, come per esempio di su le mura di Milano che guardano a
settentrione, non lo discerna tosto, a un tal contrassegno, in quella lunga e vasta giogaia,
dagli altri monti di nome più oscuro e di forma più comune.
Grazie a questi accorgimenti, l'autore del testo può concentrarsi sugli aspetti
contenutistici e logici del suo lavoro (per esempio, decidere se una parola merita l'enfasi
oppure no), e lasciare alla formattazione il compito di visualizzare queste scelte.
La combinazione sel1 > sel2 ha un effetto simile a quella del caso
precedente, ma si applica soltanto se l'elemento sel2 è
immediatamente contenuto nell'elemento sel1, cioè
se, come si dice, l'elemento sel2 è un figlio
dell'elemento sel1 (invece, il caso precedente è valido anche
se l'elemento sel2 è contenuto in uno o più altri
elementi che sono, a loro volta, contenuti nell'elemento sel1).
Bisogna fare attenzione nell'usare questo selettore composto perchè, per quanto
riguarda Internet Explorer, il suo uso è supportato solo dalle versioni più
recenti.
Il selettore composto sel1 + sel2 indica che la formattazione si
applica soltanto se l'elemento sel2 è immediatamente
preceduto da un elemento sel1.
Per esempio, in questo documento i paragrafi sono indentati mediante l'istruzione:
p{text-indent: 1.5em;}.
Però, per motivi estetici non sono indentati i paragrafi che seguono un elemento
diverso, come un titolo o una citazione. Tale effetto si ottiene con l'istruzione:
h1+p, h2+p, h3+p, ul+p, ol+p, pre+p, p.Nota+p, blockquote+p
{text-indent: 0;}.
La proprietà float
Quando inseriamo un'immagine nel nostro documento dobbiamo fare alcune
scelte. Gli esempi seguenti illustrano due possibilità.
Immagine a sinistra, testo a destra
Questa è una foto del gatto di casa, Romeo, quando aveva circa tre mesi.
Romeo è più o meno un norvegese delle foreste, anche se è nato vicino a Colorno.
Lo abbiamo "adottato" rispondendo a un'inserzione gratuita, in cui si diceva che c'era
una nidiata di mici che cercava casa.
Romeo è un vero gatto informatico, nel senso che gli piace oltre misura passeggiare
sulla tastiera dei computer di casa; per questa ragione occorre non lasciare nessun
documento aperto quando si lascia il PC incustodito: al ritorno lo si potrebbe trovare
modificato in modo notevole o (il che è ancora più pericoloso) quasi impercettibile.
In effetti, mi è già capitato di utilizzare o inviare file che eranno stati "arricchiti"
dalle pressioni di Romeo sui tasti.
Immagine a destra, testo a sinistra
Questa è una foto del gatto di casa, Romeo, quando aveva circa tre mesi.
Romeo è più o meno un norvegese delle foreste, anche se è nato vicino a Colorno.
Lo abbiamo "adottato" rispondendo a un'inserzione gratuita, in cui si diceva che c'era
una nidiata di mici che cercava casa.
Romeo è un vero gatto informatico, nel senso che gli piace oltre misura passeggiare
sulla tastiera dei computer di casa; per questa ragione occorre non lasciare nessun
documento aperto quando si lascia il PC incustodito: al ritorno lo si potrebbe trovare
modificato in modo notevole o (il che è ancora più pericoloso) quasi impercettibile.
In effetti, mi è già capitato di utilizzare o inviare file che eranno stati "arricchiti"
dalle pressioni di Romeo sui tasti.
In entrambi gli esempi, per posizionare l'immagine si è utilizzata la proprietà float, nel primo caso
con il valore left, nel secondo con il valire right.
Per essere specifici, per la prima immagine si è definito:
img.Sinistra{float: left; margin: 0.5em 0.5em 0.5em 0px;}
e si è usato il comando
<p><img class="Sinistra" ...
La seconda immagine è stata posizionata in modo analogo utilizzando float: right.
Utilizzando la proprietà float si può ottenere anche il seguente effetto:
Questo è un testo suddiviso su tre colonne.
Esse hanno un'ampiezza pari a 1/3 circa del totale e sono "appoggiate"
a sinistra, una dopo l'altra, grazie alla proprietà float: left;.
Questo è un testo suddiviso su tre colonne.
Esse hanno un'ampiezza pari a 1/3 circa del totale e sono "appoggiate"
a sinistra, una dopo l'altra, grazie alla proprietà float: left;.
Questo è un testo suddiviso su tre colonne.
Esse hanno un'ampiezza pari a 1/3 circa del totale e sono "appoggiate"
a sinistra, una dopo l'altra, grazie alla proprietà float: left;.
Attenzione: il metodo non funziona più se la finestra del browser viene stretta oltre un certo limite:
siete invitati a fare qualche esperimento per rendervene conto.
La proprietà clear
Ritorniamo all'esempio del gatto Romeo. Se il testo di fianco alla foto è più corto di
quello precedente, potremmo incappare nella seguente situazione:
Immagine a sinistra, testo a destra
Questa è una foto del gatto di casa, Romeo, quando aveva circa tre mesi.
Romeo è più o meno un norvegese delle foreste, anche se è nato vicino a Colorno.
Lo abbiamo "adottato" rispondendo a un'inserzione gratuita, in cui si diceva che c'era
una nidiata di mici che cercava casa.
Immagine a destra, testo a sinistra
Questa è una foto del gatto di casa, Romeo, quando aveva circa tre mesi.
Romeo è più o meno un norvegese delle foreste, anche se è nato vicino a Colorno.
Lo abbiamo "adottato" rispondendo a un'inserzione gratuita, in cui si diceva che c'era
una nidiata di mici che cercava casa.
Probabilmente non è questo l'effetto che intendevate ottenere, ma volevate il titolo rosso al
di sotto della prima foto del gatto. Per risolvere il problema si usa la proprietà
clear: none | left | right | both |;. Per esempio, con
l'istruzione:
h3{clear: left;}
si istruisce il browser di non mettere alcun oggetto alla sinistra del titolo di terzo livello.
Così l'immagine non può essere alla sinistra del titolo e l'effetto che si ottiene è quello
mostrato sotto.
Immagine a sinistra, testo a destra
Questa è una foto del gatto di casa, Romeo, quando aveva circa tre mesi.
Romeo è più o meno un norvegese delle foreste, anche se è nato vicino a Colorno.
Lo abbiamo "adottato" rispondendo a un'inserzione gratuita, in cui si diceva che c'era
una nidiata di mici che cercava casa.
Immagine a destra, testo a sinistra
Questa è una foto del gatto di casa, Romeo, quando aveva circa tre mesi.
Romeo è più o meno un norvegese delle foreste, anche se è nato vicino a Colorno.
Lo abbiamo "adottato" rispondendo a un'inserzione gratuita, in cui si diceva che c'era
una nidiata di mici che cercava casa.
Per essere sicuri che i titoli siano sempre su una riga a loro dedicata, in questo documento
si utilizza per essi l'istruzione clear: both;.
Questa opera è distribuita sotto una licenza Creative Commons, consultabile all'indirizzo di rete
http://creativecommons.org/licenses/by-nc-sa/2.5/it/legalcode. In breve, tale licenza consente
di: 1) riprodurre, distribuire,
comunicare al pubblico, esporre in pubblico, rappresentare, eseguire e recitare quest'opera e 2) modificare quest'opera.
Ciò alle seguenti condizioni: a) Devi attribuire la paternità dell'opera nei modi indicati dall'autore o
da chi ti ha dato l'opera in licenza e in modo tale da non suggerire che essi avallino te o il modo in cui tu usi l'opera.
b) Non puoi usare quest'opera per fini commerciali. c) Se alteri o trasformi quest'opera, o se la usi per crearne un'altra,
puoi distribuire l'opera risultante solo con una licenza identica o equivalente a questa. d) Ogni volta che usi o distribuisci
quest'opera, devi farlo secondo i termini di questa licenza, che va comunicata con chiarezza. e) In ogni caso, puoi concordare
col titolare dei diritti utilizzi di quest'opera non consentiti da questa licenza.