Belle chapelure CSS "fil d'Ariane". Fil d'Ariane dans la conception Web : application et exemples Ajout de transparence avec bordure

collecte gratuite Fil d'Ariane HTML et CSS exemples de codes de navigation : simple, réactif, multiligne, réduit, etc. Mise à jour de la collection février 2018. 3 nouveaux articles.

Articles Liés

À propos du code

CSS simple.

À propos du code

N'hésitez pas à le personnaliser à votre guise. Couleurs, tailles, ombres, bordures, etc. Fabriqué avec Amorcer.

À propos du code

Fil d'Ariane avec ellipse "intelligente" (Flex)

Jouez avec la taille du navigateur pour voir comment ils se comportent lorsqu'il n'y a plus de place pour eux.

À propos du code

Cet exemple montre ce qui se passe lorsqu'un utilisateur se rapproche du bouton de retour. Le fil d'Ariane se développe et permet à l'utilisateur de naviguer presque n'importe où ailleurs dans le cours tout en n'ayant qu'un impact minimal sur l'espace.

Fil d'Ariane avec propriétés personnalisées CSS comme API.
Réalisé par Stas Melnikov
15 juin 2017

Flèches fil d'Ariane CSS pures multi-lignes adaptatives.
Réalisé par Glynn Smith
30 mai 2017

GIF de démonstration : Fil d'Ariane

Fil d'Ariane HTML et CSS.
Réalisé par Dany Santos
15 juillet 2016

Fil d'Ariane Material Design, suivi des progrès.
Réalisé par Shyam Chen
30 juillet 2015

Une liste de fils d'Ariane s'est effondrée pour afficher uniquement le texte d'aperçu pour tout sauf la page actuelle, avec le texte intégral affiché au survol/focus.
Réalisé par Skye
4 mars 2015

Fil d'Ariane réactif CSS pur.
Réalisé par Oliver Knoblich
2 avril 2014

CSS et CSS3 ont parcouru un long chemin ces derniers temps, de sorte que les anciens styles qui utilisent des images en arrière-plan pour obtenir la bonne forme ne sont plus nécessaires.

Dans cet article, je vais vous montrer comment créer des fils d'Ariane sur un site Web en utilisant du HTML plat et du CSS. Vous pouvez également consulter des sites intéressants, quelque chose pourrait être utile. J'ai récemment fait une compilation.

A la fin nous obtiendrons le résultat suivant :

Auparavant, pour faire des flèches transparentes entre deux blocs, une image de fond transparente était utilisée. Maintenant, ce problème peut être résolu en utilisant uniquement CSS.

1. Miettes de cadre

Miette de pain

Tout d'abord, créons une liste à puces -

éléments. Le fil d'Ariane sera ajouté en ajoutant de nouveaux
.

2. Ajouter CSS

Écrivons maintenant le CSS pour qu'il ressemble à ceci :

#crumbs ul li a ( display: block; float: left; height: 50px; background: #3498db; text-align: center; padding: 30px 40px 0 40px; position: relative; margin: 0 10px 0 0; font-size : 20px ; décoration de texte : aucune ; couleur : #fff ; )
Ces styles ajoutent :
1. vue en bloc et couleur bleue
2. centrer le texte et le rendre blanc
3. lisse rembourrage pour que le bloc s'affiche correctement verticalement
4. réinitialise les autres styles pour les liens avec décoration de texte : aucune
Attention: position : relative ajouté afin de contenir plus tard toutes les unités intérieures avec poste : absolu.

3. Comment créer l'effet de flèche

#crumbs ul li a:after ( content : "" ; border-top : 40px solide rouge ; border-bottom : 40px solide rouge ; border-left : 40px solide bleu ; position : absolu ; droite : -40px ; haut : 0 ; )
Pour créer des flèches, nous utiliserons la propriété :après, ce qui vous permet de créer un élément supplémentaire après le parent. Nous lui ajoutons position : absolue- c'est ce que nous avons fait positif : relatif pour les liens garder absolu propriété à l'intérieur du lien et la manipuler comme nous le voulons.

L'apparence de la flèche se fera à l'aide de bordures. L'exemple utilise le rouge exprès, mais pour le faire ressembler à un triangle, il utilisera transparent. Plus loin frontière sera mis en place à l'aide position : absolue.

