Introduzione - Tutorial sui CSS - Tutorial sui CSS Lezione 1: Cosa sono i CSS?
←
→
Trascrizione del contenuto della pagina
Se il tuo browser non visualizza correttamente la pagina, ti preghiamo di leggere il contenuto della pagina quaggiù
Introduzione - Tutorial sui CSS
I Cascading Style Sheets (CSS) sono un fantastico strumento per aggiungere
layout al tuo sito web. Possono farti risparmiare un sacco di tempo e ti
permettono di progettare i tuoi siti web in un modo completamente nuovo. I CSS
sono un obbligo per tutti quelli che vogliono lavorare con i siti web.
Questo tutorial ti introdurrà i CSS in sole poche ore. E' semplice da capire e ti
insegnerà tutte le tecniche sofisticate.
Imparare i CSS è divertente. Mentre andrai avanti con il tutorial, ricordati di
lasciarti tempo sufficiente per poter sperimentare da solo quello che imparerai in ogni lezione.
Per usare i CSS necessiti di una base di HTML. Se non sei familiare con l'HTML, per favore
prima di andare avanti con i CSS, segui il tutorial sull'HTML.
Quale software mi serve?
Per favore evita di usare software come FrontPage, DreamWeaver o Word con questo tutorial.
Software più sofisticati non ti aiuteranno ad imparare i CSS. Piuttosto ti limiteranno e faranno
scendere significativamente la tua curva di apprendimento.
Tutto quello di cui hai bisogno è un editor di testo semplice e gratutito.
Per esempio, con Microsoft Windows viene installato anche un programma chiamato Notepad.
Normalmente è posizionato sotto Accessori nel menu Programmi di Avvio. Alternativamente puoi
usare un editor simile come Pico per Linux o Simple Text per Macintosh.
Un semplice editor di testo è l'ideale per imparare l'HTML e i CSS perchè non compromette o
cambia il codice che stai scrivendo. In questo modo i tuoi successi e i tuoi errori possono essere
attributi solo a te stesso - non al software.
Puoi usare qualsiasi browser per questo tutorial . Ti consigliamo di aggiornare il tuo browser in
modo da poter usare sempre l'ultima versione.
Tutto quello che ti serve è un browser e un editor di testo.
Iniziamo!
Lezione 1: Cosa sono i CSS?
Forse hai già sentito parlare dei CSS senza realmente sapere cosa fossero. In questa lezione
imparerai qualcosa sui CSS e su cosa farci.
CSS è l'acronimo di Cascading Style Sheets (in italiano Fogli di stile).Cosa posso fare con i CSS?
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. Aspetta e vedrai!
L'HTML può essere stra-usato per aggiungere layout ai siti web. Ma i CSS offrono molte più
opzioni, accurate e sofisticate. Oggi i CSS sono supportati da tutti i browser.
Dopo sole poche lezioni di questo tutorial sarai capace di fare il tuo foglio di stile usando i CSS in
modo da dare al tuo sito web un nuovo e grandioso aspetto.
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.
Va bene, sembra un po' troppo tecnico e confuso, ma per favore continua a leggere. Molto presto ne
capirai il senso.
Indietro nel tempo, quando Madonna era una vergine e un tipo di nome Tim Berners Lee aveva
inventato il World Wide Web, solo 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 e .
Quando il web ha cominciato a diventare popolare, i designer hanno iniziato a cercare alternative
per aggiungere layout ad un documento online. Per far fronte alla domanda, i produttori di browser
(a quel tempo Netscape e Microsoft) inventarono nuovi tag HTML come per esempio ,
diverso dai tag HTML originali in quanto definisce il layout e non la struttura.
Questo portò a situazioni in cui tag originari di struttura come veniva abbondantemente
usati per fare il layout delle pagine invece che per aggiungere struttura al testo. Molti altri tipi di
nuovi tag, come venivano supportati solo da alcuni tipi di browser. "Per vedere queste
pagine hai bisogno del browser X" era diventato uno slogan comune sui siti web.
I CSS sono stati inventati per rimediare a questa situazione, fornendo ai web designer opportunità
sofisticate per la progettazione del layout che fossero supportate da tutti i browser. Allo stesso
tempo la separazione dello stile di presentazione di un documento dal contenuto del documento,
facilita molto il mantenimento dei siti web.
Quali benefici avrò con i CSS?
I CSS sono stati una rivoluzione nel mondo del web design. 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 grande numero di tecniche avanzate e sofisticate.
Nella prossima lezione ci avvicineremo di più al funzionamento dei CSS e a come puoi iniziare ad
utilizzarli.
Lezione 2: Come funzionano i CSS?
In questa lezione imparerai a fare il tuo primo foglio di stile. Imparerai le basi del Modello CSS e il
codice che ci serve per usare i CSS in un documento HTML.
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.
La sintassi di base dei CSS
Diciamo che vogliamo un bel colore rosso come sfondo della pagina web:
Usando solo l' HTML avremmo fatto in questo modo:
Lo stesso risultato con i CSS si ottiene così:
body {background-color: #FF0000;}
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:Ma dove metti il codice CSS? Questo è quello che vedremo esattamente fra un attimo.
Applicare i CSS ad un documento HTML
Ci sono tre modi con cui puoi applicare i CSS ad un documento HTML, e sono tutti illustrati di
seguito. Ti raccomandiamo di focalizzarti sul terzo metodo, cioè l'esterno.
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:
EsempioQuesto è una pagina rossa
Method 2: Interno (il tag style)
Un altro modo per includere il codice CSS è quello di usare il tag HTML . Per esempio in
questo modo:
Esempio
body{background-color: #FF0000;”}
Questo è una pagina rossa
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. In tutto questo tutorial useremo questo metodo per i nostri esempi.
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.
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: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:
Nota come il percorso per arrivare al tuo foglio di stile viene indicato usando l'attributo href.
La linea di codice deve essere inserita nella sezione header del codice HTML, cioè tra i tag
e , in questo modo:
il mio documento
…......
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.
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 pertutti i 100 documenti HTML. Usando i CSS il cambiamento può essere fatto in pochi secondi solo
cambiando un codice nel foglio di stile.
Mettiamo in pratica quello che abbiamo appena imparato.
Prova da solo
Apri Notepad (o qualsiasi altro editor di testo) e crea due file - un file HTML e un file CSS - con
questi contenuti:
default.htm
il mio documento
Il mio primo foglio di stile
style.css
body{
background-color: #FF0000;
}
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. Congratulazioni! Hai
fatto il tuo primo foglio di stile!
Corri alla prossima lezione dove vedremo alcune delle proprietà dei CSS.Lezione 3: 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
Colore di primo piano: la proprietà 'color'
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 . Il codice sotto definisce il colore rosso dell'elemento .
h1{
color: #ff0000;
}
I colori possono essere inseriti in valore esadecimale come nell'esempio sopra, o puoi usare il nome
del colore in inglese ("red") o il suo valore in rgb (rgb(255,0,0)).
La proprietà 'background-color'
La proprietà background-color descrive il colore di sfondo degl elementi.
L'elemento 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 .
Il colore di sfondo può essere applicato anche ad altri elementi compresi i titoli e il testo.
Nell'esempio sotto sono stati applicati diversi colori di sfondo agli elementi e .body{
backgroud-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804
}
Nota che abbiamo applicato due proprietà ad separandole con un punto e virgola.
Immagini di sfondo [background-image]
La proprietà CSS background-image viene usata per inserire una immagine di sfondo.
Come esempio di immagine di sfondo abbiamo usato la farfalla sotto. Puoi scaricare questa
immagine in modo da poterla usare sul tuo computer (fai click con il tasto destro del mouse
sull'immagine e scegli "salva immagine come"), o puoi usare un'altra immagine che ti piace
inserire.
Per inserire l'immagine della farfalla come immagine di sfondo di una pagina web applica
semplicemente la proprietà background-image al e specifica la posizione dell'immagine.
body {
background-color: #FFCC66;
background-image: url (“butterfly.gif”);
}
h1 {
color: # 990000;
background-color: #FC9804;}
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").
Immagini di sfondo ripetute [background-repeat]
Nell'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.
La tabella sotto sottolinea i quattro diversi valori che può assumere background-repeat.
Valore Descrizione Esempio
Background-repeat: Visualizza
L'immagine viene ripetuta orizzontalmente
repeat-x l'esempio
background-repeat: Visualizza
L'immagine viene ripetuta verticalmente
repeat-y l'esempio
background-repeat: L'immagine viene ripetuta sia Visualizza
repeat orizzontalmente che verticalmente l'esempio
background-repeat: no- Visualizza
L'immagine non viene ripetuta
repeat l'esempio
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;
}
Immagini di sfondo bloccate [background-attachment]
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.
La tabella sotto sottolinea i due valori che può avere background-attachment. Fai click sugli
esempi per vedere le differenze fra scroll e fixed.
Valore Descrizione Esempio
Background-attachment: L'immagine si muove con la pagina - Visualizza
scroll non bloccata l'esempio
Background-attachment: Visualizza
L'immagine è bloccata
fixed l'esempio
Il 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
Immagini di sfondo posizionate [background-position]
Per 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:La tabella ti da qualche esempio.
Valore Descrizione Esempio
background-position: 2cm L'immagine è posizionata a 2 cm dalla Visualizza
2cm sinistra e a 2 cm dal basso della pagina l'esempio
background-position: 50% L'immagine è centrata ad un quarto della Visualizza
25% pagina dal basso l'esempio
background-position: top L'immagine è posizionata nell'angolo in alto Visualizza
right a destra della pagina l'esempio
Il 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;
}
• Visualizza l'esempio
Raggruppamento [background]
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;
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]
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.
Riepilogo
In questa lezione hai già imparato nuove tecniche che non sarebbero possibili usando solo l'HTML.
Il divertimento continua nella prossima lezione che esamina una gamma più ampia di possibilità
quando si usano i CSS per descrivere i font.
Lezione 4: Font
In questa lezione imparerai qualcosa sui font e su come applicarli utilizzando i CSS. Vedremo anche
come funziona il fatto che uno specifico font può essere visualizzato sul tuo sito web solo se è stato
istallato sul PC che aprirà il tuo sito. Verranno quindi descritte le seguenti proprietà CSS:
• font-family• font-style
• font-variant
• font-weight
• font-size
• font
La famiglia dei caratteri [font-family]
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.
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".
Di seguito vengono illustrate le differenze:
Quando fai la lista dei font per il tuo sito web, inizia con i font più usati e segui con alcuni font
alternativi. E' raccomandabile terminare la lista con il nome di una famiglia generica di font. In
questo modo la pagina potrà essere visualizzata con un font della stessa famiglia generica, nel caso
in cui tutti i font listati non fossero disponibili.
Un 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;}
• Visualizza l'esempio
I titoli marcati con 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.
Stile del font [font-style]
La proprietà font-style definisce lo stile normale, italico o obliquo del font scelto.
Nell'esempio sotto tutti i titoli marcati con verranno visualizzati in italico.
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font-style: italic;}
• Visualizza l'esempio
Variante del font [font-variant]
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. Confuso? Guarda questo esempio:
Se 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;}
• Visualizza l'esempio
Peso del font [font-weight]
La proprietà font-weight descrive il grado di neretto, o "di pesantezza", che dovrebbe avere ilfont. 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;}
• Visualizza l'esempio
Dimensione del font [font-size]
La 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;}
• Visualizza l'esempio
C'è una sola differenza chiave tra le quattro unità elencate sopra. Le unità 'px' e 'pt' indicano
dimensioni assolute per il font, mentre '%' e 'em' permettono all'utente di ridimensionare il font
come preferiscono. Molti utenti sono diversamente abili, anziani o semplicemente vedono poco o
hanno un monitor di qualità scadente. Per far si che il web sia accessibile a tutti, dovresti usare le
unità ridimensionabili come '%' o 'em'.
Di seguito puoi vedere come si ridimensiona un testo con Mozilla Firefox e Internet Explorer. Prova
da solo - bella caratteristica, non credi?Raggruppamento [font]
Usando 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 {
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 Riepilogo In questa lezione hai imparato alcune delle possibilità relative ai font. Ricordati che uno dei vantaggi principali nell'usare i CSS per specificare i font è quello di poter cambiare i font di tutto il sito in una volta sola, in pochi minuti. I CSS ti permettono i guadagnare tempo e ti semplificano la vita. Nella prossima lezione guarderemo il testo.
Puoi anche leggere
