Panneau Styles CSS

Le panneau Styles CSS vous permet de suivre les règles CSS et les propriétés qui affectent un élément de page sélectionné (mode Actuel), ou l’ensemble des règles et des propriétés qui sont disponibles pour le document (mode Tous). Un bouton bascule placé sur la partie supérieure du panneau vous permet de passer d’un mode à l’autre. Le panneau Styles CSS vous permet de modifier les propriétés CSS dans les deux modes.

En mode Actuel, le panneau Styles CSS présente trois volets : un volet Résumé de la sélection qui présente les propriétés CSS de la sélection en cours dans le document, un volet Règles qui précise l’emplacement des propriétés sélectionnées (ou une cascade de règles pour la balise sélectionnée, selon votre sélection), et un volet Propriétés qui vous permet de modifier les propriétés CSS de la règle appliquées à la sélection.

Vous pouvez redimensionner l’un quelconque des volets en faisant glisser les cadres entre les volets et redimensionner les colonnes en faisant glisser les séparateurs.

Le volet Résumé de la sélection récapitule les propriétés CSS de l’élément sélectionné dans le document actif et leurs valeurs. Ce résumé décrit les propriétés de toutes les règles s’appliquant directement à la sélection. Seules les propriétés définies apparaissent.

Par exemple, les règles suivantes créent un style de classe et un style de balise (dans ce cas un paragraphe) :

Si vous sélectionnez le texte d’un paragraphe de style de classe .foo dans la fenêtre du document, le volet Résumé de la sélection affiche les propriétés concernées par les deux règles, puisque ces deux règles s’appliquent à la sélection. Dans ce cas, le volet Résumé de la sélection affiche la liste des propriétés suivantes :

Le volet Résumé de la sélection classe les propriétés par ordre croissant de spécificité. Dans l’exemple précédent, le style de balise définit la taille de la police et le style de classe, la famille et la couleur de la police. (La famille de police définie par la classe est prioritaire sur celle définie par le style de balise car la spécificité des sélecteurs de classe est supérieure à celle des sélecteurs de balise. Pour plus d’informations sur la spécificité du CSS, voir www.w3.org/TR/CSS2/cascade.html.)

Le volet Règles dispose de deux vues (À propos ou Règles) selon votre sélection. Dans la vue À propos (par défaut), le volet présente le nom de la règle définissant la propriété CSS sélectionnée, ainsi que le nom du fichier contenant cette règle. Dans la vue Règles, le volet affiche la cascade, ou hiérarchie, des règles s’appliquant directement ou indirectement à la sélection en cours. (L’onglet auquel la règle s’applique directement s’affiche dans la colonne de droite.) Pour passer d’une vue à l’autre, cliquez sur les boutons Afficher les informations et Afficher cascade situés dans le coin supérieur droit du volet Règles.

Lorsque vous sélectionnez une propriété dans le volet Résumé de la sélection, toutes les propriétés de la règle appliquée s’affichent au-dessous dans le volet Propriétés. (La règle qui s’applique est également sélectionnée dans le panneau Règles lorsque la vue Règles est sélectionnée.) Par exemple, dans le cas d’une règle appelée .texteprincipal qui définit une famille, une taille et une couleur de police, la sélection de l’une de ces propriétés dans le volet Résumé de la sélection entraîne l’affichage de toutes les propriétés définies par la règle .texteprincipal dans le volet Propriétés et de la règle .texteprincipal sélectionnée dans le volet Règles. (En outre, la sélection d’une règle dans le volet Règles affiche les propriétés de celle-ci dans le volet Propriétés.) Vous pouvez alors utiliser le volet Propriétés pour modifier rapidement votre style CSS, qu’il soit intégré dans le document en cours ou relié via par une feuille de style. Par défaut, le volet Propriétés ne présente que les propriétés ayant déjà été définies et les classe par ordre alphabétique.

Vous pouvez choisir d’afficher les propriétés dans deux autres vues. La vue Catégorie regroupe les propriétés en catégories, telles que Police, Arrière-plan, Bloc, Bordure, etc., les propriétés définies sont placées en haut de chaque catégorie, en texte bleu. La vue Liste présente la liste alphabétique de toutes les propriétés disponibles, les propriétés définies également placées en haut de chaque catégorie, en texte bleu. Pour passer d’une vue à l’autre, cliquez sur les boutons Afficher la vue par catégorie, Afficher la vue sous forme de liste ou Afficher uniquement les propriétés définies, situés dans le coin inférieur droit du volet Propriétés.