4. Ajoutez de la transparence avec une bordure

Nous changeons rouge V frontière sur transparent pour créer un effet de transparence.
Bordure supérieure : 40 pixels transparents solides ; bordure inférieure : 40px solide transparent ; bordure gauche : 40px solide #3498db ;
5. Ajouter une flèche au dos

#crumbs ul li a:before ( content: ""; border-top : 40px solid transparent; border-bottom: 40px solid transparent; border-left: 40px solid #d4f2ff; position : absolu ; gauche : 0 ; haut : 0 ; )
En utilisant le même principe que dans la troisième étape, vous pouvez créer un triangle transparent derrière le bloc. Couleur frontière doit être défini comme couleur de fond du site pour créer un effet transparent.

Rembourrage : 30px 40px 0 80px ;
5. Ajout de nouveaux éléments

En ajoutant de nouveaux
augmenter la profondeur de la chapelure.
- Un
- Deux
- Trois
- Quatre
- Cinq
6. Premier et dernier

Pour créer un effet arrondi pour le premier et le dernier élément du fil d'Ariane, nous utiliserons :premier enfant Et :dernier enfant.
#crumbs ul li:first-child a ( border-top-left-radius: 10px; border-bottom-left-radius: 10px; ) #crumbs ul li:first-child a:before ( display: none; ) #crumbs ul li:last-child a ( padding-right: 80px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; ) #crumbs ul li:last-child a:after ( display: none ; )
7. Ajouter un effet de survol

#crumbs ul li a:hover ( background: #fa5ba5; ) #crumbs ul li a:hover:after ( border-left-color: #fa5ba5; )
N'oubliez pas non plus d'ajouter rayon de bordure lorsque vous survolez le premier et le dernier élément du fil d'Ariane.

C'est tout. Si vous avez des questions - écrivez des commentaires et partagez l'article s'il vous a plu !

Comment faire du fil d'Ariane sur votre site Web avec CSS par bologer

Grâce au développement de CSS et CSS3 ces dernières années, nous avons atteint le point où de nombreuses anciennes solutions logicielles impliquant des images d'arrière-plan peuvent désormais être entièrement construites en CSS. Dans ce didacticiel, nous verrons comment créer une séquence de liens de navigation appelée "fil d'Ariane" dans un style plat, sans avoir besoin de la technique d'image d'arrière-plan auparavant populaire appelée méthode de la "porte coulissante".

Les fils d'Ariane que nous allons créer sont stylisés sous forme de chevrons pour visualiser l'idée de contenu structuré. Auparavant, nous aurions utilisé une image d'arrière-plan PNG pour créer cette forme de chevron, mais maintenant, avec une technique de bordure intelligente, nous pouvons créer le même effet en utilisant uniquement CSS.
- Miette de pain
Nous allons commencer par créer des liens de navigation dans le fil d'Ariane sous forme de liste non ordonnée. Chaque fil d'Ariane sera un élément
avec l'élément d'ancrage installé.

#crumbs ul li a ( display : block ; float : left ; height : 50px ; background : #3498db ; text-align : center ; padding : 30px 40px 0 40px ; position : relative ; margin : 0 10px 0 0 ; font-size : 20px ; texte-décoration : aucune ; couleur : #fff ; )

Le code CSS initial définit chaque ancre d'élément de liste sur un style de rectangle bleu net. Le texte est centré et un remplissage égal est ajouté de tous les côtés. Afin de positionner les éléments absolument suivants, la propriété position: relative; est ajoutée à ces éléments afin que ces éléments absolument positionnés soient rendus par rapport à cet élément parent.

#crumbs ul li a:after ( content : "" ; border-top : 40px solide rouge ; border-bottom : 40px solide rouge ; border-left : 40px solide bleu ; position : absolue ; droite : -40px ; haut : 0 ; )

Nous allons maintenant créer un effet chevron en CSS, qui n'était auparavant réalisable qu'en utilisant une image d'arrière-plan. Utilisez le sélecteur :after pour créer un élément supplémentaire qui peut être stylé individuellement. La forme triangulaire est créée à l'aide de différentes bordures CSS. Ainsi, comme vous pouvez le voir dans l'image précédente, le triangle bleu peut être créé en appliquant des bordures supérieure et inférieure pour croiser la zone de couverture. Ces bordures sont colorées en rouge pour plus de clarté, mais si elles sont transparentes, un triangle bleu en résultera. Cet effet de bordure est ensuite mis en place à l'aide du positionnement absolu.

