Crea sito

I fogli di stile (CSS)

 

Cosa sono e perchè usarli?
Come inserli e regole generali
Personalizzare il tipo di carattere
Personalizzare lo sfondo del testo
Personalizzare il blocco del testo
Personalizzare il bordo intorno al testo

 

Se vuoi puoi usare la stella per non perdere il segno mentre segui il tutorial. Usa il mouse per muovere la stella.

star

 
Cosa sono e perchè usarli?

Una pagina web è formata fondamentalmente da due elementi: i contenuti veri e propri (tra i tag <body></body>) e la formattazione ovvero l'aspetto con cui i contenuti sono mostrati all'utente (tra i tag <head></head>).
Perchè inserire i CSS? Per semplificare la vita! Supponiamo di voler inserire un titolo in grassetto e colorato di rosso, potremmo scriverlo prima del titolo

<font color="#FF0000" style=" font-weight:bold">TITOLO</font>

supponiamo ancora di voler inserire più titoli nella stessa pagina, saremmo costretti a dover scrivere sempre lo stesso codice. Ma il problema ancora più grave si proporrebbe nel momento in cui volessimo cambiare grafica (quindi colori) al nostro blog/sito, saremmo costretti a cambiare ogni singola formattazione di ogni titolo! Assurdo! Soprattutto se stiamo parlando di un sito che contiene più pagine da dover personalizzare. Come si risolve? Con i fogli di stile. Basta assegnare una classe al nostro titolo, del tipo:

<p class="title">TITOLO</p>

e personalizzare le caratteristiche della classe "title"nei css:

.title {
color: #FF0000;
font-weight: bold;
}

in questo modo dovrete solo specificare la classe dinnanzi alla parole che ne dovranno assumere la formattazione, che verrà invece specificata nei css. In questo modo se il colore rosso non vi piace, ma lo volete blu, basta modificare nei fogli di stile e tutti i titoli si modificheranno all'unisono.

Nel tutorial che segue parleremo solo di classi e non di identificatori.

 
Come inserirli e regole generali

Come già accennato i fogli di stile vengono inseriti tra i tag <style></style>, seguendo questa struttura:

<html>
<head>
<title>Titolo Pagina Web</title>
<style type="text/css">
codice css

</style>
</head>
<body>
contenuto pagina
</body>
</html>

lo schema che si deve seguire nei fogli di stile è il seguente

selettore {
proprietà1: valore1;
proprietà2 : valore2, valore3;
}

Noterete la presenza del selettore (che specifica con un nome le caratteristiche che seguono nelle parantesi), le parentesi graffe (che contengono le caratteristiche del selettore), il punto e virgola (che segue ogni riga alla fine di ogni proprietà).
I selettori di cui ci occuperemo in questo tutorial possondo essere:

- selettori di tipo, che hanno nomi universalmente riconosciuti (come body, p, h1, h2, h3 etc)
- classi, a cui possiamo assegnare qualsiasi nome vogliamo, la cui sintassi è :

.nomeclasse {
...
}

da notare il punto che antecede il nome della classe, che verrà richiamato nel body così:

<p class="nomeclasse">testo con formattazione "nomeclasse"</p>

 

Ricordate: le parentesi graffe, i 2 punti dopo ogni tag, il punto e virgola alla fine della riga!

Ecco il codice di esempio (per capire meglio come scriverli) con tutti le proprietà che possono essere utilizzate per personalizzare il tipo di carattere:

.classe{
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: italic;
line-height: 9px;
font-weight: bolder;
font-variant: small-caps;
text-transform: capitalize;
color: #00CCFF;
text-decoration: underline;
}

dove potete così personalizzare (vi faccio notare che ciò che non vi serve potete eliminarlo)

font-family : è il tipo di carattere, quelli che si usano (perchè presenti su tutti i pc) sono:

Arial, Helvetica, sans-serif;
Times New Roman, Times, serif
Courier New, Courier, monospace
Georgia, Times New Roman, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif



font-size : è la dimesione del carattere, si può specificare in varie unità di misura, le più frequenti sono:

