04 Classi
Negli esempi visti finora risulta evidente come le impostazioni di un elemento nel file css, si riflettono in tutti gli elementi del file HTML. Se ad esempio abbiamo impostato per l’elemento <p> il colore del carattere a verde, tutti i paragrafi <p> dei file HTML collegati al css avranno il carattere di colore verde.
E se volessimo creare un paragrafo con il testo di colore rosso !
Questo è un limite che è stato superato con le classi.
Vediamo un esempio:
Contenuto del file stile.css:
p
{
color:#006600;
}
p.rosso
{
color:#FF0000;
}
Contenuto del file prova.html
<html>
<head>
<title>CSS – ICTime.org</title>
<link rel=”stylesheet” type=”text/css” href=”stile.css”>
<body>
<p>Testo del paragrafo di colore verde</p>
<p class=”rosso”>Testo del paragrafo di colore rosso</p>
</body>
</html>
Nel primo paragrafo il testo sarà di colore verde, mentre nel secondo il paragrafo <p> grazie alla classe p.rosso il carattere sarà rosso.
È anche possibile creare classi generiche, cioè non associate ad un elemento in particolare. Questo ci consente di applicare una classe a più elementi. Per creare una classe generica è sufficiente utilizzare il punto seguito dal nome della classe:
Vediamo due esempi:
Classe:
p.rosso
{
color:#FF0000;
}
Classe generica:
.rosso
{
color:#FF0000;
}
- 327 letture