A Sbafo! Tutto per il web gratis e in italiano...

 AVVISO

   Aggiungi ai preferiti  

:: Sei qui: Home > Manuali > Indice generale dei manuali - Giochiamo con i fogli di stile - pagina 5
:: Home

Grafica
:: Sfondi
:: Pulsanti
:: Linee
:: Gioielli
:: Puntini
:: Gif animate
:: Clipart
:: Icone
:: Set completi

Risorse
:: Caratteri
:: Applet e Javascript
:: Suoni
:: Programmi
:: Manuali

Servizi
:: Spazio web
:: Contatori di accessi
:: Libri degli ospiti
:: Crea i tuoi metatag

Richieste
:: Pulsanti
:: Assistenza
:: Scrivici

Varie
:: Dicono di noi
:: Note legali
 
Crea il tuo sito con noi...
In collaborazione
Testi e Manuali
Pubblicità
Pubblicità
Noi sosteniamo
C'E' BISOGNO ANCHE DI TE
 
Indice di questo manuale Indice di tutti i manuali Area download

Giochiamo con i fogli di stile

Versione 1.0

Manuale scritto da Seatiger Team™ nel mese di agosto 2002

A SBAFO! Tutto per il web gratis e in italiano...

Copyright© Seatiger Team 2002
Sono vietate la riproduzione, la pubblicazione e la distribuzione anche parziale del presente manuale
senza il consenso scritto degli autori.

LEZIONE 3

Colori del testo

Come abbiamo visto nella lezione precedente, anziché un'immagine di sfondo, si può inserire un colore di sfondo per la pagina con la seguente stringa:

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">body { background:#FFFF00; color:#000000 }
     </style>
     </head>
     <body>
     <p>I contenuti della pagina vanno qui</p>
     </body>
</html>

anteprima

Se sarai stato attento alle spiegazioni, non ti sarà sfuggito il fatto che, oltre al colore di sfondo richiamato dalla stringa background:#FFFF00 è stato inserito un altro attributo, separato da un punto e virgola, cioè color:#000000 equivalente al nero.

Ebbene, questa stringa definisce il colore del carattere delle scritte poste sulla pagina. In effetti, in ogni elemento di stile che richiama un colore di sfondo occorre anche indicare un colore del testo e viceversa. Questa è una precisa raccomandazione sugli standard dei fogli di stile CSS1 e CSS2 emanata dal World Wide Web Consortium (W3C), organizzazione che si occupa della standardizzazione dei linguaggi per il WEB per una omogeneità nello sviluppo di Internet.

Il colore indicato nell'elemento di stile body ha effetto sull'intero documento, cioè, nel nostro caso, ogni parola sarà scritta in nero. Un po' limitativo, non trovi?

Ma con i fogli di stile possiamo agire su ogni singolo elemento e determinarne le caratteristiche e quindi anche i colori. Supponiamo che tu voglia il titolo in rosso ed il testo in corsivo in blu. Utilizzeremo una stringa come la seguente:

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
     body { background:#FFFFD1; color:#0000FF }
     h1 { background:#FFFFD1; color:red }
     em { background:#FFFFD1; color:green }
     </style>
     </head>
     <body>
     <h1>Il titolo è in rosso</h1>
     <p>Il testo normale sarà blu, ma</p>
     <em>il corsivo sarà in verde</em>
     </body>
</html>

La prima stringa la conosciamo già:
body {background:#FFFFD1; color:#0000FF} ci dice che lo sfondo della pagina sarà giallo chiaro, mentre le scritte saranno in giallo.

La seconda stringa definisce invece l'aspetto dei titoli identificati in HTML con i tag <h1>, <h2> ecc.:
h1 {background:#FFFFD1; color:red} ci dice che tutto ciò che sarà contenuto nel primo titolo, cioè tra i tag  <h1> e </h1> avrà sempre lo sfondo giallo chiaro, ma sarà scritto in rosso.

La terza stringa definisce infine l'aspetto di tutto ciò che nella pagina sarà in corsivo (il corsivo in HTML è indicato con il tag <em> ):
em {background:#FFFFD1; color:green} ci dice che tutto ciò che sarà in corsivo nella pagina sarà colorato di verde.

anteprima

E' possibile raggruppare anche elementi di stile comuni tra di loro. Se tu volessi, ad esempio, tutti i titoli in rosso e tutte le scritte in corsivo in blu, potresti raggruppare i vari elementi nel modo che segue:

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
     body { background:#FFFFD1; color:#000000 }
     h1, h2, h3, h4 { background:#FFFFD1; color:red }
     em { background:#FFFFD1; color:blue }
     </style>
     </head>
     <body>
     <h1>Titolo 1</h1>
     <h2>Titolo 2</h2>
     <h3>Titolo 3</h3>
     <h4>Titolo 4</h4>
     <em>Testo in corsivo</em>
     </body>
</html>

anteprima
Nota: Gli argomenti raggruppati sono separati tra di loro da una virgola.
 

Se avessimo voluto, anziché un foglio di stile interno, utilizzarne uno esterno chiamato, ad esempio, miostile.css posizionato nella stessa cartella del file HTML che lo richiama, la stessa pagina HTML sarebbe apparsa così:

<html>
     <head>
     <title>Titolo del documento</title>
     <LINK href="miostile.css" rel="stylesheet" type="text/css">
     </head>
     <body>
     <h1>Titolo 1</h1>
     <h2>Titolo 2</h2>
     <h3>Titolo 3</h3>
     <h4>Titolo 4</h4>
     <em>Testo in corsivo</em>
     </body>
</html>

Il file miostile.css, creato con il BloccoNote di Windows© o con un qualunque altro editor di testo e salvato nella stessa cartella che contiene la pagina HTML che lo richiama avrebbe avuto questa struttura:
body {
   background:#FFFFD1;
   color:#000000
}
h1, h2, h3, h4 {
   background:#FFFFD1;
   color:red
}
em {
background:#FFFFD1;
color:blue
}
Nota: Questo esempio vale per trasportare all'esterno qualunque foglio di stile interno.
 

 
Torna alla pagina precedente Vai alla pagina successiva
Pagina precedente Pagina successiva
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Registrazione dominio, spazio illimitato, 5 caselle di posta, a soli 24,79 euro all'anno iva inclusa.

www. .

Questo sito è ottimizzato per Explorer 5.0 o superiore, Java compatibile. Alcune delle applicazioni presenti potrebbero non essere supportate da Netscape© o da sistemi operativi diversi da Microsoft© Windows. Tutti i marchi citati sono di proprietà dei loro legittimi autori.

Webmaster: Seatiger Team