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 6
:: 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 4

Selettori

 

4.1 Selettori delle classi

I selettori delle classi (class selectors) sono molto usati nei fogli di stile. In uno degli esempi della precedente lezione abbiamo visto che si possono assegnare colori differenti a ciascun tipo di elemento. Abbiamo visto che assegnando il colore rosso ai Titoli (tag <h1>) tutti i titoli assumeranno quella colorazione.

Ma se volessimo che intestazioni dello stesso livello, cioè sempre comprese tra i tag <h1>, avessero colori differenti tra loro? Beh, allora dobbiamo ricorrere alle classi.

Le classi, inserite all'interno di un tag HTML, modificano gli attributi del testo incluso in esso, indipendentemente dalle impostazioni generali del foglio di stile: in altre parole sono prioritarie.

Vediamo un esempio pratico:

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
     body { background:#FFFFD1; color:#000000 }
     .verde { color:green; background:#FFFFD1 }
     .blu { color:blue; background:#FFFFD1 }
     .rosso { color:red; background:#FFFFD1 }
     </style>
     </head>
     <body>
     <h1 class="verde">Il titolo è in verde</h1>
     <h1 class="blu">Il titolo è in blu</h1>
     <h1 class="rosso">Il titolo è in rosso</h1>
     </body>
</html>

anteprima
Nota: Quando definisci una classe DEVI farne precedere il nome da un punto ( . )
Il nome puoi modificarlo come meglio credi, non deve necessariamente coincidere con il colore, come nell'esempio. Avresti potuto chiamare le tre classi
.pluto
.pippo
.paperino
ed il risultato sarebbe stato identico, ovviamente cambiando il nome di riferimento anche all'interno dei tag <h1>.
 

Una volta definita una classe, questa può essere impiegata in tag differenti di una pagina HTML. Usando lo stesso esempio precedente possiamo ottenere differenti risultati.

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
     body { background:#FFFFD1; color:#00FF00 }
     .verde { color:green; background:#FFFFD1 }
     .blu { color:blue; background:#FFFFD1 }
     .rosso { color:red; background:#FFFFD1 }
     </style>
     </head>
     <body>
     <h1 class="verde">Il titolo è in verde</h1>
     <em class="blu">La scritta in corsivo è in blu</em>
     <p class="rosso">Il paragrafo normale è in rosso</p>
     </body>
</html>

anteprima

Le classi possono anche essere assegnate ad un unico elemento di stile. Vediamo un esempio pratico:

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
     body { background:#FFFFD1; color:#000000 }
     h1.verde { color:green; background:#FFFFD1 }
     </style>
     </head>
     <body>
     <h1>Questo titolo non è verde</h1>
     <h1 class="verde">Questo titolo è verde</h1>
     </body>
</html>

anteprima
Nota: Forse ti chiederai come mai il primo titolo è di colore nero. Perché, non essendo definito nessuno stile per i Titoli in generale, prende il colore predefinito per il testo dal foglio di stile ovvero color:#000000 che equivale al nero.
 

 
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