HTML | Chapelure

Lors de l'utilisation d'un site Web, nous devons souvent utiliser la barre de navigation, qui se compose d'onglets de navigation. Ces onglets de navigation aident l'utilisateur à atteindre plusieurs sections du site Web en cliquant simplement. Cependant, il ne montre pas tout le chemin de la section où l'utilisateur. À cette fin, le «chapelure«Sont utilisés dans les sites Web car ils aident non seulement les utilisateurs mais affichent également la structure du site Web en montrant l'ensemble du chemin de la section où ils se trouvent.

Cet article montrera comment créer la chapelure en HTML.

Quelle est la différence entre la barre de navigation et la chapelure en HTML?

La barre de navigation est principalement présentée en haut du site Web. Par exemple, une barre de navigation ressemble à ceci:

Tandis que la chapelure est utilisée pour fournir une aide à la barre de navigation, elle est donc placée au-dessus du contenu du site Web comme celle-ci:

Vous avez réalisé la différence entre la barre de navigation et la chapelure. Maintenant, la section suivante montrera un exemple de création de chapelure en HTML.

Comment créer des chapelure en HTML?

Dans HTML, d'abord, ajoutez un avec le nom de classe "contenu principal". À l'intérieur de cet élément div, ajoutez un élément de plus ayant le nom de classe "chapelure". Après cela, ajoutez une liste non ordonnée

Tag qui comprend plusieurs
• Tags Contenu comme indiqué ci-dessous dans le bloc de code:
  
  
  
  
  
  • Maison
  
  
  • cours
  
  
  • Développement frontal
  
  
  • Html
  
  
  
  

  En fournissant le code ci-dessus, la sortie ressemblera à ceci:

  Comme vous pouvez le voir, la structure de la chapelure a été créée avec succès. Maintenant, appliquez des propriétés de style aux éléments HTML.

  Style tous les éléments

  *
  marge: 0;
  rembourrage: 0;
  Font-Family: «Trebuchet MS», «Lucida Sans Unicode», «Lucida Grande», «Lucida Sans», Arial, Sans-Serif;
  

  Les propriétés s'appliquaient à tous les éléments «*«De HTML est expliqué ci-dessous:

  • "marge"La propriété a la valeur"0» il ne donnera pas d'espace à l'extérieur de l'élément.
  • "rembourrage"La propriété a la valeur"0» il ne produira pas d'espace autour du contenu de l'élément div.
  • "famille de polices"Est utilisé pour sélectionner n'importe quel style de police.

  Style Div de contenu principal

  .contenu principal
  largeur maximale: 800px;
  marge: 0 auto;
  rembourrage: 20px;
  

  La div avec le nom "contenu principal"Est appliqué avec des propriétés décrites ci-dessous:

  • "largeur maximale«La propriété spécifie la largeur du contenu principal div ne doit pas dépasser«800px".
  • "marge»Propriété avec la valeur définie comme«0 Auto»Représente 0px d'espace en haut et en bas et un espace égal à gauche et à droite de l'élément div.
  • "rembourrage"La propriété est utilisée pour générer"20px”Espace autour du contenu de l'élément div.

  Élément ul de chapelure de style

  .chapelure ul
  marge: 10px;
  rembourrage: 20px;
  Affichage: en ligne-flex;
  Style de liste: aucun;
  Color en arrière-plan: RVB (204, 204, 138);
  

  Le code ci-dessus représente les propriétés CSS appliquées au

  élément de la chapelure div. L'explication de ces propriétés est mentionnée ci-dessous:
  • "marge«Propriété avec la valeur»10px”Devrait donner 10px d'espace à l'extérieur du
    élément.
    • "rembourrage"Définit des propriétés"20px«D'espace autour du contenu du
      élément.
      • "afficher«Propriété avec la valeur»en ligne”Rend le conteneur flexible en ligne.
      • "style de liste«Propriété avec la valeur»aucun”Supprime les styles par défaut du
        élément tel que les balles.
        • "Couleur de l'arrière plan»La propriété définit la couleur d'arrière-plan de l'élément.

        Style de chapelure de style Li

        .chapelure ul li
        padding-gauche: 10px;
        Padding-droite: 10px;
        Position: relative;
        

        Le

      • L'élément de la chapelure div est appliqué avec les propriétés CSS qui sont décrites ci-dessous:
        • "rembourrage à gauche»Définit l'espace 10px à gauche du contenu.
        • "rembourrage»Définit l'espace 10px à droite du contenu.
        • "position»La propriété est définie comme relatif pour ajuster l'élément par rapport à sa position actuelle.

        Insérer le style avant Li

        .la chapelure ul.chapelure-1 li :: avant
        Contenu: '>';
        Position: absolue;
        Couleur: Blueviolet;
        taille de police: 20px;
        gauche: -4px;
        en haut: -2px;
        

        Le

      • L'élément de la chapelure-1 div est appliqué avec les propriétés CSS qui sont décrites ci-dessous:
        • ".la chapelure ul.chapelure-1 li :: avant»: Avant est la pseudo-élément qui fait référence à l'insertion des propriétés de style avant le
        • élément de la chapelure 1 div qui est présent à l'intérieur du
          élément de la chapelure div.
          • "contenu«La propriété est utilisée avec des pseudo-éléments avant et après. Il insère le contenu qui lui est attribué avant l'élément.
          • "position”Avec la valeur définie comme positionne absolue le
          • élément par rapport à leur parent div.
          • "couleur»La propriété est utilisée pour définir la couleur de la police.
          • "taille de police»Ajuste la taille de la police à 20px.
          • "gauche”La propriété avec la valeur définie comme -4 fournit un espace horizontal -4px.
          • "haut”Propriété avec la valeur définie comme -2 fournit un espace -2px du haut.

          En fournissant le code susmentionné, nous obtiendrons le résultat suivant:

          On peut voir que le symbole de redirection (>) est affiché au début du

          élément, qui n'est pas nécessaire.

          Style pour supprimer le premier symbole

          .chapelure ul li: premier enfant :: avant
          Affichage: aucun;
          

          "Li: Premier enfant»Représente le premier enfant de l'élément Li et«Li: Premier enfant :: avant»Indique l'icône utilisée avant le premier élément Li. Tandis que le "Affichage: aucun»La propriété supprime le symbole avant le premier élément.

          Style html un élément

          .chapelure ul li a
          Décoration du texte: aucune;
          

          La balise d'ancrage utilisée dans le

          • L'élément est appliqué avec la propriété "textaine-décoration"Avec la valeur"aucun«Pour supprimer le style de soulignement.

            Le code ci-dessus affichera le résultat comme indiqué ci-dessous:

            C'est super! La chapelure de notre site Web a été créée avec succès.

            Vous pouvez également utiliser d'autres symboles en attribuant simplement le symbole à la propriété CSS Content dans le code ci-dessus comme:

            Contenu: '|';

            Le code susmentionné affichera le résultat comme indiqué dans l'image:

            Le symbole "o«Peut également être utilisé dans nos chapelure en se connectant à la propriété CSS Content comme:

            Contenu: «O»;

            Sortir

            Super! Nous avons appris à créer la chapelure pour notre site Web avec succès.

            Conclusion

            Sur les pages Web, la chapelure est importante pour l'accessibilité des utilisateurs. Il aide non seulement à la navigation, mais affiche également les utilisateurs tout le chemin vers la section du site où ils se trouvent. HTML nous fournit plusieurs éléments pour créer des chapelure. Cet article a démontré la procédure de création de chapelure en HTML à l'aide d'un exemple détaillé.