Comment : utiliser les fenêtres Appliquer des styles et Gérer les styles

Mise à jour : novembre 2007

Les fenêtres Appliquer des styles et Gérer les styles vous permettent d'appliquer, de modifier, de renommer et de supprimer des styles. Vous pouvez également attacher ou détacher des feuilles de style en cascade externes (CSS), sélectionner toutes les instances d'un style et localiser le code qui contient l'ensemble de règles d'un style.

Chaque fenêtre a des utilisations spécifiques. Utilisez la fenêtre Appliquer des styles pour appliquer un style unique ou plusieurs styles à un élément de page. La fenêtre Appliquer des styles affiche chaque style d'après les règles du style. Par conséquent, vous pouvez identifier rapidement le style à utiliser, en vous basant sur l'apparence du style présenté dans la fenêtre.

La fenêtre Gérer les styles permet de modifier l'emplacement ou l'ordre des styles. Vous pouvez déplacer des styles d'une feuille de style CSS externe dans une autre feuille de style CSS interne et vice versa, ou déplacer l'emplacement d'un style dans une feuille de style ou un bloc de style.

Les deux outils utilisent des icônes pour indiquer le mode de définition du style. Les différentes icônes sont présentées et décrites dans le tableau suivant.

Icône	Description
	Un point rouge indique un style basé sur un ID.
	Un point vert indique un style basé sur une classe.
	Un point bleu indique un style basé sur un élément.
	Un point jaune indique un style intraligne.
	Un cercle autour d'un point indique que le style est utilisé sur la page active.
	Un arobase (@) indique une feuille de style en cascade externe importée.

Présentation de la fenêtre Appliquer des styles

La fenêtre Appliquer des styles répertorie toutes les règles de style CSS définies pour une page. Cela inclut les règles de style définies dans les feuilles de style externes, telles que les styles intralignes et les styles définis dans la page. Les règles de style basées sur une classe et basées sur un ID apparaissent sous le nom du fichier .css externe qui contient le style. Si la règle de style est définie dans la page, il apparaît sous Page active. Les règles de style basées sur un élément sont organisées de la même façon, mais elles apparaissent sous un titre distinct, intitulé Sélecteurs contextuels.

Vous pouvez définir l'affichage de toutes les règles de style dans la fenêtre. Vous pouvez également restreindre la liste aux seules règles de style utilisées dans la page Web active ou dans la sélection actuelle de la page. Indépendamment de l'option que vous sélectionnez, les règles de style basées sur un élément et les règles de style intraligne n'apparaissent que lorsque vous maintenez le pointeur de la souris sur les éléments de page qui utilisent le style, et lorsque vous sélectionnez le contenu qui utilise le style.

Vous pouvez également trier la liste des styles qui apparaissent dans la fenêtre Appliquer des styles.

Si un style particulier est difficile à afficher dans l'arrière-plan de la fenêtre, vous pouvez sélectionner une couleur qui apparaîtra dans les styles sous-jacents de la fenêtre qui ne contiennent pas de propriété d'arrière-plan.

Remarque :
Pour afficher temporairement toutes les règles d'un style dans une fenêtre indépendante, maintenez le pointeur de la souris sur le style dans la fenêtre Appliquer des styles.

Vue d'ensemble de la fenêtre Appliquer des styles

L'interface utilisateur de la fenêtre Appliquer des styles comprend les fonctionnalités suivantes :

• Nouveau style, qui permet d'accéder à la boîte de dialogue Styles.

• Attacher une feuille de style, qui permet de sélectionner une feuille de style à attacher à la page active.

• Effacer les styles, qui permet de supprimer toutes les règles de style basées sur une classe et toutes les règles de style intraligne de la sélection actuelle.

• Page active, qui répertorie les règles de style basées sur une classe et basées sur un ID de la page active et des fichiers CSS externes.

• Un fichier CSS externe, indiqué par l'arobase (@), qui affiche toutes les règles de style importées dans la page Web active.

• Un fichier CSS externe, qui est lié à la page Web active et est affiché sous forme d'une section distincte.

• Une bordure rectangulaire pleine autour d'un style, qui indique qu'il est utilisé par la sélection actuelle.

• Des sélecteurs contextuels, qui répertorient les règles de style basées sur un élément, qui sont utilisées par la sélection actuelle.

• Style intraligne, qui affiche les règles de style appliquées à l'élément inline sélectionné.

• Un menu contextuel pour chaque règle de style, qui permet d'exécuter de nombreuses tâches associées au style.

Utilisation de la fenêtre Appliquer des styles

La fenêtre Appliquer des styles permet d'appliquer rapidement un ou plusieurs styles à un élément de page.

Pour appliquer des styles à un élément de page dans la fenêtre Appliquer des styles

