OUJOOD.COM
Définition et utilisation l’attribut class
HTML Les attributs globauxL'attribut class spécifie un ou plusieurs noms de classes pour un élément.
L'attribut class est principalement utilisé pour pointer vers une classe dans une feuille de style (voir notre tutorial sur l’utilisation de class en html).
Cependant, elle peut être aussi utilisable par un script JavaScript (via le DOM HTML) pour apporter des modifications aux éléments HTML qui ont une classe spécifiée (voir notre tutorial javascript).
Syntaxe<element class="nomClass">
Exemple Utilisation de l'attribut class dans un document HTML :
Exemple : 📋 Copier le code
<html>
<head>
<style type="text/css">
h1.intro {color:blue;}
p.important {color:green;}
</style>
</head>
<body>
<h1 class="intro">Titre du document 1</h1>
<p>Ceci est un paragraphe.</p>
<p class="important">Ceci est un paragraphe
important.</p>
</body>
</html>
(plus d'exemples en bas de cette page)
Appui de navigateur
L'attribut class est pris en charge dans tous les principaux navigateurs.
Différences entre HTML 4.01 et HTML5
En HTML5, l'attribut class peut servir dans n'importe quel élément HTML.
Dans HTML 4.01, l'attribut de classe ne peut pas être utilisée avec les balises: <base>, <head>, <html>, <meta>, <param>, <script>, <style> et <title>.
Valeurs d'attribut class
| Valeur | Description |
|---|---|
| nomClass |
Spécifie un ou plusieurs noms de classe d'un élément.
Pour spécifier plusieurs classes, séparez les noms de classe par un espace, par exemple < span class = " gauche important " >. Ce qui vous permet de combiner plusieurs classes CSS pour un élément HTML. Règles de nomination : Doit commencer par une lettre de A à Z ou a-z Peut être suivie : de lettres (A-Za-z), de chiffres (0-9), des tirets ("-") et de traits de soulignement (" _ ") Et comme tous les attributs en HTML, il est insensible à la casse |
Exemple Ajouter des classes multiples à un élément
Comment ajouter plusieurs classes à un élément HTML.
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1.intro
{
color:blue;
text-align:center;
}
.important {background-color:yellow;}
</style>
</head>
<body>
<h1 class="intro important">Titre du document 1</h1>
<p>Ceci est un paragraphe.</p>
</body>
</html>