docIntroduzione ai fogli di stile
download 
Reclamo Transcript
Introduzione ai fogli di stile
I fogli di stile.
Argomenti trattati:
- La formattazione con foglio di stile interno:
Come dichiarare lo stile di una pagina web all'interno del suo codice.
- Ereditarietà e selettori contestuali:
Come utilizzare alcune proprietà legate agli stili dichiarati utilizzando tag di codice
HTML detti selettori.
- La formattazione con foglio di stile esterno:
Come realizzare e collegare un file con codice di stile ad una pagina web.
Introduzione
Il sistema di contrassegno dell'HTML, i tag, ha dei limiti che potrebbero apparire marginali
agli occhi di chi si avvicina per la prima volta al metalinguaggio ma risultano fastidiosi e
limitanti per chi mette al primo posto la parte grafica di un sito.
Posizionare un immagine, una porzione di testo o quant'altro ha bisogno di una
determinata formattazione risulta semplice se si utilizza una tabella (le tabelle vengono
utilizzate per questo scopo nella quasi totalità dei casi), ma il problema si pone quando
bisogna risolvere il problema della separazione tra stile, formattazione e struttura.
La formattazione con foglio di stile interno
Poniamoci il problema di dover scrivere del testo con formattazioni diverse in molte parti di
una pagina di un sito, del tipo come in esempio:
<font face="Arial" size=”3”><i>Testo della pagina</i></font><p>
<font face="Times New Romans"><b>Testo della pagina</b></font><p>
<font face="Verdana"><s>Testo della pagina</s></font>
Dal codice sopra si deduce che la scritta “Testo della pagina” verrà scritto tre volte in tre
formattazioni differenti: in Arial corsivo, in Times New Romans grassetto e in Verdana
sottolineato.
Per risolvere il problema con un foglio di stile riscriviamo il codice sopra come segue:
Il linguaggio HTML - prof. Maurizio Gambino | 11 I fogli di stile.
<style>
.stile1 {font-family: Arial; font-size:12; color:black}
.stile2 {font-family: Times New Romans; font-size:12; color:black}
.stile3 {font-family: Verdana; font-size:12; color:black}
</style>
<p class=stile1>Testo della pagina</p>
<p class=stile2>Testo della pagina</p>
<p class=stile3>Testo della pagina</p>
Come si può notare dall'esempio il foglio di stile in una pagina web si dichiara attraverso il
tag <STYLE>; per definire i singoli stili da utilizzare per la formattazione del testo
scriviamo il nome da dare alla stessa, preceduta dal segno . (punto), seguito dai valori
racchiusi tra parentesi graffe.
Per utilizzare lo stile dichiarato basta inserire l'attributo CLASS all'interno di un tag <p> nel
punto della pagina dove si vuole formattare il testo.
Ereditarietà e selettori contestuali
L'ereditarietà consiste del fatto che una proprietà di un foglio di stile viene ereditata da un
tag, se racchiuso nel testo formattato con un determinato stile. Ad esempio:
<html><head>
<title>Esempio di stile con tag interno</title>
<style>
.stile1 {font-family: Arial; color:green}
</style>
</head>
<p class=stile1>Questo testo è in Arial verde. <br>
<i>Questo è in corsivo ma conserva lo stile1, Arial verde, dato che il tag è stato
dichiarato all'interno di una formattazione di stile</i>.
<br> Adesso è di nuovo in solo stile1</p>
Un'altra buona caratteristica dei fogli di stile consiste nella contestualità: un tag se
associato ad una dichiarazione di stile ne eredita le proprietà e ne modifica altre, se
presenti in entrambe.
Con un esempio pratico si può facilmente comprendere questa funzione.
Il linguaggio HTML - prof. Maurizio Gambino | 11 I fogli di stile.
<html><head>
<title>Esempio di stile con contestualità</title>
<style>
.stile1 {font-family: Arial; color:green}
.stile2 {font-family: Verdana; color:red}
.stile1 s {color:blue}
.stile2 i {color:green}
</style>
</head>
<p class=stile1>Questo testo è in Arial verde. <s>Invece questo è sempre in Arial,
dato che eredita lo stile1, ma sottolinealo e di colore blue</s></p>
<p class=stile2>Analogamente questo testo è in Verdana rosso. <i>Invece questo è
sempre in Verdana, come visto prima, ma in corsivo e di colore verde.</i></p>
Dall'esempio sopra si intuiscono facilmente le proprietà della funzione contestuale.
Unico vincolo del foglio di stile dichiarato all'interno di una pagina web è che può essere
utilizzato soltanto per quella pagina, vincolando di fatto la formattazione di un intero sito.
Fogli di stile esterni
I fogli di stile esterni presentano dei vantaggi difficilmente eguagliabili.
Innanzitutto sono universalmente validi per qualsiasi pagina voglia essere associata ad
essi, quindi vi è un facile controllo topografico: ciò che viene modificato nel foglio di stile si
ripercuote a tutti i documenti a cui è associato, risparmiando tempo, fatica e sicuri errori
dovuti ad un controllo manuale; inoltre come visto l'utilizzo di un foglio di stile consente un
notevole risparmio di spazio dovuto alla separazione tra contenuto e stile.
La creazione di un foglio di stile esterno richiede semplicemente un qualsiasi editor di
testo per scrivere il codice per poi salvarlo nel formato .css.
L'acronimo CSS sta per Cascading Style Sheet (Foglio di Stile a Cascata).
body { font-family: Georgia; font-size: 13px; color: #000000 }
p { font-size: 20px; }
a:link { color: #000000; }
a:active { color: #000000; }
a:visited { color: #000000; }
a:hover { text-decoration: none; color: #660000; }
#header {
width: 100%;
height: 50px;
background: #660000;
text-align: center;
font-size: 20px;
color: #FFFFFF;
}
Il linguaggio HTML - prof. Maurizio Gambino | 11 I fogli di stile.
#home {
width: 100%;
height: 400px;
background: #990000;
text-align: center;
font-size: 20px;
color: #FFFFFF;
}
#link {
width: 100%;
height: 400px;
}
#link a {
width: 100%;
height: 30px;
text-decoration: none;
font-size: 100%;
color: #999999;
}
#link a:hover {
background: #660000;
width: 100%;
height: 30px;
}
hr { border-bottom: 3px solid #FF0000; }
Analizzando il listato sopra citato possiamo distinguere
Salveremo il seguente listato con il nome di miofoglio.css.
Per utilizzare il foglio appena creato basta inserire nell'intestazione di ogni pagina web che
andremo a creare la seguente dichiarazione:
<link href="miofoglio.css" rel="stylesheet" type="text/css" />
In questo esempio un po' più complesso possiamo notare una diversa tipologia di
dichiarazione di stile per i singoli elementi che comporranno la pagina.
Per definire lo stile di una porzione di pagina, partendo da sinistra, si utilizza il tag <div
seguito dall'attributo id, il cui valore è il nome dichiarato dello stile.
Esempio di pagina con lo stile sopra dichiarato:
<html><head>
<title>Pagina con foglio di stile esterna</title>
<link href="miofoglio.css" rel="stylesheet" type="text/css" />
</head>
<body>
Il linguaggio HTML - prof. Maurizio Gambino | 11 I fogli di stile.
<table border="0" width="100%" height="50" bgcolor="#FF0000">
<tr>
<td width="33%">
<center><a href="pagina1.htm"><font color="white">
Collegamento alla Homepage</font></a>
</td>
<td width="33%">
<p align="center"><font color="white">Benvenuti in miosito.com</font>
</td>
<td width="34%">
<p align="center"><font color="white">Informazioni del sito</font>
</td>
</tr>
</table>
<div id=header>
Sottotitolo del sito che verrà visualizzato in font Georgia, colore bianco, con
grandezza 20 pixel.</div>
<hr>
<br>
<table border="0" width="100%">
<tr>
<td width="25%" valign="top">
<div id=link>
Spazio dedicato ai collegamenti ipertestuali, con gli attributi dichiarati nel foglio
di stile: <p>
<a href="pagina1.htm">link1</a><br>
<a href="pagina2.htm">link2</a><br>
<a href="pagina3.htm">link3</a>
</div>
</td>
<td width="75%" valign="top">
<div id=home>
Questo è una altra prova di inserimento di testo generico nello spazio
principale della pagina, in base alla formattazione dichiarata.
</div>
</td>
</tr>
</table>
</body>
</html>
In Rete si trovano diversi esempi di fogli di stile esterni, molto intuitivi nell'utilizzo come
l'esempio appena visto, anche se taluni casi hanno bisogno di una maggiore attenzione
per essere applicati al meglio, data la grande creatività di alcuni programmatori.
In ogni caso risultano essere ottime risorse per ispirare alla creazione di nuovi stili per il
proprio sito.
Il linguaggio HTML - prof. Maurizio Gambino | 11 I fogli di stile.
