Table des matières:
Vidéo: Cours Complet HTML CSS - Tutoriel pour Débutants et Confirmés [Partie 1/3] 2025
Parfois, il se peut que vous souhaitiez qu'un certain nombre d'éléments sur votre page Web HTML5 et CSS3 partagent des styles similaires. Jetez un oeil à cet exemple pour voir cela en action.
Les trois titres principaux ont tous des styles très similaires. Créer trois styles différents serait fastidieux, alors CSS inclut un raccourci:
multiStyle. html h1, h2, h3 {text-align: centre; font-family: "Bradley Hand ITC", cursive; background-color: yellow;} h3 {font-family: monospace;}
H1 Titre
H2 En-tête
H3 En-tête
Un élément de style (celui qui commence par h1, h2, h3) fournit toutes les informations pour les trois types de vedettes. Si vous incluez plus d'un élément dans un sélecteur de style séparé par des virgules, le style s'applique à tous les éléments de la liste. Dans cet exemple, la police cursive centrée avec un arrière-plan jaune est appliquée aux en-têtes 1, 2 et 3, tous dans le même style.
Si vous voulez faire des modifications, vous pouvez le faire. Les règles de style sont appliquées dans l'ordre, de sorte que vous pouvez toujours commencer par la règle générale, puis modifier des éléments spécifiques plus tard dans le style si vous le souhaitez.
Si vous avez plusieurs éléments dans une règle de sélection, cela fait une énorme différence si vous utilisez des virgules. Si vous séparez des éléments avec des espaces (mais pas de virgules), CSS recherche un élément imbriqué dans un autre élément. Si vous incluez des virgules, CSS applique la règle à tous les éléments répertoriés.
Il est possible d'être encore plus précis sur les sélecteurs avec ponctuation. Par exemple, le sélecteur + décrit la relation fraternelle. Par exemple, regardez la règle suivante:
h1 + p
Ceci cible uniquement le paragraphe qui suit immédiatement un titre de premier niveau. Tous les autres paragraphes seront ignorés. Il y a aussi d'autres sélecteurs, mais ceux qui sont mentionnés ici suffiront pour la plupart des applications.
Vous pourriez vous demander pourquoi les développeurs ont besoin de tant de types différents de sélecteurs. Vous pouvez utiliser le nom de la balise pour la plupart des éléments et appliquer une classe ou un ID à tout élément nécessitant une attention particulière. C'est vrai, mais un objectif de CSS est de garder votre code HTML aussi propre que possible. Vous voulez utiliser la structure de la page elle-même pour vous aider à déterminer le style.
