Anda di halaman 1dari 10

Introduzione ai CSS

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.

Un’altra questione è l’utilizzo 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 un’origine 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>

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/09/2015

1

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 l’autore 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

  • Che cos’è un foglio di stile

Un foglio di stile è costituito da un insieme di regole espresse con la seguente sintassi:

SELETTORE { BLOCCO DICHIARAZIONI }

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:

{ dichiarazione1; dichiarazione2; …; dichiarazioneN; }

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/09/2015

2

Come potete osservare, anche l’ultima dichiarazione del blocco è seguita da un punto e virgola. Ciascuna dichiarazione esprime una caratteristica di formattazione nel seguente modo:

attributo : valore

E’ possibile indicare più valori per uno stesso attributo separati da spazio:

attributo : valore1 valore2 … valoreN

Esempi

h1 {color: blue; background: yellow;}

Tutti gli elementi h1 della pagina HTML - i titoli di livello 1 - giallo.

hanno colore blu e sfondo

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.

  • Attribuire le regole di stile ad un documento HTML

L’attribuzione di regole di stile ad una pagina HTML può avvenire mediante l’utilizzo di:

  • CSS esterni;

  • CSS incorporati;

  • CSS inline.

  • 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;}

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/09/2015

3

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 l’unico 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

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/09/2015

4

<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 l’attributo 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>

L’attributo style si può associare a tutti i tag che si trovano all’interno del body.

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/09/2015

5

  • 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;}

La regola specificata è applicata ai selettori h1 e h2.

Una stessa regola può essere applicata a tutti gli elementi di un documento HTML

utilizzando il SELETTORE UNIVERSALE *.

* { BLOCCO DICHIARAZIONI}

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 dall’elemento (tag HTML) coinvolto. Per esempio, per far apparire in grassetto alcune parti di un documento che riteniamo “importanti”, possiamo marcarle con l’attributo class.

pagina.html

<html> <head> <title> Titolo della pagina </title> </head> <body> ............................................... <h1> Titolo 1 </h1> <p class=”importante”> contenuto del paragrafo 1

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/09/2015

6

</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:

p.importante {font-weight: bold;}

La regola di stile che permette di far apparire in grassetto il secondo titolo è la seguente:

h1.importante {font-weight: bold;}

Tutte le regole seguenti applicano lo stile grassetto agli elementi marcati “importante”, indipendentemente dall’elemento HTML.

*.importante {font-weight: bold;} oppure .importante {font-weight: bold;}

L’attributo 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>

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/09/2015

7

<p class=”importante urgente”> contenuto del paragrafo 1 </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 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 l’attributo 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>

...............................................

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/09/2015

8

</body> </html>
</body>
</html>

La regole di stile da applicare sono:

p#primo-paragrafo {color: red;} p#secondo-paragrafo {color: blue;} p#terzo-paragrafo {color: green;}

  • Fogli di stile multipli

I fogli di stile vengono detti a cascata(cascade) perché quando sono presenti più CSS per uno stesso elemento, provenienti da diverse sorgenti (esterna, incorporata e inline), viene generato un nuovo foglio di stile virtuale in base alle seguenti regole, in ordine di priorità:

  • 1. lo stile inline, specificato allinterno dellelemento html nel body, prevale su tutti gli altri;

  • 2. lo stile specificato nella sezione head con un css esterno o incorporato, viene sovrascritto dallo stile inline ma prevale sullo stile di default del browser; lo stile incorporato prevale su quello esterno a meno che il link al css esterno venga inserito al di sotto dellelemento <style>, che contiene lo stile incorporato;

  • 3. in assenza di uno stile specificato con i css, viene applicato lo stile predefinito nel browser.

Esempio

Supponiamo che per un elemento <p> siano specificate le seguenti regole di stile in un css esterno:

p {color: blue; font-family: Verdana;}

e la seguente regola allinterno del codice HTML, dentro al tag <style>:

p {color: red;}

Le regole effettivamente applicate allelemento <p> saranno:

p {color: red; font-family: Verdana;}

la prima proveniente dallo stile incorporato, che prevale su quello esterno, e la seconda proveniente dal foglio esterno.

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/09/2015

9

  • Altri selettori CSS

Selettore

Descrizione

tag1 tag2

Tutti gli elementi <tag2> posti dentro ad elementi <tag1>

tag1 > tag2

Tutti gli elementi <tag2> il cui elemento genitore è <tag1>

tag1 + tag2

Tutti gli elementi <tag2> posti immediatamente dopo <tag1>

tag1 ~ tag2

Tutti gli elementi <tag2> preceduti da <tag1>

[attributo]

Tutti gli elementi con lattributo specificato

[attributo=valore]

Tutti gli elementi il cui attributo ha il valore specificato

[attributo~=valore]

Tutti gli elementi il cui attributo contiene il valore specificato

[attributo|=parola]

Tutti gli elementi il cui attributo ha un valore che inizia con la parola specificata (interamente)

[attributo^=valore]

Tutti gli elementi il cui attributo ha un valore che inizia con il valore specificato

[attributo$=valore]

Tutti gli elementi il cui attributo ha un valore che termina con il valore specificato

[attributo*=valore]

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:

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 <a href=Creative Commons Attribuzione - Condividi allo stesso modo 4.0 Internazionale " id="pdf-obj-9-107" src="pdf-obj-9-107.jpg">
 
   

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/09/2015

10