Apprenez comment appliquer, supprimer ou renommer des styles de classes CSS sous Dreamweaver
Sous Dreamweaver et versions ultérieures, le panneau Styles CSS a été remplacé par CSS Designer. Pour plus d’informations, voir CSS Designer.
Les styles de classe sont le seul type de style CSS qui peut être appliqué à n’importe quel texte dans un document, quelles que soient les balises qui contrôlent ce texte. Tous les styles de classe associés au document actif sont affichés dans le panneau Styles CSS (leur nom est précédé d’un point [.]) ainsi que dans le menu déroulant Style dans l’inspecteur Propriétés de texte.
Même si la plupart des styles sont actualisés immédiatement, il est conseillé d’afficher votre page dans un navigateur et de vérifier que le style a été appliqué comme prévu. Lorsque vous appliquez plusieurs styles au même texte, ils risquent d’être contradictoires et de produire des résultats inattendus.
Lorsque vous affichez un aperçu des styles définis dans une feuille de style CSS externe, n’oubliez pas d’enregistrer la feuille de style afin que vos modifications soient appliquées lorsque vous afficherez la page dans un navigateur.
Application d’un style de classe CSS
-
Sélectionnez le texte du document auquel vous voulez appliquer un style CSS.
Placez le curseur dans un paragraphe pour appliquer le style au paragraphe entier.
Si vous sélectionnez une plage de texte au sein d’un même paragraphe, le style CSS n’affectera que cette sélection.
Pour indiquer la balise précise à laquelle le style CSS doit être appliqué, sélectionnez cette balise dans le sélecteur situé dans la partie inférieure gauche de la fenêtre de document.
-
Pour appliquer un style de classe, procédez de l’une des manières suivantes :
Dans le panneau Styles CSS (Fenêtre > Styles CSS), sélectionnez le mode Tous, cliquez avec le bouton droit de la souris sur le nom du style à appliquer et choisissez Appliquer dans le menu contextuel.
Dans l’inspecteur Propriétés HTML, choisissez le style de classe à appliquer dans le menu déroulant Classe.
Dans la fenêtre de document, cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh) sur le texte sélectionné, choisissez Styles CSS dans le menu contextuel, puis choisissez le style à appliquer.
Choisissez Format > Styles CSS, puis sélectionnez le style à appliquer dans le sous-menu.
Suppression d’un style de classe d’une sélection
-
Sélectionnez l’objet ou le texte auquel le style ne doit plus être appliqué.
-
Dans l’inspecteur Propriétés HTML (Fenêtre > Propriétés), choisissez Aucun dans le menu déroulant Classe.
Changement de nom d’un style de classe
-
Dans le panneau Styles CSS, cliquez avec le bouton droit de la souris sur le style de classe CSS que vous souhaitez renommer et sélectionnez Renommer la classe.Remarque :
Vous pouvez également renommer une classe en sélectionnant Renommer la classe dans le menu d’options du panneau Styles CSS.
-
Dans la boîte de dialogue Renommer la classe, assurez-vous que la classe que vous souhaitez renommer est sélectionnée dans le menu déroulant Renommer la classe.
-
Dans la zone de texte Nouveau nom, saisissez le nouveau nom de la nouvelle classe, puis cliquez sur OK.
Si la classe que vous renommez se trouve dans la section head du document actif, Dreamweaver modifie le nom de la classe ainsi que toutes les instances du nom de la classe se trouvant dans le document actif. Si la classe que vous renommez est un fichier CSS externe, Dreamweaver s’ouvre et modifie le nom de la classe dans le fichier. Dreamweaver lance également une boîte de dialogue Rechercher et remplacer à l’échelle du site pour vous permettre de rechercher toutes les instances de l’ancien nom de la classe pouvant exister dans votre site.