Bordure supérieure : 40px solide transparent ; border-bottom : 40px solide transparent ; bordure gauche : 40px solide #3498db ;

L'effet de bordure avec les valeurs de couleur correctes créera le triangle souhaité qui donnera à la chapelure la forme de chevron populaire.

#crumbs ul li a:before ( content : "" ; border-top : 40px solid transparent ; border-bottom : 40px solid transparent ; border-left : 40px solid #d4f2ff ; position : absolue ; left : 0 ; top : 0 ; )

En utilisant les mêmes principes, une autre forme triangulaire peut être appliquée sur le côté gauche du fil d'Ariane. Cette fois, la couleur de la bordure est définie sur la même couleur que la couleur d'arrière-plan pour masquer des parties de la couleur d'arrière-plan bleue du lien.

Remplissage : 30px 40px 0 80px ;
Au fur et à mesure que des liens sont ajoutés au HTML, la séquence de fils d'Ariane augmente, séparés par des chevrons de forme intéressante, grâce à l'effet de bordure CSS triangulaire et à une légère marge à droite.

#crumbs ul li:first-child a ( border-top-left-radius: 10px ; border-bottom-left-radius: 10px ; ) #crumbs ul li:first-child a:before ( display : none ; ) #crumbs ul li:last-child a ( padding-right : 80px ; border-top-right-radius: 10px ; border-bottom-right-radius: 10px ; ) #crumbs ul li:last-child a:after ( display : none ; )

La boîte de fil d'Ariane complète peut être stylisée en supprimant l'effet triangle des premier et dernier éléments avec les sélecteurs :first-child et :last-child , après quoi vous pouvez arrondir légèrement les coins avec la propriété border-radius .

#crumbs ul li a:hover ( background : #fa5ba5 ; ) #crumbs ul li a:hover :after ( border-left-color : #fa5ba5 ; )

Il ne reste plus qu'à appliquer l'effet de survol aux liens. N'oubliez pas de modifier la valeur de la propriété border-left-color pour l'effet triangle sur l'état de survol afin que tout le fil d'Ariane change de couleur.

Traduction - Bureau

Salutations. Le fil d'Ariane est un bloc assez utile sur n'importe quel site Web car il vous permet de voir le chemin complet vers la page sur laquelle vous vous trouvez actuellement. Et aujourd'hui je vais vous dire comment styliser le fil d'Ariane en css ? Ne pas créer, c'est-à-dire aménager. En général, il existe de nombreuses options, j'en aborderai deux.

Une option de conception simple - sans image

Le code html imite le fil d'Ariane. Que ce soit comme ça :

maison
Titre
Page

En principe, vous pouvez simplement poser une équerre, mais il n'y aura alors aucun moyen de contrôler l'épaisseur de la ligne. Je propose de le faire autrement, à l'aide de transformations. Voici le code qui le fera :

Cumbs1 a:pas(:dernier-enfant):après(
contenu: "";
affichage : bloc en ligne
largeur : 5px
hauteur : 5px ;
bordure supérieure : 2px noir uni ;
bordure droite : 2px noir uni ;
transformer : faire pivoter (45 degrés) ;
marge gauche : 5px
}
.cumbs1 a:hover(
couleur orange;
}

Peut-être que pour vous ce seront des sélecteurs compliqués, alors consultez cet article. L'essentiel est le suivant : utiliser le pseudo-élément (à propos de ce que c'est et comment l'utiliser - ) après ajoute notre séparateur à la fin de chaque lien. Il est formé à l'aide de deux cadres et pivoté de 45 degrés. Nous ajoutons également une couleur orange aux liens de survol. Ici, en principe, et toute la conception.

Une autre option de conception - avec une image

Dans ce cas, le fil d'Ariane aura l'air plus intéressant, comme ceci :

Pour ce faire, nous avons besoin d'une image et de quelques styles CSS :

Cumbs2(
fond : orange ;
largeur max : 250px
}
.cumbs2 un(
affichage : bloc en ligne
rembourrage : 7px 0
couleur : #000 ;
}
.cumbs2 a:pas(:dernier-enfant)(
arrière-plan : url(arrow.png) sans répétition 100 % 50 % ;
rembourrage à droite : 33 px ;
}

