Vous pouvez facilement appliquer un style à tous les éléments d'un type particulier dans une page HTML5, mais parfois, vous voudrez peut-être d'avoir un contrôle plus serré de vos styles. Par exemple, vous voudrez peut-être avoir plus d'un style de paragraphe. A titre d'exemple, regardez la page de classes.html.

Une fois de plus, de multiples formats sont sur cette page:

• Questions avons une grande Sans Italic empattement. Il ya plus d'une question.

• Les réponses sont plus petits, bleu, et dans une police cursive. Il ya plus d'une réponse, aussi.

  

Questions et réponses sont tous les paragraphes, donc vous ne pouvez pas tout simplement le style de paragraphe parce que vous avez besoin de deux styles distincts. Il ya plus d'une question et de plus d'une réponse, le truc d'identité serait problématique. Deux éléments différents ne peuvent pas avoir le même ID. Ceci est où la notion de classes entre en jeu. Chaque ID appartient à un seul élément, mais de nombreux éléments peuvent partager la même classe.

Comment ajouter des classes à la page

CSS vous permet de définir des classes dans votre code HTML et de faire des définitions de style qui sont appliquées dans une classe. Il fonctionne comme ceci:

1. Ajouter le classe attribuer à vos questions HTML.

   Contrairement ID, plusieurs éléments peuvent partager la même classe. Réglage de la classe question indique ces paragraphes sera de style sous forme de questions:

    
   Quel type de vache vit dans l'Arctique?

2. Ajouter les attributs de classe semblables aux réponses en définissant la classe des réponses à répondre:

    
   Un Eskimoo!

   Maintenant, vous avez deux sous-classes différentes du paragraphe: question et répondre.

3. 
   
   
   
   

   Créer un style de classe pour les questions.

   Le style de classe est défini en CSS. Spécifiez une classe avec la période (.) Avant que le nom de la classe. Les classes sont définies en CSS comme ceci:

   Dans cette situation, la question classe est définie comme une grande police sans serif alignés à gauche.

4. Définir l'apparence des réponses.

   La classe utilise un droit; police cursive justifiée.

 .réponse {font: 120% "Comic Sans MS", cursive-text-align: right; color: # 00F-}

Utilisation des classes

Voici le code de la page, montrant comment utiliser les classes CSS:

Blagues préférées
Quel type de vache vit dans l'Arctique?
Un Eskimoo!
Ce qui se passe au-dessus d'un chien de la maison?
Le Woof!

Parfois, vous voyez sélecteurs, comme

p.fancy

qui comprennent à la fois un élément et un nom de classe. Ce style est appliqué uniquement à des paragraphes avec la classe ci-joint. Généralement, les classes sont grands parce qu'ils peuvent être appliqués à toutes sortes de choses, de sorte que vous pouvez laisser le nom de l'élément afin de rendre le style comme réutilisables que possible.

Combinant des classes

Un élément peut utiliser plus d'une classe.

Les paragraphes semblent être dans trois styles différents, mais seul le rouge et l'écriture sont définis. Le troisième paragraphe utilise les deux classes. Voici le code:

Plusieurs classes
Ce paragraphe utilise la classe rouge
Ce paragraphe utilise la classe de script
Ce paragraphe utilise deux classes

La feuille de style introduit deux classes. La rouge classe rend le paragraphe rouge (ainsi, un texte blanc sur fond rouge), et le scénario classe applique une police cursive à l'élément.

Les deux premiers alinéas ont chacun une classe, et les classes agissent comme vous le souhaitiez. La partie intéressante est le troisième paragraphe, parce qu'il a deux classes.

Les deux modèles seront appliqués à l'élément dans l'ordre où ils sont écrits. Notez que les deux noms de classe se produisent entre guillemets et aucune des virgules sont nécessaires (ou autorisés). Vous pouvez appliquer plus de deux classes à un élément si vous le souhaitez. Si les classes ont des règles contradictoires (par exemple on fait l'élément vert et le prochain rend bleu), la dernière classe dans la liste va écraser les valeurs antérieures.

Un élément peut également avoir un ID. Le style d'identité, le style de l'élément, et tous les styles de classe sont pris en compte lorsque le navigateur tente d'afficher l'objet.

Habituellement, il est préférable de nommer les classes en fonction de leur sens (comme mainBackgroundColor). Vous pouvez décider que le vert est mieux que le rouge, alors vous devez soit modifier le nom de la classe ou si vous avez d'avoir un rouge classe qui colore les choses vert. Ce serait bizarre.