Vidéo: LE MENU DE NAVIGATION - CREER UN SITE ? HTML/CSS #3 2025
Après avoir maîtrisé les styles personnalisés, les redéfinitions de balises et les styles d'identification dans les feuilles de style en cascade (CSS), vous pouvez entrer dans les ligues majeures des styles composés. Pour comprendre comment utiliser les styles composés, vous devez d'abord comprendre les arborescences de documents HTML / CSS, qui définissent les relations entre les objets dans le document.
Tout comme les humains ont un arbre généalogique, votre document et les objets qu'il contient peuvent être définis par leurs relations. Cela signifie que vous pouvez identifier les objets dans vos documents en fonction de leur relation avec d'autres objets. Chaque objet peut avoir des ancêtres, des descendants, des parents, des enfants et des frères et soeurs.
Par exemple, le pied de page (section du bas) d'une page Web peut inclure une liste non ordonnée de texte lié. Dans ce scénario, le conteneur parent de la liste est le pied de page et les éléments individuels de la liste sont frères et sœurs. En outre, si le pied de page est l'enfant de la balise, l'emplacement de cette liste dans l'arborescence des documents peut ressembler à ceci:
Les styles composés sont ceux où une grande partie du travail fantaisie se produit parce que les sélecteurs peuvent être écrits de façons, y compris les utilisations les plus populaires suivantes:
-
Pseudo-classes: Une pseudo-classe comme type de sélecteur spécial qui permet de formater des éléments qui ne sont pas dans l'arbre du document, tels que les états hyperliens, les premier et dernier éléments enfants, et des éléments actifs. En d'autres termes, ils ne sont pas utilisés pour les éléments réels mais plutôt pour les éléments conceptuels, comme tous les autres rangs d'une table. L'utilisation la plus courante consiste à créer des styles pour les hyperliens.
-
Sélecteurs multiples: Utilisé pour appliquer les mêmes styles à plusieurs tags, le sélecteur avancé est divisé par des virgules, avec ou sans espaces, comme dans body, th, td {…} ou body, th, td { …}.
-
Sélecteurs descendants: Aussi appelés combinateurs avancés , vous pouvez utiliser ces sélecteurs pour styliser des éléments très spécifiques sur votre page, tels que les descendants d'un autre élément dans l'arbre des documents.
Par exemple, plutôt que de créer un style de redéfinition de balise pour tous les éléments de votre site, vous pouvez cibler tous les éléments d'une liste ordonnée dans la barre latérale de votre mise en page avec un sélecteur nommé #sidebar ol li. Ces styles peuvent être écrits pour inclure n'importe quelle combinaison de balises, de redéfinitions de balises, de styles d'ID et de noms de classes personnalisées.