Je ne fournis pas le code html car c'est le même que dans le premier cas. Par où commencer ici ? Tout d'abord, nous définissons la couleur d'arrière-plan et la taille de l'ensemble du bloc avec des fils d'Ariane. Ensuite, nous définissons les styles généraux des liens - type de bloc en ligne, indentation en haut et en bas et couleur.

L'étape suivante est la plus intéressante - en utilisant la pseudo-classe not, sélectionnez tous les liens du bloc, à l'exception du dernier, et définissez l'image d'arrière-plan arrow.png pour eux, sans répétition, avec la position d'arrière-plan au milieu de hauteur et à la toute fin dans la largeur d'un lien. Les deux premiers liens ont besoin du retrait intérieur à droite juste pour y placer l'image. S'il n'y en avait pas, l'image irait dans le texte.

Je pense que vous avez déjà deviné comment fonctionne la non pseudo-classe - elle sélectionne tous les éléments, à l'exception de ce qui est indiqué entre parenthèses. Si quoi que ce soit, à l'avenir, j'écrirai une autre courte note sur le travail avec la pseudo-classe:not , où tout sera plus clair. Eh bien, voici 2 modèles de fil d'Ariane simples que vous pouvez utiliser pour créer le vôtre.
Une belle et originale sélection de fils d'Ariane, qui sont réalisés dans un design plat, en utilisant CSS3, dans une palette de nuances différente. Bien sûr, la visibilité de la navigation, sous forme de boutons, aide parfaitement à la fois l'utilisateur du site et les invités, c'est pour naviguer dans la ressource Internet, où vous pouvez naviguer par phrases clés qui nous seront affichées. Mais il convient aussi parfaitement au style, de plus en plus on voit que certaines personnes l'installent sur le module forum, sans parler du design moderne.
Si vous avez, comme vous le pensez, beaucoup de matériel, il est recommandé d'activer cette fonctionnalité ici. Le style de la liste ne sera pas pour éviter le point noir de la liste ou un autre style qui est le style par défaut. Parce qu'il le catégorise et certainement les modules, à partir de la page principale, et tout est présenté de manière élégante. Dans ce matériel, vous observez une sélection qui se fait dans le même style, c'est dans un style plat.
Ici, dans la forme, ils sont complètement différents, que quelqu'un n'aura même pas besoin de modifier pour s'adapter à leur conception, car ils s'y intégreront parfaitement. Nous allons maintenant utiliser le code css pour faire l'ancre de la première liste et définir l'ancre du dernier enfant pour en faire la valeur par défaut afin que le tringle n'apparaisse pas dans l'ancre du premier enfant pour l'ancre à gauche et la dernière enfant pour le côté droit.
Faire des miettes de pain

1. Dans une teinte jaune clair :
2. Palette claire aux tons verts :
3. En couleur framboise
4. Réalisé dans une palette bleue :
Ce sera une simple liste droite avec un arrière-plan et un rembourrage et un autre style. Après cela, je vais créer une structure triangulaire sur le côté droit de chaque ancre de liste en utilisant CSS, en jouant avec les propriétés broder.
Comme vous pouvez le voir dans la démo, lorsque nous survolons n'importe quelle ancre de liste sur les coffres de panure, cela donne un effet qui signifie visité ou se trouve dans cette section.
Ou on peut imaginer son effet pour le rendre actif comme fil d'Ariane actif. Vous pouvez dire que ces fils d'Ariane CSS ne sont que des fils d'Ariane, car je n'utiliserai que CSS et CSS3 pour créer ces fils d'Ariane.
Commençons l'installation :
- № 1
- № 1
- № 3
- № 4
- № 5
- Section 1
- Section 2
- Section 3
- Section 4
- Article 5
- ZOU 1
- ZOR 2
- ZOR 3
- ZOU 4
- ZOR 5
- Cliquez 1
- Cliquez 2
- Cliquez 3
- Cliquez 4
- Cliquez 5
CSS
Le style de la liste ne sera pas pour éviter le point noir de la liste ou un autre style qui est le style par défaut. Chaque liste div inline sera list-inline pour en faire une liste horizontale en utilisant l'affichage css : list-inline.
#breadcrumb-isanchogives1 (
aligner le texte : centrer ;
marge-haut : 30 px ;
}
#breadcrumb-isanchogives1 ul (
style de liste : aucun ;
affichage : tableau en ligne ;
}
#breadcrumb-isanchogives1 ul li (
affichage : en ligne ;
}
#breadcrumb-isanchogives1 ul li a (
bloc de visualisation;
flotteur : gauche ;
hauteur : 50px ;
arrière-plan : #ffd928 ;
aligner le texte : centrer ;
rembourrage : 30px 40px 0 80px ;
position : relative ;
marge : 0 10px 0 0 ;
taille de police : 20px
décoration de texte : aucune ;
couleur : #fff ;
}
#breadcrumb-isanchogives1 ul li a:after (
contenu: "";

