CREARE SITI WEB in HTML e CSS > Differenziare con classi (.class) e identificatori (#id)
Impostare le proprietą direttamente sull'elemento DIV limita enormemente la personalizzazione dei blocchi (tutti i blocchi sono uguali).
Per differenziare gli elementi DIV, dovrai far uso delle classi e/o degli identificatori. Le classi servono per raggruppare pił proprietą da applicare a pił elementi, mentre l' identificatore, personalizza le proprietą di un solo elemento.
Ad esempio puoi creare una classe che abbia come caratteristica lo sfondo nero e il testo bianco e decidere di nominarla "nerobianco".
1 - inserisci il seguente testo tra il codice dei Fogli Stile:
.nerobianco {
background-color: black;
color: white; }
background-color: black;
color: white; }
Nel Foglio Stile, prima del nome della classe deve sempre essere inserito il punto(.).
Per assegnare una determinata classe ad un elemento HTML devi dichiararla all'interno dello stesso elemento TAG:
1 - inserisci il seguente testo tra il corpo (<body></body>) della pagina:
<div class="nerobianco">Zona numero uno</div>
Nota nella tabella sottostante le differenze del codice, con e senza l'uso delle classi.
| codice HTML | risultato pagina web |
|
... <style type="text/css"> .nerobianco { background-color: black; color: white } </style> </head> <body> <div class="nerobianco"> Zona numero uno</div> <div>Zona numero due</div> <div>Zona numero tre</div> <div>Zona numero quattro</div> <div class="nerobianco"> Zona numero cinque</div> ... |
Zona numero uno Zona numero due Zona numero tre Zona numero quattro Zona numero cinque |
| codice HTML | risultato pagina web |
|
... <style type="text/css"> div { background-color: black; color: white } </style> </head> <body> <div>Zona numero uno</div> <div>Zona numero due</div> <div>Zona numero tre</div> <div>Zona numero quattro</div> <div>Zona numero cinque</div> ... |
Zona numero uno
Zona numero due Zona numero tre Zona numero quattro Zona numero cinque |
Per dichiarare un identificatore nel Foglio Stile, si deve far precedere il nome dal carattere diesis (#).
Ad esempio, puoi creare un identificatore che abbia come caratteristiche una larghezza pari a 700 pixel, un'altezza pari a 50 pixel, con bordo e margine.
1 - inserisci il seguente testo tra il codice dei Fogli Stile:
#intestazione {
width: 700px;
height:50px;
border: 5px solid gray ;
margin: 5px; }
#piedipagina {
width: 700px;
height:150px;
border: 5px solid gray ;
margin: 5px; }
width: 700px;
height:50px;
border: 5px solid gray ;
margin: 5px; }
#piedipagina {
width: 700px;
height:150px;
border: 5px solid gray ;
margin: 5px; }
2 - assegna al primo blocco <div> l'identificatore "intestazione":
<div id="intestazione">Zona numero uno</div>
3 - e all'ultimo blocco assegna l'identificatore "piedipagina":
<div id="piedipagina">Zona numero cinque</div>
Tieni presente che allo stesso elemento puoi assegnare una classe e un identificatore:
<div id="intestazione" class="nerobianco">