PDF (adobe.com)

Panneau Styles CSS en mode Actuel

En mode Current (Sélection), le panneau Styles CSS présente trois volets : un volet Summary for Selection (Récapitulatif de la sélection) qui présente les propriétés CSS de la sélection en cours dans le document; un volet Rules (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) :

.foo{ 
color: green; 
font-family: 'Arial'; 
} 
p{ 
font-family: 'serif'; 
font-size: 12px; 
}

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 :

font-size: 12px 
font-family: 'Arial' 
color: green

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 les spécificités CSS, voir www.w3.org/TR/CSS2/cascade.html.)

Le volet Règles dispose de deux vues (A propos ou Règles) selon votre sélection. Dans la vue A 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.