Classes d'éléments en CSS

Dans les leçons précédentes, nous sélectionnions les éléments de la page par le nom de la balise, en appliquant des styles, par exemple, simultanément à tous les paragraphes. Sur une page, il peut cependant y avoir des paragraphes de types différents, auxquels il faut appliquer des styles différents. Pour résoudre ce problème, on peut attribuer les différents paragraphes à différentes classes CSS.

Pour attribuer une balise à une classe, il faut lui écrire l'attribut class, et dans celui-ci - le nom de classe que vous avez inventé, composé de lettres, de chiffres, de tirets bas et de traits d'union.

Regardons un exemple. Créons des paragraphes avec deux types de classes - eee et zzz :

html<p class="eee">
  paragraph with class eee
</p>
<p class="eee">
  paragraph with class eee
</p>
<p class="zzz">
  paragraph with class zzz
</p>
<p class="zzz">
  paragraph with class zzz
</p>

Maintenant, adressons-nous en CSS aux paragraphes avec les différentes classes et appliquons-leur quelques styles. Par exemple, colorons en rouge les paragraphes avec la classe zzz, et les paragraphes avec la classe eee - en vert.

Pour cela, dans le fichier CSS, il faut sélectionner nos classes. La sélection a la syntaxe suivante : commencez par le point, puis écrivez le nom de classe que nous avons inventé. C'est-à-dire que pour sélectionner la classe eee, il faut écrire .eee, et pour la classe zzz - écrire .zzz.

Alors, faisons ce qui est décrit. Ajoutons à notre HTML aussi les styles CSS pour les classes que nous avons introduites :

css.eee {
  color: green;
}
.zzz {
  color: red;
}

Si nous exécutons notre code, le résultat sera le suivant :

html<ul>
  <li class="odd">text</li>
  <li class="eve">text</li>
  <li class="odd">text</li>
  <li class="eve">text</li>
  <li class="odd">text</li>
  <li class="eve">text</li>
</ul>

html<h2 class="eee">Title</h2>
<p class="eee">
  paragraph
</p>
<p class="eee">
  paragraph
</p>
<p>
  paragraph without class
</p>

<ul class="eee">
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>