Volet des tâches Appliquer les styles

Le volet des tâches Appliquer les styles vous permet d’appliquer, de modifier, de renommer et de supprimer des styles ; attacher ou détacher des feuilles de style en cascade (CSS) externes ; sélectionner toutes les instances d’un style, ou atteindre un fragment de code contenant un ensemble de règles de style. Le volet des tâches Appliquer les styles affiche chaque style selon les règles du style, afin que vous puissiez rapidement identifier le style que vous voulez utiliser grâce à son apparence visuelle.

Lorsque vous ouvrez une page Web, le volet des tâches Appliquer les styles répertorie les styles définis dans les feuilles de style en cascade de toutes les pages, notamment les styles intralignes, externes et internes de la feuille de style en cascade. Les sélecteurs de classe 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. Les sélecteurs d’élément sont organisés de la même façon, mais s’affichent sous un autre titre appelé Sélecteurs contextuels en dessous de la liste des sélecteurs de classe et d’ID. Vous pouvez configurer le volet des tâches pour qu’il répertorie tous les styles ou qu’il ne répertorie que les styles utilisés dans la page Web active ou dans la sélection actuelle dans la page. Quelles que soient les options que vous avez sélectionnées, les sélecteurs d’élément et intralignes apparaissent dans le volet des tâches uniquement lorsque vous avez placé le curseur dans le contenu qui utilise le style ou sélectionné le contenu qui utilise le style.

Vous pouvez trier la liste de styles qui s’affichent dans le volet des tâches Appliquer les styles et également limiter la liste pour qu’elle affiche uniquement les styles utilisés par la page Web active ou dans la sélection actuelle. Si la couleur d’arrière-plan blanche du volet des tâches rend la visibilité d’un style particulier difficile, vous pouvez sélectionner une couleur à afficher dans le volet des tâches derrière les styles qui ne contiennent pas de propriété d’arrière-plan.

Conseil :
Pour afficher provisoirement toutes les règles d’un style dans une fenêtre flottante, à côté de votre curseur, pointez sur le style dans le volet des tâches Appliquer les styles.

Volet des tâches Appliquer les styles

1. Effacer les styles supprime tous les sélecteurs de classe et les styles intralignes de la sélection actuelle.

2. Page active répertorie les sélecteurs de classe et d’ID des fichiers CSS internes et des fichiers CSS externes importés.

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

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

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

6. Une bordure rectangulaire continue s’affiche autour des styles utilisés par la sélection actuelle.

7. Sélecteurs contextuels affiche les sélecteurs d’élément utilisés par la sélection actuelle.

8. Les sélecteurs de classe et d’ID contenus dans le fichier CSS externe lié (events.css).

9. Un menu déroulant est associé à chaque style permettant de réaliser de nombreuses tâches liées aux styles. Pointez sur un style et cliquez sur la flèche, ou cliquez avec le bouton droit sur un style.

Les icônes qui s’affichent en regard de chaque style dans le volet des tâches Appliquer les styles identifient le type de style et indiquent s’il est utilisé dans la page Web active.

Icônes du volet des tâches Appliquer les styles

Icône	Description
	Un point rouge apparaît à côté des sélecteurs d’ID.
	Un point vert apparaît à côté des sélecteurs de classe.
	Un point bleu apparaît à côté des sélecteurs d’élément.
	Un point jaune s’affiche à côté des styles intralignes.
	Un cercle s’affiche autour d’un point de couleur pour indiquer les styles utilisés dans la page Web active.
	Un symbole @ apparaît en regard des feuilles de style en cascade externes importées.

Procédures

Pour trier la liste des styles dans le volet des tâches Appliquer les styles

• Dans le volet des tâches Appliquer les styles, cliquez sur Options, puis procédez comme suit :

  • Pour afficher les styles selon leur ordre d’apparition dans la CSS, sélectionnez Classer par ordre.

  • Pour afficher les styles par ordre alphabétique et selon le type de style (sélecteurs de classe ou d’ID), sélectionnez Classer par type.

Pour afficher ou masquer les styles dans le volet des tâches Appliquer les styles

• Dans le volet des tâches Appliquer les styles, cliquez sur Options, puis procédez comme suit :

  • Pour répertorier tous les styles contenus dans des feuilles de style en cascade internes, externes et intralignes de la page Web active, sélectionnez Afficher tous les styles.

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

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

  Remarque :
  Les sélecteurs d’élément et les styles intralignes apparaissent dans le volet des tâches Appliquer les styles uniquement lorsque vous placez le curseur dans le contenu qui utilise le style ou lorsque vous sélectionnez ce contenu.

Pour afficher un arrière-plan coloré dans le volet des tâches Appliquer les styles derrière les styles qui ne contiennent pas de règle de propriété d’arrière-plan

1. Dans le volet des tâches Appliquer les styles, cliquez sur Options, puis sélectionnez Aperçu de la couleur d’arrière-plan.

2. Dans la boîte de dialogue Autres couleurs, sélectionnez une couleur, puis cliquez sur OK.

Voir aussi

Concepts

Volet des tâches Gérer les styles

Volet des tâches Propriétés CSS

Vue d’ensemble des outils des feuilles de style en cascade

Appliquer un style

Styles