Come creare e gestire le classi di style.
ALLWEB free
Web Directory Script Linguaggi
Italiano Inglese Tutte
 
 20 Dec 2014
aggiungi in preferiti  
Home    Mappa directory    Script




classi CSS:

Per ulteriori approfondimenti sulle classi o pseudo-classi vi rimandiamo a questo link pseudo-classi


Le classi servono per creare parametri alternativi a quelli indicati nei fogli di style.
Un esempio pratico sono i titoli o gli esempi, che di solito hanno un formato diverso da quello scritto normalmente.
Se guardate i miei esempi sono tutti di colore blu, questo l'ho ottenuto creando la classe .esempi (scritto punto esempi).
Le classi si possono inserire in fogli esterni (richiamabili da ogni pagina), oppure in una sola pagina (fra i tag head).
La sintassi per l'inserimento Ŕ uguale agli altri parametri di style, pertanto non la analizziamo in questo paragrafo, ma vi suggeriamo di leggere In head e esterni.

SINTASSI:

Per creare una classe (sia in foglio esterno che interno) dobbiamo solo scrivere il nome della classe preceduto da un punto e seguito dalle parentesi graffe.
.esempi { font-family : Arial, verdana, Helvetica; font-size:12px; color:#031D81; font-weight:bold; font-style:italic; }

Per richiamare una classe dobbiamo solo scrivere:
<font class="esempi">
Testo........
</font>


LINK:

Simile ma non uguale per i Link. Tipi di link:
  • A:link {...} i link da visitare
  • A:visited {...} i link visitati
  • A:hover {...} quando il muose Ŕ sul link
Per creare le relative classi dobbiamo scrivere:
A.nome1:link {...}
A.nome1:visited {...}
A.nome1:hover {...}
per richiamarle dovremo scrivere come nell'esempio seguente:
< a class="nome1" href=" ">nomelink</a>


Esempio di foglio css:

A:LINK {text-decoration:none; color:#000000;}
A:VISITED {text-decoration:none; color:#000000;}
A:HOVER {color:slateblue; text-decoration:none;}

A.ciao:link {font-family:Arial,verdana,Helvetica; color:#FFFFFF; text-decoration:none; font-size:14px}
A.ciao:visited {font-family:Arial,verdana,Helvetica; color:#FFFFFF; text-decoration:none; font-size:14px}
A.ciao:hover {font-family:Arial,verdana,Helvetica; color:#FFFFFF; text-decoration:underline; font-size:14px}

body {font-family:Arial,verdana,Helvetica; font-size:13px; color:2f4f4f;}

.ciao2{font-family:Arial,verdana,Helvetica; font-size:20px; color:2f4f4f; font-weight:bold;}
.esempi{font-family:Arial,verdana,Helvetica; font-size:12px; color:#031D81; font-weight:bold; font-style:italic;}
.titolo1{font-family:Arial,verdana,Helvetica; font-size:16px; color:#246688; font-weight:bold;}
.titolo2{font-family:Arial,verdana,Helvetica; font-size:12px; color:#246688; font-weight:bold;}



ID

Gli ID sono simili alle classi. L'unica differenza Ŕ che vengono dichiarati diversamente, ossia non con il punto ma con il cancelletto:
#esempi {.............}
Per essere richiamati scriveremo:
<div id="esempi">...............</div>