Prof. Giuseppe ROMANO
Cascading Style Sheets (CSS)
CSS è l'acronimo di Cascading Style Sheets (in italiano
Fogli di stile)
I CSS formano un linguaggio per la definizione del layout
dei documenti HTML.
Per esempio, i CSS si occupano dei font, dei colori, dei
margini, delle linee, delle altezze, delle larghezze, delle
immagini di sfondo, del posizionamento e di molte altre
cose.
Cascading Style Sheets (CSS)
Che differenza c'è tra i CSS e l'HTML?
L'HTML viene usato per strutturare il contenuto.
I CSS vengono usati per formattare la struttura del
contenuto.
Cascading Style Sheets (CSS)
Inizialmente il linguaggio HTML veniva usato per
aggiungere struttura al testo.
Un autore poteva marcare il suo testo con la scritta
"questo è un titolo» o "questo è un paragrafo"
usando tag HTML del tipo di <h1> e <p>.
Cascading Style Sheets (CSS)
Con il passare del tempo, i web designer hanno
iniziato a cercare alternative per aggiungere layout ad
un documento online.
I CSS sono stati inventati per fornire opportunità
sofisticate per la progettazione del layout, supportate da
tutti i browser.
Allo stesso tempo la separazione dello stile di
presentazione di un documento dal contenuto del
documento, facilita molto la manutenzione dei siti web.
Cascading Style Sheets (CSS)
I benefici concreti dei CSS comprendono:
• il controllo del layout di molti documenti
contemporaneamente attraverso un unico foglio di
stile;
• un controllo più preciso del layout;
• l'applicazione di un layout diverso per ogni tipo di
media (schermo, stampa, ecc.);
• un gran numero di tecniche avanzate e sofisticate.
Cascading Style Sheets (CSS)
Molte proprietà usate nei Cascading Style Sheets (CSS)
sono simili a quelle dell'HTML.
Quindi, se hai usato l'HTML per il layout, molto
probabilmente riconoscerai facilmente la maggior parte
del codice.
Vediamo un esempio concreto.
Cascading Style Sheets (CSS)
Diciamo che vogliamo un bel colore rosso come
sfondo della pagina web:
Usando solo l' HTML avremmo fatto in questo
modo:
<body bgcolor="#FF0000">
Lo stesso risultato con i CSS si ottiene così:
body {background-color: #FF0000;}
Cascading Style Sheets (CSS) Come potrai notare, i codici dell'HTML e del CSS sono
più o meno identici. L'esempio sopra ti mostra anche il
modello fondamentale dei CSS:
Cascading Style Sheets (CSS) Ci sono tre modi con cui puoi applicare i CSS ad un documento HTML
Method 1: In-line (l'attributo style)
Un modo per applicare i CSS all'HTML è quello di usare
l'attributo style dell'HTML.
Rimanendo sull'esempio riportato sopra con lo sfondo rosso,
possiamo scrivere come segue:
<html>
<head>
<title>Esempio</title>
</head>
<body style="background-color: #FF0000;">
<p>Questa è una pagina rossa</p>
</body>
</html>
Cascading Style Sheets (CSS)
Method 2: Interno (il tag style)
Un altro modo per includere il codice CSS è quello
di usare il tag HTML <style>.
Per esempio in questo modo:
<html>
<head>
<title>Esempio</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Questa è una pagina rossa</p>
</body>
</html>
Cascading Style Sheets (CSS)
Method 3: Esterno (link ad un foglio di stile)
Il metodo raccomandato è quello di fare un link
a quello che viene chiamato un foglio di stile
esterno.
Un foglio di stile esterno è semplicemente un file di
testo con estensione .css.
Come con tutti gli altri file, puoi mettere il tuo foglio
di stile sul server web o sul disco fisso.
Cascading Style Sheets (CSS)
Per esempio, supponiamo che il tuo foglio di stile si chiami style.css ed è
stato salvato in una cartella chiamata style.
La situazione potrebbe essere illustrata come segue:
Cascading Style Sheets (CSS) Il trucco è creare un link al foglio di stile (style.css)
dal documento HTML (default.htm).
Questo link potrebbe essere creato con una linea di
codice HTML:
<link rel="stylesheet" type="text/css" href="style/style.css" />
Nota come il percorso per arrivare al tuo foglio di
stile viene indicato usando l'attributo href.
Cascading Style Sheets (CSS)
La linea di codice deve essere inserita nella
sezione header del codice HTML, cioè tra i
tag <head> e </head>, in questo modo:
<html>
<head>
<title>Il mio documento</title>
<link rel="stylesheet" type="text/css"
href="style/style.css" />
</head>
<body>
...
Cascading Style Sheets (CSS) Questo link dice al browser che per visualizzare il file HTML,
dovrebbe usare il layout come descritto nel file CSS.
La cosa realmente intelligente è che più documenti HTML
possono essere linkati allo stesso foglio di stile. In altre parole, un
file CSS può essere usato per controllare il layout di più
documenti HTML contemporaneamente.
Cascading Style Sheets (CSS)
Questa tecnica ti permette di guadagnare un sacco di
lavoro.
Se per esempio vuoi cambiare il colore di sfondo di un
sito web di 100 pagine, un foglio di stile ti può salvare
dal farlo manualmente per tutti i 100 documenti
HTML.
Usando i CSS il cambiamento può essere fatto in
pochi secondi solo cambiando un codice nel foglio di
stile.
Cascading Style Sheets (CSS) Iniziamo con il primo esercizio
Apri Notepad (o qualsiasi altro editor di testo) e
crea due file - un file HTML e un file CSS - con
questi contenuti:
default.htm<html>
<head>
<title>Il mio documento</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Il mio primo foglio di stile</h1>
</body>
</html>
Cascading Style Sheets (CSS)
style.css
body
{
background-color: #FF0000;
}
Cascading Style Sheets (CSS)
Adesso metti i due file nella stessa cartella.
Ricordati di salvare i file con la giusta estensione
(rispettivamente ".htm" e ".css")
Dal tuo browser apri default.htm e osserva la tua pagina
con lo sfondo rosso.
Colori e sfondi
Colori e sfondi
In questa lezione imparerai come applicare i colori e gli
sfondi al tuo sito web.
Vedremo anche alcuni metodi avanzati per posizionare e
controllare le immagini di sfondo. Spiegheremo quindi le
seguenti proprietà CSS:
color
background-color
background-image
background-repeat
background-attachment
background-position
background
Colori e sfondi
La proprietà color descrive il colore di primo piano di un elemento.
Per esempio, immagina di volere tutti i titoli del documento di colore rosso
scuro.
I titoli sono tutti marcati con l'elemento HTML <h1>.
Il codice sotto definisce il colore rosso dell'elemento <h1>.
h1 {
color: #ff0000;
}
Colori e sfondi
La proprietà background-color descrive il colore di
sfondo degli elementi.
L'elemento <body> contiene tutto il contenuto di un
documento HTML.
Per questo motivo, per cambiare il colore di sfondo di tutta
la pagina, dovremmo applicare la proprietà background-
color all'elemento <body>.
Il colore di sfondo può essere applicato anche ad altri
elementi compresi i titoli e il testo.
Colori e sfondi
Nell'esempio sotto sono stati applicati diversi colori
di sfondo agli elementi <body> e <h1>.
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Colori e sfondi
Colori e sfondi
Nell'esempio sotto sono stati applicati diversi
colori di sfondo agli elementi <body> e <h1>.
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Colori e sfondi
Colori e sfondi
La proprietà CSS background-image viene usata per
inserire una immagine di sfondo.
Come esempio di immagine di
sfondo abbiamo usato la farfalla
sotto.
Colori e sfondi
Per inserire l'immagine della farfalla come immagine di
sfondo di una pagina web applica semplicemente la
proprietà background-image al <body> e specifica la
posizione dell'immagine.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
Colori e sfondi
Colori e sfondi
NB: Nota come abbiamo specificato l'indirizzo
dell'immagine come url("butterfly.gif").
Questo significa che l'immagine è posizionata nella stessa
cartella del foglio di stile.
Puoi riferti anche ad immagini in altre cartelle
usando url("../images/butterfly.gif") o anche su Internet
indicando l'indirizzo completo del
file: url("http://www.html.net/butterfly.gif").
Colori e sfondiNell'esempio sopra hai notato che per default la farfalla viene
ripetuta sia orizzontalmente che verticalmente in modo da coprire
tutto lo schermo?
La proprietà background-repeat controlla questo comportamento.
Valore Descrizione
Background-repeat: repeat-xL'immagine viene ripetuta
orizzontalmente
background-repeat: repeat-yL'immagine viene ripetuta
verticalmente
background-repeat: repeatL'imagine viene ripetuta sia
orizzontalmente che verticalmente
background-repeat: no-repeat L'immagine non viene ripetuta
Colori e sfondi
Per esempio, per evitare ripetizione di un'immagine di
sfondo il codice dovrebbe apparire come questo:
body {
background-color: #FFCC66;
background-image:
url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Colori e sfondi
Colori e sfondi
La proprietà background-attachment specifica se
una figura di sfondo è fissa o si muove insieme
all'elemento che la contiene.
Una immagine di sfondo fissa non si muoverà con il
testo quando il lettore scorrerà la pagina, mentre una
immagine di sfondo non bloccata si muoverà insieme al
testo della pagina web.
Colori e sfondi
La tabella sotto sottolina i due valori che può
avere background-attachment.
Valore Descrizione Esempio
Background-
attachment: scroll
L'immagine si
muove con la pagina
- non bloccata
Visualizza
l'esempio
Background-
attachment: fixed
L'immagine è
bloccata
Visualizza
l'esempio
Colori e sfondiIl codice sotto, per esempio, blocca l'immagine di sfondo.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Visualizza l'esempio
Colori e sfondiPer default una immagine di sfondo verrà posizionata
nell'angolo in alto a sinistra dello schermo.
La proprietà background-position ti permette di cambiare il
default e posizionare l'immagine di sfondo in qualsiasi altro posto
dello schermo che preferisci.
Ci sono molti modi per stabilire i valori di background-position.
Tutti comunque stabiliscono un insieme di coordinate.
Per esempio, il valore '100px 200px' posiziona l'immagine a 100px
dal lato sinistro e a 200px dal bordo superiore della finestra del
browser.
Le coordinate possono essere indicate come percentuale delle
dimensioni dello schermo, unità fisse (pixel, centimetri, ecc.) o puoi
usare le parole inglesi top, bottom, center, left e right.
Il modello sotto illustra meglio il sistema:
Colori e sfondi
Colori e sfondi
La tabella ti da qualche esempio
Valore Descrizione Esempio
background-position:
2cm 2cm
L'immagine è
posizionata a 2 cm
dalla sinistra e a 2 cm
dal basso della pagina
Visualizza l'esempio
background-position:
50% 25%
L'immagine è centrata
ad un quarto della
pagina dal basso
Visualizza l'esempio
background-position:
top right
L'immagine è
posizionata nell'angolo
in alto a destra della
pagina
Visualizza l'esempio
Colori e sfondiIl codice di esempio sotto posiziona l'immagine
di sfondo nell'angolo in basso a destra:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Colori e sfondi
Colori e sfondi
La proprietà background è una scorciatoia per tutte le
proprietà di sfondo che abbiamo elencato in questa lezione.
Con la proprietà background puoi raggruppare molte proprietà
insieme e scrivere così il tuo foglio di stile in una maniera
ancora più corta e più facile da leggere.
Guarda per esempio queste cinque linee:
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
Colori e sfondi
Usando background puoi ottenere lo stesso risultato con
solo una linea di codice:
background: #FFCC66 url("butterfly.gif") no-repeat fixed
right bottom;
Di seguito l'ordine con cui devono essere inserite le
proprietà:
[background-color] | [background-image] | [background-
repeat] | [background-attachment] | [background-position]
Colori e sfondi
Se una proprietà non viene definita verrà
automaticamente posta al suo valore di default.
Per esempio, background-attachment e background-
position non vengono definite nell'esempio:
background: #FFCC66 url("butterfly.gif") no-repeat;
Queste due proprietà, che non sono state specificate,
verranno soltanto definite con il loro valore di default che,
come abbiamo visto, è scroll e top left.
FontIn questa lezione imparerai qualcosa sui font e
su come applicarli utilizzando i CSS.
Verranno quindi descritte le seguenti proprietà
CSS:
font-family
font-style
font-variant
font-weight
font-size
font
Font
La proprietà font-family viene usata per definire le priorità
per la lista dei caratteri da usare per visualizzare un elemento
o una pagina web.
Se il primo font della lista non è stato istallato sul computer
che accede al sito, allora verrà provato il secondo font della
lista e così via finchè non verrà trovato un fonte disponibile.
Font
Ci sono due tipi di nomi per catalogare i font:
i nomi della famiglia e le famiglie generiche.
I due termini vengono spiegati sotto.
Nome della famiglia
Esempi di nomi della famiglia (conosciuto spesso con il termine
"font") possono essere per esempio "Arial", "Times New
Roman" o "Tahoma".
Famiglia generica
Le famiglie generiche possono essere descritte meglio come
gruppi di nomi di famiglie con caratteristiche uniformi.
Un esempio è il sans-serif (in italiano, senza grazie), che è la
collezione dei font senza le cosiddette grazie, o "piedi".
Font
FontUn esempio di lista di priorità dei font potrebbe essere
fatta così:
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
I titoli marcati con <h1> verranno visualizzati con il font
"Arial".
Se questo font non è stato istallato sul computer dell'utente,
allora verrà utilizzato al suo posto il font "Verdana".
Se entrambi questi font non sono disponibili, i titoli verranno
visualizzati utilizzando un font della famiglia sans-serif.
Nota come il nome del font "Times New Roman" contiene
degli spazi e per questo motivo viene messo tra doppi apici.
Font
La proprietà font-style definisce lo
stile normale, italico o obliquo del font scelto.
Nell'esempio sotto tutti i titoli marcati
con <h2> verranno visualizzati in italico.
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;
font-style: italic;}
Font
La proprietà font-variant viene usata per scegliere
tra le varianti normal o small-caps di un font.
Un font small-caps è un font che usa tutte lettere
maiuscole di dimensioni leggermente più piccole, al
posto delle lettere minuscole.
FontSe viene assegnato a font-variant il valore small-caps e
non è disponibile nessun font small-caps il browser
molto probabilmente mostrerà il testo tutto maiuscolo.
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
FontLa proprietà font-weight descrive il grado di neretto,
o "di pesantezza", che dovrebbe avere il font.
Un font può essere sia normal che bold.
Alcuni browser supportano anche l'uso di una serie di
numeri tra 100 e 900 (in centinaia) per descrivere la
pesantezza di un font.
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-
weight: bold;}
FontLa dimensione di un font viene definita con la proprietà font-size.
Per descrivere le dimensioni di un font si può scegliere tra diverse unità
di misura (per esempio, pixel e percentuali).
In questo tutorial ci focalizzeremo sulle unità più utilizzate comunemente
e più appropriate, mostrate negli esempi:
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
Le unità 'px' e 'pt' indicano dimensioni assolute per il
font, mentre '%' e 'em' permettono all'utente di
ridimensionare il font come preferiscono.
Font
FontIn linea di massima possiamo dire che ogni unità di misura ammessa
nei CSS ha una destinazione d'uso precisa:
pt
I punti (pt) sono l'unità di misura utilizzata nei processi di stampa e
nei software (come ad esempio Microsoft Word) destinati alla
creazione di documenti stampabili.
Le stampanti, infatti, non "ragionano" in pixel ma in punti.
Se mandiamo in stampa un testo formattato in pixel la stampante
provvederà autonomamente a convertire i pixel in punti. Se state
predisponendo un foglio di stile per la stampa, quindi, il
suggerimento è di utilizzare pt per avere un risultato più preciso.
px
I pixel (px) sono, ovviamente, l'unità di misura dei monitor o,
più in generale, dei display (la cui risoluzione è data dal
numero di pixel della linea orizzontale per quella verticale).
Font
Em
L'em, a differenza di pt e px, è un'unità di misura
relativa (cioè non fissa).
Per utilizzare questa unità di misura si definisce nel
body del documento la dimensione di default dei
caratteri utilizzando i pixel.
Dopodiché, mediante em, vengono definiti i singoli
elementi della pagina.
L'unità di misura così definita (in "em") sarà relativa
alla dimensione dei caratteri di default.
In sostanza l'em è una specie di moltiplicatore della
dimensione di default.
Font
font-size: 1.5 em
avrà, in pratica, un font di 15 pixel sulla base
di questo semplice calcolo:
10px * 1.5 = 15px
facciamo un esempio: se la dimensione dei caratteri di
default è 10 pixel, un paragrafo avente
FontUsando la proprietà font è possibile raggruppare tutte le diverse
proprietà dei font in una sola.
Per esempio immagina queste quattro linee di codice usate per
descrivere le proprietà del font per il tag <p>:
p { font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Usando la proprietà per il raggruppamento il codice sarà
semplificato:
p { font: italic bold 30px arial, sans-serif;
}
L'ordine dei valori per font è:
font-style | font-variant | font-weight | font-size | font-family