bordure gauche : 40px solide #ffd928 ;
indice z : 1 ;
#breadcrumb-isanchogives1 ul li a:before (
contenu: "";
bordure supérieure : 40 pixels transparent solide ;
bordure inférieure : 40px solide transparent ;

}
#breadcrumb-isanchogives1 ul li:first-child a (
}
#breadcrumb-isanchogives1 ul li:first-child a:before (
affichage : aucun ;
}
#breadcrumb-isanchogives1 ul li:dernier-enfant a (
rembourrage à droite : 80px ;
}
#breadcrumb-isanchogives1 ul li:last-child a:after (
affichage : aucun ;
}
#breadcrumb-isanchogives1 ul li a:hover (
arrière-plan : #ff9a2d ;
}
#breadcrumb-isanchogives1 ul li a.wesove-readcrum(
arrière-plan : #ff9a2d ;
}
#breadcrumb-isanchogives1 ul li a:hover:after (
border-left-color : #ff9a2d ;
}
#breadcrumb-isanchogives1 ul li a.wesove-readcrum:after (
border-left-color : #ff9a2d ;
}
#breadcrumb-isanchogives2 (
aligner le texte : centrer ;
marge-haut : 30 px ;
}
#breadcrumb-isanchogives2 ul (
style de liste : aucun ;
affichage : tableau en ligne ;
}
#breadcrumb-isanchogives2 ul li (
affichage : en ligne ;
}
#breadcrumb-isanchogives2 ul li a (
bloc de visualisation;
flotteur : gauche ;
hauteur : 50px ;
arrière-plan : #56e9ae ;
aligner le texte : centrer ;
rembourrage : 30px 40px 0 80px ;
position : relative ;
marge : 0 10px 0 0 ;
taille de police : 20px
décoration de texte : aucune ;
couleur : #fff ;
}
#breadcrumb-isanchogives2 ul li a:after (
contenu: "";
bordure supérieure : 40 pixels transparent solide ;
bordure inférieure : 40px solide transparent ;
bordure gauche : 40px solide #56e9ae ;
position : absolue ; droite : -40px ; haut : 0 ;
indice z : 1 ;
#breadcrumb-isanchogives2 ul li a:before (
contenu: "";
bordure supérieure : 40 pixels transparent solide ;
bordure inférieure : 40px solide transparent ;
bordure gauche : 40px solide #f2f2f2 ;
position : absolue ; gauche : 0 ; haut : 0 ;
}
#breadcrumb-isanchogives2 ul li:first-child a (
}
#breadcrumb-isanchogives2 ul li:dernier-enfant a (
rembourrage à droite : 80px ;
}
#breadcrumb-isanchogives2 ul li a:hover (
arrière-plan : #49c593 ;
}
#breadcrumb-isanchogives2 ul li a.wesove-readcrum (
arrière-plan : #49c593 ;
}
#breadcrumb-isanchogives2 ul li a:hover:after (
border-left-color : #49c593 ;
}
#breadcrumb-isanchogives2 ul li a.wesove-readcrum:after (
border-left-color : #49c593 ;
}
#breadcrumb-isanchogives3 (
aligner le texte : centrer ;
marge-haut : 30 px ;
}
#breadcrumb-isanchogives3 ul (
style de liste : aucun ;
affichage : tableau en ligne ;
}
#breadcrumb-isanchogives3 ul li (
affichage : en ligne ;
}
#breadcrumb-isanchogives3 ul li a (
bloc de visualisation;
flotteur : gauche ;
hauteur : 50px ;
arrière-plan : #ff818b ;
aligner le texte : centrer ;
rembourrage : 30px 40px 0 80px ;
position : relative ;
marge : 0 10px 0 0 ;
taille de police : 20px
décoration de texte : aucune ;
couleur : #fff ;
}
#breadcrumb-isanchogives3 ul li a:after (
contenu: "";
hauteur : 80px ;
largeur : 40 px ;
arrière-plan : #ff818b ;
position : absolue ; droite : -40px ; haut : 0 ;
indice z : 1 ;
#breadcrumb-isanchogives3 ul li a:before (
contenu: "";
hauteur : 80px ;
largeur : 40 px ;
rayon de bordure : 0px 40px 40px 0px ;
arrière-plan :#f2f2f2 ;
position : absolue ; gauche : 0 ; haut : 0 ;
}
#breadcrumb-isanchogives3 ul li:first-child a (
border-top-left-radius : 10 px ; border-bottom-left-radius : 10 px ;
}
#breadcrumb-isanchogives3 ul li:first-child a:before (
affichage : aucun ;
}
#breadcrumb-isanchogives3 ul li:dernier-enfant a (
rembourrage à droite : 80px ;
border-top-right-radius : 10 px ; border-bottom-right-radius : 10 px ;
}
#breadcrumb-isanchogives3 ul li:last-child a:after (
affichage : aucun ;
}
#breadcrumb-isanchogives3 ul li a:hover (
arrière-plan : #ea606b ;
}
#breadcrumb-isanchogives3 ul li a.wesove-readcrum (
arrière-plan : #ea606b ;
}
#breadcrumb-isanchogives3 ul li a:hover:after (
arrière-plan : #ea606b ;
}
#breadcrumb-isanchogives3 ul li a.wesove-readcrum:after (
arrière-plan : #ea606b ;
}
#breadcrumb-isanchogives4 (
aligner le texte : centrer ;
marge-haut : 30 px ;
}
#breadcrumb-isanchogives4 ul (
style de liste : aucun ;
affichage : tableau en ligne ;
}
#breadcrumb-isanchogives4 ul li (
affichage : en ligne ;
}
#breadcrumb-isanchogives4 ul li a (
bloc de visualisation;
flotteur : gauche ;
hauteur : 50px ;
arrière-plan : #2b97cc ;
aligner le texte : centrer ;
rembourrage : 30px 40px 0 80px ;
position : relative ;
marge : 0 10px 0 0 ;
taille de police : 20px
décoration de texte : aucune ;
couleur : #fff ;
}
#breadcrumb-isanchogives4 ul li a:after (
contenu: "";
hauteur : 80px ;
largeur : 40 px ;
rayon de bordure : 0px 40px 40px 0px ;
arrière-plan :#2b97cc ;
position : absolue ; droite : -40px ; haut : 0 ;
indice z : 1 ;
#breadcrumb-isanchogives4 ul li a:before (
contenu: "";
hauteur : 80px ;
largeur : 40 px ;
arrière-plan :#f2f2f2 ;
rayon de bordure : 0px 40px 40px 0px ;
position : absolue ; gauche : 0 ; haut : 0 ;
}
#breadcrumb-isanchogives4 ul li:first-child a (
border-top-left-radius : 0px ; border-bottom-left-radius : 0px ;
}
#breadcrumb-isanchogives4 ul li:dernier-enfant a (
rembourrage à droite : 80px ;
border-top-right-radius : 0px ; border-bottom-right-radius : 0px ;
}
#breadcrumb-isanchogives4 ul li a:hover (
arrière-plan : #207ca8 ;
}
#breadcrumb-isanchogives4 ul li a.wesove-readcrum (
arrière-plan : #207ca8 ;
}
#breadcrumb-isanchogives4 ul li a:hover:after (
arrière-plan : #207ca8 ;
}
#breadcrumb-isanchogives4 ul li a.wesove-readcrum:after (
arrière-plan : #207ca8 ;
}

Tout d'abord, créez la structure html basée sur les balises div et ul li. Le div contient un identifiant, chaque identifiant contiendra un style différent dans la feuille de style pour représenter un design distinct. Où nous utilisons la numérotation comme un, deux, trois, quatre.
Ces identifiants ont la même structure interne, séparés par des styles différents selon leur identifiant.