Tecnologie di Internet
Formattazione di contenuti
Formattazione di contenuti:
introduzione a CSS
Introduzione ai fogli di stile
Introduzione a CSS
Dott. Nicola Dragoni
Tecnologie di Internet
Formattazione di contenuti
Introduzione ai fogli di stile (1)
Quando dobbiamo presentare le informazioni contenute nei documenti
XML, non possiamo accontentarci di un file puramente testuale e neppure
delle funzionalità di browser come Internet Explorer, che applica un
minimo di formattazione ai contenuti XML.
Dott. Nicola Dragoni
2
Tecnologie di Internet
Formattazione di contenuti
Introduzione ai fogli di stile (2)
E’ necessario presentare le informazioni come se fossero dotate di un
loro aspetto grafico senza però perdere la caratteristica più importante di
XML: la separazione dei dati dalla loro presentazione.
Uno strumento per raggiungere questo risultato è rappresentato dai
fogli di stile CSS (Cascading Style Sheet) che definiscono regole di
formattazione per i tag utilizzati.
Inizialmente i fogli di stile CSS sono nati per essere usati con HTML!
Un foglio di stile è un documento separato che contiene regole di
formattazione e visualizzazione per un documento HTML o XML.
Dott. Nicola Dragoni
3
Tecnologie di Internet
Formattazione di contenuti
Introduzione ai fogli di stile (3)
Sono “cascading” perchè possono essere definiti “in cascata”, l’uno
dentro l’altro o, meglio, l’uno che completa gli altri in livelli di
raffinamento successivo:
• prima si definiscono alcune caratteristiche di stile generali
• poi si integrano queste caratteristiche in cascata con altri CSS che
le specificano più in particolare.
In sostanza:
Dentro un file CSS (che ha estensione .css) ci sono le indicazioni per
come visualizzare i vari TAG.
Dott. Nicola Dragoni
4
Tecnologie di Internet
Formattazione di contenuti
HTML e CSS (1)
Consideriamo il seguente documento HTML (Esempio.html):
<HTML>
<HEAD>
<TITLE>Pagina HTML formattata con i CSS</TITLE>
</HEAD>
<BODY>
<P>Testo di un paragrafo.</P>
<DIV>Testo di un blocco DIV.</DIV>
Mentre questo è un testo normale nel documento HTML.
</BODY>
</HTML>
Per mezzo di un foglio di stile CSS possiamo fare in modo che il
tag P e il tag DIV imprimano una particolare formattazione
grafica, diversa da quella associata al tag BODY.
Dott. Nicola Dragoni
5
Tecnologie di Internet
Formattazione di contenuti
HTML e CSS (2)
Esempio di CSS (Stile.css) per il documento HTML precedente:
P {font-Family: Arial; font-Size: 12pt; color: red;}
DIV {font-Family: Verdana; font-Size: 8pt; color: blue;}
BODY {font-Family: Arial; font-Size: 10pt; color: black;}
Con una sintassi facilmente intuibile, il foglio di stile assegna a:
Tutti i tag di nome P un font Arial, 12 punti, rosso.
Tutti i tag di nome DIV un font Verdana, 8 punti, blu.
Al contenuto del tag BODY un font Arial, 10 punti, nero.
Dott. Nicola Dragoni
6
Tecnologie di Internet
Formattazione di contenuti
HTML e CSS (3)
La sintassi per assegnare uno stile segue la regola:
nome_selettore { attributo: valore; attributo: valore; . . . }
dove nome_selettore è il nome del tag sul quale si vuole intervenire,
attributo è l’attributo da cambiare e valore è il valore assegnato
all’attributo.
• Se un valore è costituito da più di una parola, deve essere racchiuso
fra doppi apici. Esempio:
P {font-Family: “sans serif”}
• I selettori possono essere raggruppati fra di loro, separandoli con una
virgola. Esempio:
h1,h2,h3,h4,h5,h6 {color: green}
per avere dello stesso colore i tag di struttura da h1 a h6.
Dott. Nicola Dragoni
7
Tecnologie di Internet
Formattazione di contenuti
HTML e CSS (4)
Per applicare il foglio di stile Stile.css al documento HTML
Esempio.html basta fare riferimento al file CSS all’interno dell’header
del documento HTML mediante l’istruzione:
<LINK REL=“Stylesheet” TYPE=“text/css” HREF=“Stile.css” />
Il nuovo file HTML (EsempioCSS.html) verrà visualizzato in questo
modo:
Dott. Nicola Dragoni
8
Tecnologie di Internet
Formattazione di contenuti
XML e CSS (1)
Le regole appena viste sono applicabili non solo a documenti
HTML, ma anche a un qualsiasi documento XML a patto che:
i nomi dei tag HTML vengano sostituiti con i nomi dei tag XML
la sintassi per associare un CSS a un documento XML sia diversa.
Esempio: consideriamo il documento Documento.xml
<?xml version = "1.0"?>
<Documento>
<Titolo>Titolo del documento</Titolo>
<Paragrafo>Testo all'interno del documento</Paragrafo>
</Documento>
Scriviamo un documento CSS che definisca un formato per i tag
Documento, Titolo e Paragrafo (vedi file Stile2.css).
Dott. Nicola Dragoni
9
Tecnologie di Internet
Formattazione di contenuti
XML e CSS (2)
Stile2.css
Titolo {font-Family: Arial; font-Size: 12pt; color: red; display: block;}
Paragrafo {font-Family: Verdana; font-Size: 8pt; color: blue; display: block;}
Documento {font-Family: Arial; font-Size: 10pt; color: black; display: inline;}
L’attributo display indica come deve essere gestito il testo contenuto nel tag
rispetto al contenuto testuale circostante. In particolare:
block: significa che prima e dopo il testo si avranno dei simboli di a capo
automatico (<BR>) come se si trattasse di un tag P o DIV
inline: indica al browser che il testo del tag deve essere accodato al testo
precedente e successivo, a meno che uno di questi ultimi non sia di tipo
block
none: permette di nascondere il testo e quindi non visualizzare a schermo
alcune informazioni, in realtà presenti nel documento XML originale.
Dott. Nicola Dragoni
10
Tecnologie di Internet
Formattazione di contenuti
XML e CSS (3)
Per inserire in un documento XML un foglio di stile CSS (Stile2.css) si usa
una processing instruction che ha la seguente sintassi:
<?xml-stylesheet type=“text/css” href=“Stile2.css”?>
Se inseriamo questa istruzione nel documento Documento.xml (vedi
Documento2.xml) otteniamo a video il seguente output:
Dott. Nicola Dragoni
11
Tecnologie di Internet
Formattazione di contenuti
XML e CSS (4)
Finora abbiamo solo considerato la formattazione di elementi in funzione del
loro nome. In realtà la sintassi dei CSS permette anche di lavorare sulle relazioni
di parentela tra gli elementi e sull’esistenza o meno di attributi e nodi figli.
Regola
Formattazione applicata a
*
Tutti gli elementi, qualunque sia il loro nome.
Titolo
Tutti gli elementi di nome Titolo.
Titolo, Paragrafo
Tutti gli elementi di nome Titolo o di nome Paragrafo.
Capitolo Paragrafo
Tutti gli elementi di nome Paragrafo che sono contenuti, a
qualsiasi livello di profondità, in Capitolo.
Capitolo>Paragrafo
Tutti gli elementi di nome Paragrafo che sono figli di Capitolo.
Prezzo[Valuta]
Tutti gli elementi di nome Prezzo che abbiano anche l’attributo
Valuta, indipendentemente dal suo valore.
Prezzo[Valuta=“Euro”] Tutti gli elementi di nome Prezzo che abbiano l’attributo Valuta
con valore “Euro”.
Dott. Nicola Dragoni
12
Tecnologie di Internet
Formattazione di contenuti
XML e CSS (5)
ESEMPIO
Indichiamo tramite un CSS che il tag Prezzo del documento Libro
(Libro.xml) deve essere scritto in rosso se la Valuta è Lire e in verde se
la Valuta è Euro:
Prezzo[Valuta=“Lire”] {color: red;}
Prezzo[Valuta=“Euro”] {color: green;}
Nascondiamo tramite un CSS tutte le informazioni del tag Struttura del
documento Libro:
Struttura {display: none;}
Salviamo queste regole in un file CSS (StileNewLibro.css) e
applichiamole al documento Libro (ovviamete adattato, vedi
NewLibro.xml) per vedere a video il risultato.
Dott. Nicola Dragoni
13
Tecnologie di Internet
Formattazione di contenuti
Esempi
Dott. Nicola Dragoni
14
Scarica