1. Pour afficher la fenêtre Appliquer des styles, dans le menu Format, cliquez sur Styles CSS, puis cliquez sur Appliquer des styles.

2. Dans une page Web, en mode Design ou Source , sélectionnez l'élément auquel vous souhaitez appliquer un style, puis effectuez l'une des opérations suivantes dans la fenêtre Appliquer des styles :

   • Pour appliquer une seule règle de style existante, cliquez sur le style à appliquer, basé sur une classe ou sur un ID.

   • Pour appliquer plusieurs règles de style existantes, maintenez la touche CTRL enfoncée et cliquez sur chaque style à appliquer.

Vous pouvez modifier l'ordre des styles, changer les styles à afficher, et personnaliser la fenêtre de présentation des éléments choisis.

Pour trier les styles dans la fenêtre Appliquer des styles

• Dans la fenêtre Appliquer des styles, cliquez sur Options, puis effectuez l'une des opérations suivantes :

  • Pour répertorier les règles de style dans leur ordre d'apparition dans la feuille de style CSS, cliquez sur Classer par ordre.

  • Pour répertorier les styles par ordre alphabétique et par type de style (basé sur une classe ou basé sur un ID), cliquez sur Classer par type.

Vous pouvez afficher ou masquer les règles de style dans la fenêtre Appliquer des styles. Les styles basés sur un élément et les règles de style intraligne n'apparaissent dans la fenêtre Appliquer des styles que lorsque vous maintenez le pointeur de la souris sur le contenu qui utilise le style, ou lorsque vous sélectionnez le contenu qui utilise le style.

Pour afficher ou masquer des styles dans la fenêtre Appliquer des styles

• Dans la fenêtre Appliquer des styles, cliquez sur Options, puis effectuez l'une des opérations suivantes :

  • Pour répertorier toutes les règles de style contenues dans les feuilles de style CSS externe, interne et inline de la page Web active, cliquez sur Afficher tous les styles.

  • Pour répertorier uniquement les règles de style utilisées dans la page Web active, cliquez sur Afficher les styles utilisés dans la page active.

  • Pour répertorier uniquement les règles de style utilisées par la sélection actuelle dans la page Web, cliquez sur Afficher les styles utilisés dans la sélection.

Si une règle de style n'est pas dotée d'une couleur d'arrière-plan, vous pouvez appliquer une couleur qui mettra le style en évidence dans la fenêtre Appliquer des styles. Si le style est doté d'une règle de style d'arrière-plan, l'arrière-plan est affiché avec le style.

Pour afficher une couleur d'arrière-plan dans la fenêtre Appliquer des styles

1. Dans la fenêtre Appliquer des styles, cliquez sur Options, puis sur Couleur d'arrière-plan de l'aperçu.

2. Dans la boîte de dialogue Couleurs supplémentaires, sélectionnez une couleur, puis cliquez sur OK.

Présentation de la fenêtre Gérer les styles

La fenêtre Gérer les styles répertorie toutes les règles de style définies dans la feuille de style en cascade externe (CSS) de la page. Elle répertorie également les règles de style définies dans la page, mais pas en tant que styles intralignes. La fenêtre Gérer les styles permet de déplacer les styles d'une feuille de style externe vers l'élément style de la page et vice versa. Vous pouvez également utiliser la fenêtre pour déplacer l'emplacement d'un style dans le jeu de règles de style CSS.

Vous pouvez définir un affichage de toutes les règles de style dans la fenêtre, ou restreindre la liste aux seules règles de style utilisées dans la page Web active ou dans la sélection actuelle de la page. Toutes les règles de style basées sur une classe, sur un élément et sur un ID apparaissent sous le nom du fichier .css externe qui contient la règle de style. Si la règle de style est définie dans la page active, elle apparaît dans la zone Page active.

Remarque :
Pour afficher temporairement toutes les règles d'un style dans une fenêtre indépendante, maintenez le pointeur de la souris sur le style dans la fenêtre Appliquer des styles.

Vue d'ensemble de la fenêtre Gérer les styles

L'interface utilisateur de la fenêtre Gérer les styles comprend les fonctionnalités suivantes :

• Nouveau style, qui permet d'accéder à la boîte de dialogue Styles.

• Attacher une feuille de style, qui permet de sélectionner une feuille de style à attacher à la page active.

• Page active, qui répertorie les règles de style basées sur une classe et basées sur un ID de la page active et des fichiers CSS externes importés.

• Un onglet pour tout fichier .css externe provenant de la page Web active.

• Sélecteur de regroupement par défaut, qui affiche les sélecteurs de tous les styles qui contiennent plusieurs sélecteurs dans un groupe. Vous pouvez répertorier séparément les sélecteurs en cliquant sur Options, puis sur Séparer les sélecteurs groupés.

Pour afficher un aperçu d'un style sélectionné dans la fenêtre Gérer les styles, cliquez sur Options, puis cliquez sur Afficher l'aperçu du style sélectionné.

Utilisation de la fenêtre Gérer les styles

Vous pouvez modifier l'ordre des styles et personnaliser la fenêtre pour afficher les éléments de votre choix. Si vous déplacez un style vers le haut ou vers le bas dans la liste, le style se déplace également dans la feuille de style. Cette modification peut affecter le mode de production en cascade des propriétés du style. Par exemple, si un attribut de propriété est défini dans deux styles différents, c'est le dernier style qui prendra la priorité.

Remarque :

Lorsque la fenêtre Gérer les styles est définie sur Classer par élément ou Classer par type, vous ne pouvez pas déplacer un style vers un point particulier dans la liste des styles. Dans l'un et l'autre cas, vous ne pouvez déplacer un style d'une feuille de style CSS externe vers une autre feuille de style CSS externe, ou vers la page, ou vice versa, qu'en faisant glisser le style sur le nom du fichier CSS externe ou vers la section Page active.

Pour déplacer un style dans la fenêtre Gérer les styles

1. Pour afficher la fenêtre Gérer les styles, dans le menu Format, cliquez sur Styles CSS, puis cliquez sur Gérer les styles.

2. Dans la fenêtre Gérer les styles, cliquez sur Options, puis sur Classer par ordre, puis procédez comme suit :

   • Pour déplacer l'emplacement d'un style dans la feuille de style CSS, faites glisser le style vers le haut ou vers le bas dans la liste. Par exemple, vous pouvez déplacer les styles que vous utilisez fréquemment, afin qu'ils apparaissent comme adjacents.

   • Pour déplacer un style d'une page à une feuille de style CSS externe attachée à la page, faites glisser le style de sous la zone Page active vers le nom de la feuille de style CSS externe, ou vers un point particulier dans la liste de styles de la feuille de style CSS externe.

   • Pour déplacer un style d'une feuille de style CSS externe vers une page, faites glisser le style de sous le nom de la feuille de style CSS externe vers la zone Page active, ou vers un point particulier dans la liste de styles, dans la zone Page active. Si la zone Page active n'apparaît pas, ajoutez un élément de style à l'intérieur de l'élément head de la page Web.

   • Pour déplacer un style d'une feuille de style CSS externe vers une autre feuille de style CSS externe, faites glisser le style sur le nom de la feuille de style CSS externe de votre choix, ou vers un point particulier de la liste des styles de la feuille de style CSS externe.

Bien que la fenêtre Gérer les styles soit principalement utilisée pour gérer les styles, vous pouvez également l'utiliser pour appliquer un style à un élément de page.

Pour appliquer un style dans la fenêtre Gérer les styles

1. Dans une page Web, en mode Design ou mode Source, sélectionnez l'élément auquel vous souhaitez appliquer un style.

2. Cliquez avec le bouton droit sur le style de classe ou d'ID à appliquer, et dans le menu contextuel, cliquez sur Appliquer un style.

Vous pouvez également trier les styles en utilisant les éléments présentés sous le bouton Options.

Pour trier les styles dans la fenêtre Gérer les styles

• Dans la fenêtre Gérer les styles, cliquez sur Options, puis effectuez l'une des opérations suivantes :

  • Cliquez sur Classer par ordre pour répertorier les styles d'après leur ordre d'affichage dans la feuille de style CSS.

  • Cliquez sur Classer par élément pour répertorier les styles sous l'élément HTML auquel chaque style doit être appliqué.

  • Cliquez sur Classer par type pour répertorier des styles en mode alphabétique et d'après le type de style.

Vous pouvez séparer des styles groupés pour simplifier leur utilisation.

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

• Dans la fenêtre Gérer les styles, cliquez sur Options, puis cliquez sur Séparer les sélecteurs groupés.

Vous pouvez également spécifier les styles à afficher dans la fenêtre Gérer les styles.

Pour afficher ou masquer des styles dans la fenêtre Gérer les styles

• Dans la fenêtre Gérer les styles, cliquez sur Options, puis sur Classer par ordre, puis procédez comme suit :

  • Cliquez sur Afficher tous les styles pour répertorier tous les styles qui sont contenus dans les feuilles de style externes, figurent sur la page et constituent des règles de style intraligne de la page active.

  • Pour répertorier uniquement les styles utilisés dans la page active, cliquez sur Afficher les styles utilisés dans la page active.

  • Pour répertorier uniquement les styles utilisés par la sélection actuelle dans la page, cliquez sur Afficher les styles utilisés dans la sélection.

Voir aussi

Concepts

Comment : utiliser la fenêtre Propriétés CSS

Comment : utiliser la barre d'outils Application de style directe