- La formattazione con foglio di stile esterno: Come realizzare e collegare un file con codice di stile ad una pagina web.

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "- La formattazione con foglio di stile esterno: Come realizzare e collegare un file con codice di stile ad una pagina web."

Alfredo Giovannini
8 anni fa
Visualizzazioni

1 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:

2 <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 <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 <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.

3 <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 <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: # p { font-size: 20px; a:link { color: #000000; a:active { color: #000000; a:visited { color: #000000; a:hover { text-decoration: none; color: #660000; #header { height: 50px; background: #660000; text-align: center; font-size: 20px; color: #FFFFFF;

4 #home { height: 400px; background: #990000; text-align: center; font-size: 20px; color: #FFFFFF; #link { height: 400px; #link a { height: 30px; text-decoration: none; font-size: 100%; color: #999999; #link a:hover { background: #660000; 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" /> <body>

5 <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 width="33%"> <p align="center"><font color="white">benvenuti in miosito.com</font> <td width="34%"> <p align="center"><font color="white">informazioni del sito</font> </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 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> </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.

Documenti analoghi

Linguaggio HTML (2) Attributi di <FONT> Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi:

Linguaggio HTML (2) Attributi di Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi: SIZE= numero per modificare le dimensioni Es: