Partager via

Panneau Gérer les styles

  • Article

Le panneau Gérer les styles permet d’appliquer, de modifier, de renommer et de supprimer des styles ; attacher ou détacher des feuilles de style en cascade (CSS) ; sélectionner toutes les instances d’un style, et d’atteindre un code contenant un ensemble de règles de style. Vous pouvez également utiliser le panneau Gérer les styles pour transférer des styles d’une feuille de style en cascade externe à une feuille de style en cascade interne et inversement, ou pour déplacer un style au sein d’une feuille de style en cascade.

Lorsque vous ouvrez une page Web, le panneau Gérer les styles répertorie tous les styles définis dans les feuilles de style en cascade externes et internes dans la page, mais pas dans une feuille de style en cascade intraligne. Vous pouvez configurer le panneau pour qu’il répertorie tous les styles ou uniquement ceux utilisés dans la page Web active ou dans la sélection actuelle dans la page. Tous les sélecteurs de classe, d’élément et d’ID s’affichent soit sous le nom du fichier .css externe qui contient le style, soit sous Page active si le style se trouve dans une feuille de style en cascade interne.

tip noteConseil :

Pour afficher provisoirement toutes les déclarations de propriétés d’un style dans une fenêtre flottante, à côté de votre curseur, pointez sur le style dans le panneau Gérer les styles.

Panneau Gérer les styles

Cc295470.c7cb514c-3f8d-46e0-a624-8c82af568ddf(fr-fr,Expression.40).png

Cc295470.edef891a-6b74-4192-8f7f-5079614b9112(fr-fr,Expression.40).png

Un fichier CSS externe lié à partir de la page Web active.

Cc295470.957413f8-28e0-4dc7-a144-0598679350b9(fr-fr,Expression.40).png

Liste des sélecteurs de classe, d’élément et d’ID des feuilles de style en cascade internes et des fichiers CSS externes importés, telle que définie dans la Page active.

Cc295470.13f14333-cc5f-457a-863b-ccd449500941(fr-fr,Expression.40).png

Un fichier CSS externe importé dans la page Web active.

Cc295470.0a66dad8-587c-4ccb-86ee-5e9cd1ef8c68(fr-fr,Expression.40).png

Un style défini dans une feuille de style en cascade dans la page Web active.

Cc295470.9c26150c-cd15-44bb-bf69-ff72093d3d71(fr-fr,Expression.40).png

Par défaut, les sélecteurs d’un style qui contient plusieurs sélecteurs apparaissent groupés. Cependant, vous pouvez répertorier les sélecteurs séparément en cliquant sur Options puis sur Séparer les sélecteurs groupés.

Les icônes qui s’affichent en regard de chaque style dans le panneau Gérer les styles identifient le type de style et indiquent s’il est utilisé dans la page Web active.

Icônes du panneau Gérer les styles

Icône Description
Cc295470.d2d37440-9664-4050-a58e-7fee8ea63242(fr-fr,Expression.40).png

Un point rouge apparaît à côté des sélecteurs d’ID.
Cc295470.2374f498-4295-4fe3-be55-7d154c89142a(fr-fr,Expression.40).png

Un point vert apparaît à côté des sélecteurs de classe.
Cc295470.c983e0ca-2bc5-409e-b8fc-834785293639(fr-fr,Expression.40).png

Un point bleu apparaît à côté des sélecteurs d’élément.
Cc295470.e67de9f1-9a1a-46ce-8629-06280b678e1b(fr-fr,Expression.40).png

Un cercle s’affiche autour d’un point de couleur pour indiquer les styles utilisés dans la page Web active.
Cc295470.040e2329-921d-46af-9cba-9f280c15d703(fr-fr,Expression.40).png

Un symbole @ apparaît en regard des feuilles de style en cascade externes importées.

Pour déplacer un style

  1. Dans le panneau Gérer les styles, cliquez sur Options, puis sélectionnez Classer par ordre.

  2. Effectuez l’une des opérations suivantes :

    • Pour déplacer un style dans la feuille de style en cascade, faites glisser le style vers le haut ou vers le bas de la liste. Par exemple, vous pouvez déplacer les styles que vous utilisez le plus souvent afin qu’ils s’affichent les uns à côté des autres de manière plus pratique.

    • Pour transférer un style d’une feuille de style en cascade interne vers une feuille de style en cascade externe associée à la page, faites glisser le style depuis la Page active vers le nom de la feuille de style en cascade externe de votre choix ou vers un point spécifique de la liste des styles de cette même feuille de styles en cascade externe.

    • Pour déplacer un style depuis une feuille de style en cascade externe vers une feuille de style en cascade interne, faites glisser le style depuis le nom de la feuille de style CSS externe vers la Page active ou un point spécifique de la liste des styles de la Page active. Si la Page active ne s’affiche pas, ajoutez un ensemble de balises <style></style> entre les balises <head></head> de votre page Web.

    • Pour déplacer un style depuis une feuille de style en cascade externe vers une autre feuille de style en cascade externe, faites glisser le style vers le nom de la feuille de style en cascade vers laquelle vous souhaitez déplacer le style ou vers un point spécifique de la liste des styles de la feuille de style en cascade externe.

    NoteRemarque :

    Lorsque le panneau Gérer les styles est défini sur Classer par élément ou sur Classer par type dans le panneau Options, vous ne pouvez pas déplacer un style vers un point spécifique de la liste des styles. Quelle que soit l’option choisie, vous pouvez déplacer un style uniquement depuis une feuille de style en cascade externe vers une autre feuille de style en cascade externe ou vers une feuille de style en cascade interne et inversement, en faisant glisser le style vers le nom du fichier CSS externe ou vers la Page active (pour la feuille de style en cascade interne).

Pour trier les styles dans le panneau Gérer les styles

  • Dans le panneau Gérer les styles, cliquez sur Options, puis procédez comme suit :

    Sélectionnez Pour

    Classer par ordre

    Répertorier les styles en fonction de l’ordre dans lequel ils apparaissent dans la feuille de style en cascade.

    Classer par élément

    Répertorie les styles sous l’élément HTML auquel s’applique chaque style.

    Classer par type

    Répertorie les styles par ordre alphabétique et en fonction du type de style.

Pour répertorier séparément chaque sélecteur de styles qui contiennent plusieurs sélecteurs

  • Dans le panneau Gérer les styles, cliquez sur Options, puis sélectionnez Séparer les sélecteurs groupés.

Pour afficher ou masquer les styles dans le panneau Gérer les styles

  • Dans le panneau Gérer les styles, cliquez sur Options, puis procédez comme suit :

    Sélectionnez Pour

    Afficher tous les styles

    Répertorie tous les styles contenus dans des feuilles de style en cascade internes, externes et intralignes de la page Web active.

    Afficher les styles utilisés dans la page active

    Répertorie uniquement les styles utilisés dans la page Web active.

    Afficher les styles utilisés dans la sélection

    Répertorie uniquement les styles utilisés dans la sélection actuelle de la page Web.

Pour afficher un aperçu d’un style sélectionné dans le panneau Gérer les styles

  • Dans le panneau Gérer les styles, cliquez sur Options, puis sélectionnez Afficher l’aperçu du style sélectionné.

Voir aussi

Référence

Panneau Appliquer les styles
Panneau Propriétés CSS

Concepts

Utilisation d'outils de feuille de style en cascade
Référence des feuilles de style en cascade
Utilisation de styles