Tutorial Class e Id
Classi
L'attributo class è molto usato nelle pagine web e serve per specificare la
classe di un elemento HTML. Questo attributo indirizza al nome della classe nel foglio di stile CSS.
Qualsiasi tag HTML può essere attribuito ad una classe, e molti elementi diversi possono condividere
la stessa classe.
Lo scopo principale di una classe è quello di modificare tramite CSS vari elementi nella pagina web denominati con la stessa classe.
Cosa si inserisce in HTML:
<div class="city">
<h2>Roma</h2>
<p>Roma è in Italia.</p>
</div>
Cosa si inserisce nel CSS:
.city {
background-color: red;
color: white;
border: 2px solid black;
}
In HTML si aggiunge quindi l'attributo class all'elemento da modificare
e si specifica il nome della classe.
In CSS si crea la class aggiungendo un il nome della classe
preceduto da un punto (Es: .city).
Per definire le proprietà da modificare, esse andranno scritte all'interno delle parentesi graffe {}.
É anche possibile che ad un solo elemento HTML appartengano più classi. Questo può essere utile per specificare ulteriormente l'elemento e si scrive così:
In HTML:
<div class="city main">
<h2>Roma</h2>
</div>
In CSS:
.city {
background-color: red;
}
.main {
text-align: left;
}
Id
L'attributo id è usato per specificare un id unico per un elemento HTML.
NON si può attribuire lo stesso id a più di un elemento HTML.
Lo scopo principale di un id è quello di modificare un singolo elemento tramite CSS nel documento.
Cosa si inserisce in HTML:
<div id="firenze">
<p>Firenze è in Italia.</p>
</div>
Cosa si inserisce nel CSS:
#firenze {
background-color: red;
color: white;
border: 2px solid black;
}
In HTML si aggiunge quindi l'attributo id all'elemento da modificare
e si specifica il nome dell'id.
In CSS si crea l'id aggiungendo un il nome dell'id
preceduto dal cancelletto # (Es: #firenze).
Per definire le proprietà da modificare, esse andranno scritte all'interno delle parentesi graffe {}.
Una funzionalità interessante degli id è quella di segnalibri. Si possono usare per permettere ai lettori di saltare a specifiche parti della pagina web (in particolare se è molto lunga).
Bisogna creare il segnalibro con l'attributo id e poi aggiungere
un link che rimandi ad esso:
<h3 id="C4">Capitolo 4</h3>
creazione del segnalibro
<p><a href="#C4">Vai al Capitolo 4</a></p>
link indirizzante
Esempio: Torna all'inizio