Comment : utiliser la fenêtre Propriétés CSS
Mise à jour : novembre 2007
La fenêtre Propriétés CSS vous permet d'afficher et modifier les propriétés du style de la feuille de style en cascade (CSS) d'un élément. Vous pouvez utiliser la fenêtre Propriétés CSS avec une page Web ouverte, un fichier CSS externe, ou avec la fenêtre Gérer les styles pour passer en revue et modifier les propriétés des styles existants.
Dans une page Web, la fenêtre Propriétés CSS vous permet de consulter tous les styles utilisés par l'élément sélectionné actuellement. Vous pouvez également consulter l'ordre de priorité de ces styles, et toutes les propriétés et valeurs de ces styles. Vous pouvez utiliser la fenêtre Propriétés CSS à la fois en mode Source et en mode Design.
.gif "Remarque") Remarque : |
|---|
Dans la fenêtre Propriétés CSS, vous pouvez cliquer avec le bouton droit sur un sélecteur sous Règles appliquées pour afficher un menu contextuel qui contient des options supplémentaires pour utiliser des styles pour ce sélecteur. |
Vue d'ensemble de la fenêtre Propriétés CSS
La fenêtre Propriétés CSS contient quatre sections principales, comme indiqué sur l'illustration suivante :
.png)
Ces sections sont les suivantes :
Boutons de tri Vous pouvez utiliser les boutons au haut de la fenêtre pour trier la liste de propriétés. Vous pouvez trier la liste alphabétiquement, par catégorie, et par propriétés définies.
Bouton Résumé Vous pouvez cliquer sur le bouton Résumé pour répertorier les propriétés de tous les styles qui affectent l'élément sélectionné. Cette liste inclut des propriétés qui peuvent ne pas apparaître dans la section Règles appliquées.
Règles appliquées Répertorie les styles qui affectent l'élément dans la page. Les styles au bas de la liste ont une priorité supérieure à ceux situés plus haut. Si vous sélectionnez un style dans cette liste, ses propriétés sont répertoriées dans la section Propriétés CSS.
Propriétés CSS Utilisez cette section pour afficher ou définir des propriétés CSS pour le style sélectionné sous Règles appliquées. Une ligne rouge à travers les propriétés indique que ces propriétés ne sont pas héritées par la sélection actuelle ou qu'un autre style leur est substitué.
Création d'un nouveau style à l'aide de la fenêtre Propriétés CSS
Vous pouvez utiliser la fenêtre Propriétés CSS pour créer un style pour un élément que vous sélectionnez en mode Design, en mode Source ou en mode Fractionné. Vous pouvez créer un style intraligne ou afficher la boîte de dialogue Nouveaux styles pour créer un style dans la page ou dans une feuille de style CSS.
La section Règles appliquées indique les règles de style appliquées à l'élément. Elle indique également si ces règles sont inline, dans une feuille de style, ou sur la page actuelle. La procédure suivante explique comment créer un style pour un élément. Si aucun style n'est encore appliqué, la section Styles appliqués indique qu'aucune règle n'est appliquée.
Pour créer un style en utilisant la fenêtre Propriétés CSS
Dans le concepteur, sélectionnez l'élément auquel vous souhaitez ajouter une règle de style.
En mode Source, sélectionnez l'élément et incluez les balises d'ouverture et de fermeture. En mode Design, sélectionnez l'élément afin que la balise contextuelle affiche le nom de l'élément.
Pour créer un style intraligne, dans la fenêtre Propriétés CSS, cliquez avec le bouton droit à tout endroit dans la section Règles appliqués, puis cliquez sur Nouveau style intraligne
Pour ajouter un nouveau style à la page, dans la fenêtre Propriétés CSS, cliquez avec le bouton droit à tout endroit dans la section Règles appliquées, puis cliquez sur Nouveau style.
Dans la liste Règles appliquées, sélectionnez un élément, un ID d'élément ou une classe CSS d'élément.
Dans la section Propriétés CSS, définissez les propriétés de style.
Modification d'un style dans la fenêtre Propriétés CSS
Vous pouvez utiliser la fenêtre Propriétés CSS pour modifier la mise en forme ou le style d'un seul élément ou de tous les éléments qui partagent une classe CSS.
Pour modifier les propriétés d'un style
Dans la liste Règles appliquées de la fenêtre Propriétés CSS, sélectionnez un élément, un style intraligne, un ID d'élément ou une classe CSS d'élément.
Dans la section Propriétés CSS, modifiez les propriétés.
Identification des styles appliqués à un élément
La fenêtre Propriétés CSS vous permet de consulter tous les styles appliqués à un élément. Vous pouvez également voir quelles propriétés de style sont substituées. Les propriétés de style substituées barrées en rouge, indiquant ainsi que la propriété n'est pas appliquée à l'élément sélectionné actuellement.
Par exemple, un élément peut avoir à la fois une règle de style intraligne et une règle de style d'une feuille de style appliquées. Dans ce cas, la règle de style intraligne se substitue à la règle de feuille de style.
Pour consulter un résumé de toutes les propriétés appliquées à une sélection
Sélectionnez un élément dans la page, puis cliquez sur Résumé pour basculer en mode sommaire.
Dans la section Propriétés CSS, toutes les propriétés appliquées à l'élément sélectionné sont affichées.
Cliquez sur une propriété sous Propriétés CSS pour esquisser la règle de style associée sous Règles appliquées.
Cliquez une nouvelle fois sur le bouton Résumé pour basculer hors du mode résumé.
Remarque :Si vous maintenez le pointeur de la souris sur une propriété barrée, une info-bulle de propriété substituée identifie la propriété qui la remplace.
Voir aussi
Concepts
Comment : utiliser les fenêtres Appliquer des styles et Gérer les styles
Comment : utiliser la barre d'outils Application de style directe