Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Una pagina web formata fondamentalmente da due elementi: i contenuti veri e propri e
la formattazione ovvero l'aspetto con cui i contenuti sono mostrati all'utente. Il linguaggio
HTML ha come scopo quello di gestire i contenuti, specificandone la struttura attraverso
tag diversi. Ogni tag (ad esempio <h1> o <p>) specifica un diverso ruolo dei contenuti che
contrassegna.
I browser che interpretano il codice HTML mostrano all'utente formattazioni predefinite per
ogni tag che incontrano: cos, ad esempio, i contenuti marcati con il tag <h1> avranno
carattere 18pt e i contenuti marcati da <p> avranno carattere 12pt. Tuttavia questa
formattazione completamente sotto il controllo dell'utente, che pu modificarla nelle
impostazioni del suo browser.
Per permettere agli autori di definire l'aspetto delle loro pagine, dal 1993 in poi Netscape
Navigator ed Internet Explorer presentarono tag proprietari, ovvero non aderenti agli
standard e non compatibili con i browser concorrenti. Un esempio di questi tag <font>.
Questi tag proprietari erano l'unico modo per gli autori di definire la formattazione e cos il
loro uso diventato massiccio. Tuttavia questi tag presentano vari problemi:
1. Il peso delle pagine. Se confrontata con una pagina che adotta il linguaggio CSS, una
pagina che non lo adotta in genere pi pesante (in termini di bit) in un rapporto che
spesso raggiunge il 200%. Inoltre le istruzioni CSS possono essere raccolte in un file
esterno che rimane memorizzato nella cache del browser, riducendo ulteriormente la
quantit di dati che i server devono trasmettere.
2. Mancanza di standardizzazione. Un codice non aderente agli standard, ridondante e
confuso comporta molto lavoro aggiuntivo per i browser, che devono cercare di
correggere ed interpretare (quando possibile) direttive arbitrarie.
3. Mancanza di compatibilit con i nuovi dispositivi quali palmari e smartphone. Le
pagine HTML sono progettate per schermi con risoluzione minima 800x600 pixel. I
palmari, che hanno una risoluzione inferiore ed una forma dello schermo ben diversa
dal rapporto 4:3 dei monitor per computer, si trovano quindi impossibilitati a
visualizzarle correttamente.
Unaltra questione lutilizzo di tabelle, ovvero del tag <table>, per realizzare
l'impaginazione (layout) delle pagine web. Questo viene considerato dai puristi come
inaccettabile in quanto le tabelle sono pensate per impaginare dati tabulari e non layout
web. In realt l'unico svantaggio serio di questo sistema l'incredibile peso delle pagine.
Tutti i problemi enunciati hanno unorigine comune: la mancata separazione tra struttura
e aspetto del contenuto.
Per esempio, si supponga che un autore usi per i titoli di pagina il tag <font> invece del tag
<h1>:
<font size=+3 face=Helvetica color=red> Titolo di pagina </font>
1
Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/09/2015
Da un punto di vista strutturale il tag font non ha significato. Per esempio, a cosa pu
servire il tag font in un browser che utilizza la sintesi vocale? Se al posto degli elementi
font lautore usa gli elementi titoli, un browser di questo tipo pu utilizzare un certo stile
linguistico per leggere il testo. Con il tag font, invece, il browser non ha modo di sapere
che un testo presenta qualche differenza rispetto al resto del documento.
Per tentare di risolvere questa situazione, nel 1996 il W3C eman le specifiche CSS 1. I
CSS 1 erano un interessante sistema per separare contenuto da formattazione. La base di
questo linguaggio, infatti, consisteva nel fatto che il contenuto sarebbe stato sempre
definito dal codice HTML, mentre la formattazione si sarebbe trasferita su un codice
completamente separato, i CSS appunto. I richiami tra i due codici venivano effettuati
tramite due particolari attributi HTML: class e id. I CSS 1 sviluppavano un'idea semplice
ed efficace, ma nonostante le loro grandi potenzialit non ebbero successo a causa della
mancanza di browser in grado di supportarli.
Per includere nuove funzionalit e rendere i CSS un linguaggio ben supportato, nel 1998 il
W3C eman le specifiche CSS 2 e nel 2004 le specifiche CSS 2.1. I CSS 2 sono la
naturale evoluzione dei CSS 1 ed offrono potenti soluzioni per risolvere soprattutto il
problema descritto al punto 3, con la possibilit di creare fogli di stile separati per i
dispositivi portatili. Anche il problema al punto 2 ormai pienamente risolvibile, scrivendo
una pagina HTML esclusivamente indirizzata alla struttura e ai contenuti e manovrandola
poi esclusivamente con i CSS per impaginarla. Con la comparsa di Internet Explorer 5, di
Firefox e di Opera 7, i CSS 2 hanno potuto avvalersi di browser in grado di interpretarli e
sono quindi entrati a far parte del codice di molti siti web.
Attualmente i CSS sono alla versione 3 (CSS 3), tuttavia, siccome le specifiche sono
costituite da sezioni separate dette moduli, il loro avanzamento avviene in tempi differenti
(http://www.w3.org/TR/#tr_CSS).
Il selettore , nel caso pi semplice, un tag HTML e indica a quale elemento della pagina
saranno applicate le propriet contenute nel blocco dichiarazioni. Il blocco dichiarazioni
contiene pi dichiarazioni separate da punto e virgola:
2
Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/09/2015
Come potete osservare, anche lultima dichiarazione del blocco seguita da un punto e
virgola. Ciascuna dichiarazione esprime una caratteristica di formattazione nel seguente
modo:
attributo : valore
Esempi
h1 {color: blue; background: yellow;}
Tutti gli elementi h1 della pagina HTML - i titoli di livello 1 - hanno colore blu e sfondo
giallo.
p {font-family: medium Helvetica; font-weight: bold;}
Tutti gli elementi p della pagina HTML - i paragrafi - hanno font Helvetica di dimensione
media e appaiono in grassetto.
CSS esterni
Le regole CSS vengono inserite in un file di testo che viene salvato con estensione .css.
stile1.css
h1 {color: blue; background: yellow;}
p {font-family: medium Helvetica; font-weight: bold;}
3
Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/09/2015
Il foglio di stile viene collegato alla pagina HTML utilizzando il tag <link>, che deve essere
posizionato dentro al tag <head>, ma non dentro altri elementi come <title>.
pagina.html
<html>
<head>
<link rel=stylesheet type=text/css href=stile1.css media=all>
<title> Titolo della pagina </title>
</head>
<body>
...............................................
</body>
</html>
CSS incorporati
Le regole CSS vengono inserite direttamente nella sezione head della pagina HTML
utilizzando il tag <style>.
pagina.html
<html>
<head>
<style type=text/css media=all>
h1 {color: blue; background: yellow;}
p {font-family: medium Helvetica; font-weight: bold;}
</style>
<title> Titolo della pagina </title>
</head>
<body>
...............................................
</body>
</html>
Mediante il tag <style> possibile importare fogli di stile esterni, semplicemente usando la
direttiva @import. Si possono importare pi fogli di stile esterni con lunico vincolo che le
direttive import siano inserite prima di ogni altra regola CSS. Supponiamo di voler
collegare alla pagina HTML un foglio di stile esterno adatto per la stampa (print).
pagina.html
4
Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/09/2015
<html>
<head>
<style type=text/css media=all>
@import url(stile2.css) print;
h1 {color: blue; background: yellow;}
p {font-family: medium Helvetica; font-weight: bold;}
</style>
<title> Titolo della pagina </title>
</head>
<body>
...............................................
</body>
</html>
CSS inline
Le regole di stile possono essere applicate ad ogni elemento del body utilizzando
lattributo style. Questa soluzione , ove possibile, da evitare.
pagina.html
<html>
<head>
<title> Titolo della pagina </title>
</head>
<body>
...............................................
<h1 style=color: blue; background: yellow;> Titolo 1 </h1>
<p style=font-family: medium Helvetica; font-weight: bold;>
contenuto del paragrafo
</p>
...............................................
</body>
</html>
Lattributo style si pu associare a tutti i tag che si trovano allinterno del body.
5
Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/09/2015
Raggruppamento di selettori
Con i CSS possibile attribuire le stesse regole di stile a selettori diversi nel seguente
modo:
selettore1, selettore2, , selettoreN { BLOCCO DICHIARAZIONI}
Esempio
h1, h2 {color: purple;}
Esempio
* {color: purple;}
Selettori CLASS e ID
I CSS permettono di marcare alcune parti del documento per applicare solo ad esse un
determinato stile, indipendentemente dallelemento (tag HTML) coinvolto. Per esempio,
per far apparire in grassetto alcune parti di un documento che riteniamo importanti,
possiamo marcarle con lattributo class.
pagina.html
<html>
<head>
<title> Titolo della pagina </title>
</head>
<body>
...............................................
<h1> Titolo 1 </h1>
<p class=importante>
contenuto del paragrafo 1
6
Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/09/2015
</p>
<p>
contenuto del paragrafo 2
</p>
<p class=importante>
contenuto del paragrafo 3
</p>
<h1 class=importante> Titolo 2 </h1>
...............................................
</body>
</html>
La regola di stile che permette di far apparire in grassetto il primo e il terzo paragrafo la
seguente:
La regola di stile che permette di far apparire in grassetto il secondo titolo la seguente:
Tutte le regole seguenti applicano lo stile grassetto agli elementi marcati importante,
indipendentemente dallelemento HTML.
*.importante {font-weight: bold;}
oppure
.importante {font-weight: bold;}
Lattributo class pu avere multipli valori. Per esempio, supponiamo che un paragrafo non
sia solo importante ma anche urgente e lo si voglia far apparire in rosso.
pagina.html
<html>
<head>
<title> Titolo della pagina </title>
</head>
<body>
...............................................
<h1> Titolo 1 </h1>
7
Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/09/2015
La regola di stile che permette di far apparire in grassetto e di colore rosso il primo
paragrafo la seguente:
p.importante.urgente {font-weight: bold; color: red;}
In modo analogo si possono marcare alcune parti di un documento con lattributo id.
Tuttavia, mentre lo stesso valore di class pu essere applicato a pi di un elemento, i
valori di id non possono essere ripetuti e non nemmeno possibile attribuire loro
valori multipli. Anche la sintassi diversa: si usa il simbolo cancelletto (#) invece del
punto. Ad esempio, supponiamo di voler attribuire ai paragrafi di un documento un diverso
colore.
pagina.html
<html>
<head>
<title> Titolo della pagina </title>
</head>
<body>
...............................................
<h1> Titolo 1 </h1>
<p id=primo-paragrafo>
contenuto del paragrafo 1
</p>
<p id=secondo-paragrafo>
contenuto del paragrafo 2
</p>
<p id=terzo-paragrafo>
contenuto del paragrafo 3
</p>
...............................................
8
Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/09/2015
</body>
</html>
9
Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/09/2015
Descrizione
Tutti gli elementi <tag2> posti dentro ad elementi <tag1>
Tutti gli elementi <tag2> il cui elemento genitore <tag1>
Tutti gli elementi <tag2> posti immediatamente dopo <tag1>
Tutti gli elementi <tag2> preceduti da <tag1>
Tutti gli elementi con lattributo specificato
Tutti gli elementi il cui attributo ha il valore specificato
Tutti gli elementi il cui attributo contiene il valore specificato
Tutti gli elementi il cui attributo ha un valore che inizia con la parola
specificata (interamente)
Tutti gli elementi il cui attributo ha un valore che inizia con il valore
specificato
Tutti gli elementi il cui attributo ha un valore che termina con il valore
specificato
Tutti gli elementi il cui attributo ha un valore che contiene il valore
specificato
Per quanto riguarda i selettori di attributi racchiusi tra parentesi quadre, si possono
anteporre a ciascuno di essi ulteriori selettori di tag. Per esempio:
tag[attributo=valore]
seleziona tutti gli elementi <tag> che hanno il valore specificato nellattributo.
Un elenco completo visibile alla pagina:
http://www.w3schools.com/cssref/css_selectors.asp .
Riferimenti
E. A. Meyer, Cascading Style Sheets - La guida completa, Hops Libri, 2007
Wikipedia, Foglio di stile, url: http://it.wikipedia.org/wiki/Foglio_di_stile
W3Schools, CSS Tutorial, url: http://www.w3schools.com/css/default.asp
Quest'opera distribuita con Licenza Creative Commons Attribuzione - Condividi allo stesso modo 4.0
Internazionale
10
Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/09/2015