Attributo di classe HTML
L'attributo HTML classviene utilizzato per specificare una classe per un elemento HTML.
Più elementi HTML possono condividere la stessa classe.
Utilizzo dell'attributo di classe
L' classattributo viene spesso utilizzato per puntare al nome di una classe in un foglio di stile. Può anche essere utilizzato da un JavaScript per accedere e manipolare elementi con il nome di classe specifico.
Nell'esempio seguente abbiamo tre <div>elementi con un classattributo con il valore di "city". Tutti e tre gli <div>
elementi avranno lo stesso stile in base alla .city
definizione di stile nella sezione testa:
Esempio
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
Nell'esempio seguente abbiamo due <span>elementi con un classattributo con il valore di "note". Entrambi <span>
gli elementi avranno lo stesso stile in base alla .note
definizione di stile nella sezione di testa:
Esempio
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
Suggerimento: l' classattributo può essere utilizzato su qualsiasi elemento HTML.
Nota: il nome della classe fa distinzione tra maiuscole e minuscole!
Suggerimento: puoi imparare molto di più sui CSS nel nostro Tutorial CSS .
La sintassi per la classe
Per creare una classe; scrivi un punto (.), seguito dal nome di una classe. Quindi, definisci le proprietà CSS tra parentesi graffe {}:
Esempio
Crea una classe chiamata "città":
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>
Classi multiple
Gli elementi HTML possono appartenere a più di una classe.
Per definire più classi, separare i nomi delle classi con uno spazio, ad esempio <div class="city main">. L'elemento sarà stilizzato in base a tutte le classi specificate.
Nell'esempio seguente, il primo <h2>elemento appartiene sia alla
cityclasse che alla mainclasse e riceverà gli stili CSS da entrambe le classi:
Esempio
<h2
class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2
class="city">Tokyo</h2>
Elementi diversi possono condividere la stessa classe
Diversi elementi HTML possono puntare allo stesso nome di classe.
Nell'esempio seguente, entrambi <h2>e <p>
puntano alla classe "city" e condivideranno lo stesso stile:
Esempio
<h2 class="city">Paris</h2>
<p
class="city">Paris is the capital of France</p>
Uso di L'attributo della classe in JavaScript
Il nome della classe può essere utilizzato anche da JavaScript per eseguire determinate attività per elementi specifici.
JavaScript può accedere agli elementi con un nome di classe specifico con il getElementsByClassName()metodo:
Esempio
Fare clic su un pulsante per nascondere tutti gli elementi con il nome della classe "città":
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length;
i++) {
x[i].style.display = "none";
}
}
</script>
Non preoccuparti se non capisci il codice nell'esempio sopra.
Imparerai di più su JavaScript nel nostro capitolo JavaScript HTML , oppure puoi studiare il nostro Tutorial JavaScript .
Riassunto capitolo
- L'attributo HTML
classspecifica uno o più nomi di classe per un elemento - Le classi vengono utilizzate da CSS e JavaScript per selezionare e accedere a elementi specifici
- L'
classattributo può essere utilizzato su qualsiasi elemento HTML - Il nome della classe fa distinzione tra maiuscole e minuscole
- Diversi elementi HTML possono puntare allo stesso nome di classe
- JavaScript può accedere agli elementi con un nome di classe specifico con il
getElementsByClassName()metodo