pixel (come nell'esempio si indica 9px/10px/11px ecc)
percentuale (100%, 90%, 80% ecc)



font-style : indica lo stile del carattere, può essere:

normal (nessun tipo di formattazione, in tal caso se non vi serve potete evitare di inserire questo tag)
italic (corsivo)
oblique (corsivo accentuato)



line-height : indica la distanza tra le righe, può assumere i seguenti valori:

normal (distanza standard, se non vi serve potete evitare di specificare questo tag)
in pixel (suggerisco minimo 9px)
in percentuale (100%, 90% ecc)



font-weight : indica lo spessore del testo:

normal (spessore standard, se non vi serve potete evitare di specificare questo tag)
bold (grassetto)
bolder (grassetto spesso)
lighter (sottile)
100, 200, 300 ecc (i valori indicano la larghezza del tratto, non va specificata unità di misura)



font-variant : variazioni del testo, assume i valori:

normal (caratteristica standard, se non vi serve potete evitare di specificare questo tag)
small-caps (scrive tutto in maiuscoletto)


text-transform : trasforma il testo immesso tra questi tag, assume valori:

capitalize (iniziale di ogni parola viene scritta in maiuscolo)
uppercase (tutte le lettere delle parole sono scritte in maiuscolo)
lowercase (tutte le lettere delle parole sono scritte in minuscolo)
none (caratteristica standard, se non vi serve potete evitare di specificare questo tag)



color : indica il colore del testo si indica il valore esagesimale del colore (preceduto da cancelletto), ad esempio:

#000000 indica il nero
#FFFFFF indca il bianco


text-decoration : da delle decorazioni al testo, può assumere i seguenti valori:

underline (sottolineato)
overline (linea sopra)
line-through (sbarrato)
blink (testo a intermittenza)
none (caratteristica standard, se non vi serve potete evitare di specificare questo tag)

 

Ecco il codice di esempio (per capire meglio come scriverli) con tutti le proprietà che possono essere utilizzate per personalizzare il tipo di carattere:

.classe{background-attachment: fixed;
background-color: #00CC00;
background-image: url(inserisci url immagine);
background-repeat: repeat;
background-position: left bottom;        
}

dove potete così personalizzare (vi faccio notare che ciò che non vi serve potete eliminarlo)

background-attachment : se si fornisce uno sfondo si può decidere se lasciarlo fisso o mobile (usato più spesso per gli sfondi dei template che non per lo sfondo del testo):

fixed (sfondo fisso)
scroll (sfondo scorrevole)

 

background-color : indica il colore dello sfondo del testo (codice esagesimale).



background-image : qui va indicato l'eventuale immagine di sfondo per il testo la dicitura è

url(LINK IMMAGINE)

background-repeat : indica come deve essere ripetuta l'eventuale immagine di sfondo, i valori che assume sono:

no-repeat (nessuna ripetizione dello sfondo)
repeat (ripetizione sfondo in tutte le direzioni)
repeat-x (ripetizione sfondo solo orrizontale)
repeat-y (ripetizione sfondo solo verticale)



background-position : la posizione dell'immagine di sfondo rispetto al testo, si possono inserire 2 valori insieme uno è la posizione orizzontale:

right
left
center
o si specifica un valore in px
l'altro è la posizione verticale:
top (in alto)
bottom (in basso)
center
o si specifica un valore in px

 

Ecco il codice di esempio (per capire meglio come scriverli) con tutti le proprietà che possono essere utilizzate per personalizzare il tipo di carattere:

.classe{letter-spacing: 5px;
text-align: left;
text-indent: 10px;
vertical-align: middle;
word-spacing: 4px;        
}

dove potete così personalizzare (vi faccio notare che ciò che non vi serve potete eliminarlo)

letter-spacing : indica lo spazio tra una lettera e l'altra, tra le tante unità di misura si possono usare i pixel.

word-spacing : indica lo spazio tra una parola e l'altra, tra le tante unità di misura si possono usare i pixel.

text-align : indica l'allineamento del testo in orizzontale, può assumere:

left (sinistra)
right (destra)
center (centrato)
justify (giustificato)



vertical-align : indica l'allineamento del testo in verticale, tra i più noti valori:

sub (pedice)
super (apice)
top (in alto)
middle (centrale)
bottom (in basso)



text-indent : indica il rientro del testo a sinistra (si può indicare in pixel)

Se volete i 4 lati uguali il codice si semplifica così:

.classe{
border: thin dotted #FF0000;        
}

dove potete così personalizzare

border : indica la presenza di un bordo, si possono specificare 3 caratteristiche insieme, larghezza, tipo, colore. Per la larghezza si può scrivere:

thin (fine)
medium (medio)
thick (spesso)
valori in pixel (1px, 2px ecc)

 

Per il tipo si può scrivere:

none (nessuno, in tal caso eliminate il tag border perchè non serve a nulla se non ad appesantire il codice inutilmente))
dotted (punteggiato)
dashed (tratteggiato)
solid (continuo)
double (doppio)
groove (incassato)
ridge (in rilievo)
inset (interno)
outset (esterno)


per il colore si indica il valore esagesimale.

se si vuole invece avere un bordo da una sola parte del testo allora si devono specificare i tag:

.classe{border-top-width: thick;
border-right-width: medium;
border-bottom-width: thin;
border-left-width: 2px;
border-top-style: dotted;
border-right-style: dashed;
border-bottom-style: solid;
border-left-style: double;
border-top-color: #FF0000;
border-right-color: #666666;
border-bottom-color: #0099CC;
border-left-color: #CCFF00;
}

dove potete così personalizzare (vi faccio notare che ciò che non vi serve potete eliminarlo)

border-righ : bordo a destra, si specifica:

border-right-width(larghezza)
border-right-style (tipo di bordo, solid/dashed ecc)
border-right-color (colore linea)



border-left : bordo a sinistra, per le specifiche vedi su.

border-top : bordo in alto, per le specifiche vedi su.

border-bottom : bordo in basso, per le specifiche vedi su.