CSS o Fogli di stile

I CSS o Fogli di stile
Telematica per le arti e lo
spettacolo
a.a. 2006/07
• Quando è nato il web il problema principale era
semplicemente quello della gestione dei contenuti, dato
anche il basso numero di utenti.
• Col passare del tempo il web si è diffuso a macchia
d'olio, gli utenti sono diventati moltissimi, e i designer
hanno cominciato a curare l'aspetto comunicativo delle
pagine e a preoccuparsi anche della loro presentazione
grafica.
• È in questo momento che si scoprono tutti i problemi
legati allo HTML e soprattutto alla sua gestione, i web
designers si sono visti costretti ad aggirare i limiti stilistici
che pone lo HTML scontrandosi però con nuovi
problemi.
• Vediamo quali sono i limiti pratici principali:
–
–
–
–
–
–
conversione del testo in immagini
uso di immagini per il controllo dello spazio bianco
uso di tabelle per l'impaginazione
scrittura di programmi in sostituzione dello HTML
difficile gestione degli aggiornamenti
modifiche da effettuare sui singoli file
• Abbiamo già avuto modo di vedere che le conoscenze
che hai acquisito fino ad ora rendono molto complesse le
pagine web, che sono poco flessibili e soprattutto creano
barriere agli utenti disabili (pensiamo ai frame).
• I Cascade Style Sheets, che in italiano significa Fogli di
stile a cascata, risolvono gran parte dei problemi di
gestione e organizzazione delle pagine web.
• Il vantaggio fondamentale che offrono i fogli di
stile rispetto allo HTML è il controllo dello stile
delle pagine web attraverso la separazione tra
contenuti, struttura e stile.
• I fogli di stile ti permettono di specificare in modo
semplice
–
–
–
–
–
la spaziatura delle righe,
i rientri,
i colori usati per il testo e gli sfondi,
il corpo e lo stile dei caratteri e
una moltitudine di altri dettagli.
•
Vediamo la gestione di una riga di testo attraverso lo HTML:
<font face=VERDANA size=2 COLOR=BLACK>questo è un testo</font>
– Attraverso questa riga di codice noi diciamo al browser di far visualizzare la
scritta "questo è un testo" con un font Verdana di dimensioni 2 e di colore nero.
•
•
Il testo e lo stile (font, dimensione e colore) con cui deve essere visualizzato
sono uniti in un'unica riga di codice.
Cosa succederebbe se dovessi cambiare il font di tutte le pagine del tuo
sito, magari composto da più di 100 pagine?
– Dovresti aprire tutti i file e modificali uno ad uno!!!
•
I fogli di stile, ti risolvono il problema perché separano lo stile dal
contenuto
•
Purtroppo uno dei limiti dei fogli di stile è che non sono compatibili con tutti
browser nonostante siano stati approvati da il W3C. I browser che offrono la
maggiore compatibilità sono Explorer (dalla versione 5.5) e Mozilla (ossia
Netscape 7). Netscape 4 ha seri problemi di gestione dei CSS.
Come utilizzare i CSS
• Ma cosa si intende per stile?
– Uno stile è un gruppo di attributi di
formattazione che definiscono l'aspetto di una
parte di testo all'interno di un singolo
documento.
• Puoi utilizzare un foglio di stile CSS per controllare molti
documenti contemporaneamente e comprendere in un
unico foglio tutti gli stili di un documento.
• Attraverso l'uso combinato di un foglio di stile CSS e uno
stile HTML hai il vantaggio di collegare più documenti.
• Di conseguenza quando vuoi aggiornare delle
caratteristiche di formattazione delle pagine web devi
solo modificare il foglio di stile e automaticamente
modificherai la formattazione di tutti documenti che
utilizzano quello stile CSS.
• La formattazione HTML manuale ha la
precedenza rispetto alla formattazione
applicata da uno stile CSS. Per fare in
modo che gli stili CSS controllino la
formattazione di un paragrafo, è
necessario eliminare tutta la formattazione
HTML manuale o gli stili HTML.
• I documenti HTML possono contenere
regole di stile direttamente al loro interno
o possono importare i fogli di stile
(esterno).
• Separare i fogli di stile dai documenti
HTML offre svariati benefici:
– puoi condividere i fogli di stile per un gran
numero di documenti (e siti).
– puoi cambiare il foglio di stile senza che ciò
richieda modifiche al documento.
• Possiamo dividere i fogli di stile in 3 categorie:
– fogli di stile in linea: con questo metodo puoi
utilizzare uno stile da applicare ad un singolo tag
HTML.
– fogli di stile interni: con questo metodo definisci lo
stile non per il singolo TAG, ma per tutta la pagina.
– fogli di stile esterni: con questo metodo lo stile che
vai a definire può essere utilizzato da più pagine web,
infatti la definizione viene data all'interno di un file
esterno (con estensione .css ) che viene linkato alla
pagina con un apposito costrutto.
• La sintassi che devi usare nei fogli di stile è la
seguente :
– inserisci gli attributi dentro le parentesi graffe { }
– separa gli argomenti consecutivi dal segno punto e
virgola (;) invece che dalla virgola
– usa i due punti (:) al posto del segno uguale (=)
– separa con un trattino (-) gli attributi composti da piu'
termini
• Quando un attributo è considerato proprieta' di
un oggetto eliminalo e trasforma da minuscole in
maiuscole le iniziali dei termini (per esempio:
font-style diventa fontStyle)
• Per inserire i fogli di stile su una pagina
html bisogna inserire tra i TAG <head> il
TAG <style> in questo modo :
<head> <style type="text/css">
...
</stile> </head>
Come definire uno “stile”
Si possono utilizzare gli attributi delle tag:
<p align=”center”><font color=“#3399CC”>testo</p>
Un semplice stile può essere definito anche
all’interno di una tag con il parametro STYLE
<p style=”text-align: center;color:#3399CC”>testo</p>
STILE IN LINEA
CSS in HTML
Il foglio di stile viene definito con la tag <STYLE>, che deve trovare posto
nell’intestazione (head) del documento, nella seguente maniera:
<head>
…
>>>
<style type=”text/css”>
<!-…
STILE INTERNO
(definizione dei vari stili)
…
-->
>>>
</style>
…
</head>
Subito dopo la tag <style> viene inserita la parte iniziale della tag di
commento (<!--) , allo scopo di nascondere la definizione degli stili ai
vecchi browser che non li supportano. Per lo stesso motivo il commento
viene chiuso prima della tag </style>.
Esempio
Definiamo l’allineamento del testo al centro tramite la tag <style>:
<style type=”text/css”>
.centrato {test-align: center; color: #3399CC}
</style>
Abbiamo definito uno stile chiamato centrato.
Il punto che precede la parola “centrato” è obbligatorio per gli stili definiti
dall’utente. All’interno delle parentesi graffe sono definite le
caratteristiche dello stile separate da punto e virgola.
Ogni stile così definito viene chiamato regola.
Per applicare al testo lo stile così definito possiamo usare il parametro
class all’interno di una tag da applicare al testo. Per esempio:
<p class=”centrato”>testo</p>
Esempio
• Possiamo anche modificare le proprietà
predefinite delle tag HTML
<style type=”text/css”>
p {text-align:center; color:#3399CC;}
</style>
Ogni volta che sarà utilizzata la tag <p> avrà
queste caratteristiche.
In questo caso il nome dello stile è la tag HTML.
Classificazione dei CSS
I fogli di stile possono essere divisi in:
• Stili in linea: non sono vantaggiosi, sono applicati
elemento per elemento come gli attributi HTML.
(attributo style)
• Stili Interni: definisce gli stili di tutta la pagina, sono
inseriti direttamente nel documento HTML tramite
l'elemento <STYLE>. La dichiarazione va posta
all'interno della sezione <HEAD>:
• Stili Esterni: definisce gli stili di più pagine, è
unfoglio di stile definito in un file separato dal
documento con estensione .css e viene utilizzato
nell’head tramite il tag LINK
STILI ESTERNI
<link href="stile.css" type="text/css" rel="stylesheet" />
L'elemento <LINK> presenta una serie di attributi
OBBLIGATORI di cui è importante spiegare significato e
funzione:
• 1. href: serve a definire l'URL assoluto o relativo del
foglio di stile.
• 2. type: identifica il tipo di dati da collegare. Per i CSS
l'unico valore possibile è text/css.
• 3. rel: descrive il tipo di relazione tra il documento e il file
collegato. Per i CSS due sono i valori possibili:
stylesheet e alternate stylesheet.
Proprietà
Le proprietà che possono essere definite nei
fogli di stile sono molteplici e di vario tipo.
– Allineamento del testo;
– Controllo dei colori e immagini di sfondo;
– Font;
– Bordi e margini.
Allineamento del testo
Allineamento del testo
Proprietà
Parametri
significato
letter-spacing
Un numero in diverse unità di misura.
Spaziatura fra le lettere
text-decoration
Underline, overline, blink, line-through,
none.
Permette di creare testo sottolineato o barrato
o con linee sopra di esso o intermittente.
vertical-align
Sub, super, baseline, text-top, middle,
bottom, text-bottom.
Allineamento verticale di elementi sulla stessa
riga.
Left, right, center, justify.
Allineamento orizzontale.
Capitalize, uppercase, lowercase.
Trasforma le lettere in maiuscolo, minuscolo o
rende maiuscola solo la prima lettera
della parola.
text-indent
Un numero in diverse unità di misura.
Rientro di un paragrafo.
line-height
Un numero in diverse unità di misura.
Altezza di un elemento, come una riga di testo
(spazio fra due righe).
text-align
text-transform
Il parametro text-decoration è utile nel caso si voglia eliminare la riga di sottolineatura che compare in una
parola linkata, come nel seguente esempio:
<a href=”pagina.htm” style=”text-decoration: none”>testo linkato</a>
Colori, immagini e sfondo
Colori e immagini di sfondo
Proprietà
Parametri
significato
Color
Codice o nome di un colore.
Colore del testo.
Background-color
Codice o nome di un colore
Colore da usare come sfondo.
Background-image
URL
Immagine da usare come sfondo
Background-attachment
Fixed, scroll
Posizione fissa oppure scorrevole, rispetto
alla finestra del browser, dell’immagine
di sfondo.
Backgound-position
Numeri in diverse unità di misura.
Posizione dell’immagine di sfondo
Background-repeat
Repeat, no-repeat, repeat-x, repeat-y
Ripetizione dell’immagine di sfondo
-Quando viene definita un’immagine di sfondo, se è più piccola dell’elemento a cui è applicata,
viene ripetuta fino a riempire completamente l’elemento. I CSS consentono di definire se, e in
quale maniera, l’immagine debba essere ripetuta.
-Se spostiamo le scroll bars, normalmente l’immagine di sfondo si sposta all’interno della finestra
del browser. Con i CSS l’immagine può rimanere fissa se si usa la proprietà backgroundattachment.
background
• Nel caso che si debbano definire diverse proprietà il cui
nome inizia con “background”, si può usare anche la
proprietà background, che permette di impostare in
modo rapido tutti gli attributi.
Ad esempio, la seguente definizione di stile:
.stile {background-attachment: fixed; background-color:
#9999FF; background-repeat: no-repeat}
può essere fatta in forma abbreviata anche in altro modo:
.stile {background: attachment: fixed #9999FF no-repeat}
Font
Gestione dei font
Proprietà
Parametri
significato
font-family
Nome di uno o più font (separati dalla virgola)
Il font da utilizzare
font-style
Normal, italic, oblique
Stile del font.
font-variant
Normal o small-caps
Normale
o
lettere
maiuscoletto.
font-weight
Normal, bold, bolder, lighter oppure un numero
da 100 a 900
Specifica lo spessore dei caratteri
font-size
Numero in diverse unità di misura
Dimensione dei font
minuscole
in
Con le tags dell’HTML la grandezza del font non può essere definita in modo preciso.
La grandezza di default (3) è solo la grandezza che viene definita nelle impostazioni del
browser e può essere modificata da menù. Se la grandezza del font definita nel CSS è
espressa in pixel, questo numero corrisponde al corpo del font e non può essere
modificato tramite le impostazioni.
Font
Per impostare in maniera rapida diverse
proprietà del font, può essere utilizzata la
proprietà font, come nel seguente esempio:
.provafont {font: italic 12px Arial, Helvetica, sans-serif}
equivalente a:
.provafont {font-family: Arial, Helvetica, sans-serif; font-size:
12px; font-style: italic}
Bordi e margini
Bordi e margini
Proprietà
parametri
significato
margin-top
margin-bottom
margin-left
margin-right
Numero in diverse unità di misura.
Margini dell’elemento. Spesso vengono
applicati ad una cella della tabella o
all’intero documento.
Margin
Numero in diverse unità di misura.
Valore unico per tutti e quattro i margini di
cui sopra.
Width
Numero in diverse unità di misura.
Larghezza dell’elemento
Height
Numero in diverse unità di misura.
Altezza dell’elemento
Float
No, left, right
Il blocco si dispone attorno ad un elemento.
Clear
No, left, right
Il blocco è libero di spostarsi.
Bordi e margini