PCdaZERO.it - Guida facile per usare il computer

Acquista o scarica gratis, i libri di "PC da Zero"

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; }

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; }

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>

13-class-id (11K)
Tieni presente che allo stesso elemento puoi assegnare una classe e un identificatore:
<div id="intestazione" class="nerobianco">







Link sponsorizzati