Comment définir des classes pour la programmation HTML5 et CSS3 - les nuls

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

Encore une fois, plusieurs formats sont disponibles sur cette page:

• Les questions ont une grande police italique sans serif. Il y a plus d'une question.

• Les réponses sont plus petites, bleues, et en caractères cursifs. Il y a plus d'une réponse aussi.

  

Les questions et réponses sont des paragraphes, vous ne pouvez donc pas simplement styliser le paragraphe car vous avez besoin de deux styles distincts. Il y a plus d'une question et plus d'une réponse, donc l'astuce d'identification serait problématique. Deux éléments différents ne peuvent pas avoir le même identifiant. C'est ici que la notion de classe 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 à travers une classe. Cela fonctionne comme ceci:

1. Ajoutez l'attribut class à vos questions HTML.

   Contrairement à l'ID, plusieurs éléments peuvent partager la même classe. La remise en question de la classe indique que ces paragraphes seront appelés questions:

   Quel genre de vache vit dans l'Arctique?
   
   
   
   
   
   
   

2. Ajoutez des attributs de classe similaires aux réponses en définissant la classe de réponses à answer:

   Un Eskimoo!
   

   Vous avez maintenant deux sous-classes différentes de paragraphe: question et réponse.

3. Créez un style de classe pour les questions.

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

   . question {font: italic 150% arial, sans-serif; text-align: left;}
   

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

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

   La classe utilise une police cursive justifiée à droite.

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

Utiliser les classes

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

classes. html question {font: italic 150% arial, sans-serif; text-align: left;}. répondre {font: 120% "Comic Sans MS", cursive; text-align: droit; color: # 00F;}

Blagues favorites
Quel genre de vache vit dans l'Arctique?
Un Esquimau!
Qu'est-ce qui se passe au sommet d'une niche?
Le woof!

Parfois, vous voyez des sélecteurs, comme

p. fantaisie

qui inclut à la fois un élément et un nom de classe.Ce style est appliqué uniquement aux paragraphes avec la classe attachée. Généralement, les classes sont géniales car elles peuvent être appliquées à toutes sortes de choses, donc vous pouvez laisser le nom de l'élément pour rendre le style aussi réutilisable que possible.

Combinaison de classes

Un élément peut utiliser plusieurs classes.

Les paragraphes semblent être de trois styles différents, mais seuls le rouge et le script sont définis. Le troisième paragraphe utilise les deux classes. Voici le code:

redScript. html rouge {couleur: blanc; couleur de fond: rouge;}. script {font-family: cursive;}

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

La feuille de style introduit deux classes. La classe rouge rend le paragraphe rouge (bien, texte blanc avec un fond rouge), et la classe de script applique une police cursive à l'élément.

Les deux premiers paragraphes ont chacun une classe, et les classes agissent comme vous l'attendez. La partie intéressante est le troisième paragraphe car il a deux classes.

Les deux styles seront appliqués à l'élément dans l'ordre dans lequel ils sont écrits. Notez que les deux noms de classe se trouvent entre guillemets et qu'aucune virgule n'est nécessaire (ou autorisée). Vous pouvez appliquer plus de deux classes à un élément si vous le souhaitez. Si les classes ont des règles conflictuelles (disons que l'une est verte et l'autre bleue), la dernière classe de la liste remplacera les valeurs précédentes.

Un élément peut également avoir un identifiant. Le style d'ID, le style d'é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 signification (comme mainBackgroundColor). Vous pouvez décider que le vert est meilleur que le rouge, donc vous devez soit changer le nom de la classe ou vous devez avoir une classe rouge qui colorie les choses en vert. Ce serait bizarre.