Dans toutes les vues, les propriétés utilisées dans la sélection s’affichent en bleu, les autres s’affichent en rouge et sont barrées. Si vous placez le curseur de la souris sur une règle étrangère à la sélection, un message d’explication s’affiche. Dans la plupart des cas, il s’agit de propriétés écrasées par d’autres ou de propriétés qui ne sont pas héritées.

Toute modification apportée dans le volet Propriétés s’applique immédiatement, ce qui vous permet d’avoir un aperçu direct de votre travail.

Panneau Styles CSS en mode Tous

En mode All (Tout), le panneau Styles CSS présente deux volets : un volet All Rules (Toutes les règles) (en haut) et un volet Propriétés (en bas). Le volet Toutes les règles présente la liste des règles définies dans le document actif, ainsi que l’ensemble des règles définies dans les feuilles de styles jointes à ce document. Le volet Propriétés permet de modifier les propriétés CSS de toute règle sélectionnée dans le volet Toutes les règles.

Vous pouvez redimensionner l’un quelconque des volets en faisant glisser les cadres entre les volets et redimensionner les colonnes Propriétés en faisant glisser les séparateurs.

Lorsque vous sélectionnez une règle dans le volet Toutes les règles, toutes les propriétés s’appliquant à cette règle s’affiche au-dessous dans le volet Propriétés. Vous pouvez alors utiliser le volet Propriétés pour modifier rapidement votre style CSS, qu’il soit intégré dans le document en cours ou relié via par une feuille de style. Par défaut, le volet Propriétés ne présente que les propriétés précédemment définies et les classe par ordre alphabétique.

Vous pouvez choisir d’afficher les propriétés dans deux autres vues. La vue Catégorie regroupe les propriétés en catégories, telles que Police, Arrière-plan, Bloc, Bordure, etc., les propriétés définies placées en haut de chaque catégorie. La vue Liste présente la liste alphabétique de toutes les propriétés disponibles, les propriétés définies également placées en haut de chaque catégorie. Pour passer d’une vue à l’autre, cliquez sur les boutons Afficher la vue par catégorie, Afficher la vue sous forme de liste ou Afficher uniquement les propriétés définies, situés dans le coin inférieur droit du volet Propriétés. Dans toutes les vues, les propriétés utilisées dans la sélection s’affichent en bleu.

Toute modification apportée dans le volet Propriétés s’applique immédiatement, ce qui vous permet d’avoir un aperçu direct de votre travail.

Boutons et vues du panneau Styles CSS

Dans les modes Tous et Actuel, le panneau Styles CSS présente trois boutons qui vous permettent de modifier l’affichage du volet Propriétés (volet inférieur) :

Répartit les propriétés CSS prises en charge par Dreamweaver en huit catégories distinctes : police, arrière-plan, bloc, bordure, boîte, liste, positionnement et extensions. Les propriétés de chaque catégorie sont conservées dans une liste que vous pouvez développer ou réduire en cliquant sur le bouton Plus (+) en regard de la catégorie de votre choix. Les propriétés définies s’affichent en bleu en haut de la liste.

Affiche l’ensemble des propriétés CSS prises en charge par Dreamweaver par ordre alphabétique. Les propriétés définies s’affichent en bleu en haut de la liste.

N’affiche que les propriétés déjà définies et constitue la vue par défaut.

Dans les modes Tous et Actuel, le panneau Styles CSS contient également les boutons suivants :

Ouvre la boîte de dialogue Ajouter une feuille de style externe. Sélectionnez une feuille de style externe pour créer un lien vers le document actif ou l’importer dans celui-ci.

Ouvre une boîte de dialogue qui permet de sélectionner le type du style que vous créez, par exemple, pour créer un style de classe, redéfinir une balise HTML ou pour définir un sélecteur CSS.

Ouvre une boîte de dialogue qui permet de modifier les styles dans le document actuel ou dans une feuille de style externe.

Supprime la règle ou la propriété sélectionnée du panneau Styles CSS et le formatage de tous les éléments auxquels elle est appliquée. (Les références à ce style ne sont cependant pas supprimées.) Le bouton Supprimer règle de CSS peut également détacher (ou rompre le lien de) une feuille de style CSS associée.

Ouverture du panneau Styles CSS

Le panneau Styles CSS vous permet d’afficher, de créer, de modifier et de supprimer des styles CSS, mais également de joindre des feuilles de style externes aux documents.