Comment définir des styles avec le sélecteur de balises dans Dreamweaver

Vous pouvez créer des styles entièrement nouveaux dans Dreamweaver à l'aide des sélecteurs d'appel ou d'ID, mais vous pouvez également créer des styles qui modifient la mise en forme des balises HTML existantes. Ces styles sont créés à l'aide du sélecteur de balises, également appelé sélecteur d'éléments . Lorsque vous définissez un style à l'aide du sélecteur de balises, vous pouvez modifier l'apparence, la position et d'autres fonctionnalités de toute balise HTML existante.

De nombreuses balises HTML incluent déjà des options de formatage. Par exemple, les balises d'en-tête incluent la mise en forme pour styliser le texte à l'aide d'une grande police en gras. Lorsque vous créez un style avec un sélecteur de balises, vous devez prendre en compte les options de formatage déjà associées à cette balise. Toutes les options que vous définissez seront soit ajoutées au formatage existant, soit écraseront le formatage.

Vous pouvez demander : « Pourquoi devrais-je redéfinir le

tag au lieu de simplement créer un nouveau style de titre à l'aide du sélecteur de classe ou d'ID ? » Bien que vous puissiez définir un nouveau style de classe au lieu de redéfinir une balise HTML, il est parfois préférable d'utiliser une balise HTML existante.

Les styles de titre sont particulièrement importants sur le Web, car le texte formaté dans un

tag est bien reconnu comme le texte le plus important sur une page. Entre autres choses, le texte formaté dans un

tag peut faire l'objet d'une attention particulière de la part des moteurs de recherche.

Pour créer un style qui redéfinit une balise HTML (comme le

tag) avec le sélecteur de tag, créez d'abord un fichier ou ouvrez un fichier existant, puis suivez ces étapes :

1Dans le panneau Sélecteurs du panneau CSS Designer, sélectionnez la feuille de style à laquelle vous souhaitez ajouter le nouveau style.

Lorsque vous créez un style pour une balise HTML existante, vous n'avez pas besoin d'appliquer le style lui-même comme vous le faites avec les styles de classe et d'ID. Partout où vous avez utilisé la balise HTML, les paramètres de définition de style sont appliqués.

2Si vous souhaitez cibler le style sur un type de média ou une taille d'écran spécifique, choisissez ou définissez une requête média dans le panneau @Media.

L'utilisation de requêtes multimédias avec des styles est facultative. Si vous ne spécifiez pas de requête multimédia, Dreamweaver utilisera la propriété Global et votre style fonctionnera dans tous les formats multimédias et tailles d'écran.

3Cliquez sur le signe plus (+) dans le panneau Sélecteurs.

Un nouveau sélecteur est ajouté au panneau Sélecteurs.

Lorsque vous cliquez sur le signe plus (+) pour créer un nouveau sélecteur, certaines choses peuvent se produire, selon ce qui se trouve déjà sur la page ouverte dans Dreamweaver. La première fois que vous créez un style dans une page Web vierge, Dreamweaver saisit le corps dans le panneau Sélecteurs.

Si vous travaillez sur une page avec du texte ou un autre contenu formaté avec des balises ou des styles HTML, Dreamweaver peut ajouter un sélecteur composé basé sur les éléments entourant tout ce que vous avez sélectionné avec votre curseur.

4Dans le panneau Sélecteurs, double-cliquez sur le nom du sélecteur. Commencez à saisir le nom de la balise HTML, puis sélectionnez la balise dans la liste déroulante qui s'affiche.

Vous pouvez saisir le nom de n'importe quelle balise HTML pour créer un style à l'aide du sélecteur de balise. Lorsque vous saisissez une balise HTML, une liste déroulante apparaît avec des balises commençant par la même lettre que vous avez saisie. Sélectionner la balise souhaitée dans la liste plutôt que de saisir vous-même le nom complet de la balise est une bonne pratique car vous évitez les fautes de frappe.

5Dans le panneau Propriétés, spécifiez les paramètres souhaités dans votre règle de style.

La police et la couleur sont immédiatement appliquées au texte de la page formatée avec le

étiqueter.

Si vous souhaitez pouvoir utiliser la même balise HTML avec un formatage différent dans différentes parties de la même page, vous pouvez créer des styles composés. Les styles composés sont pratiques, par exemple, si vous voulez que le texte soit formaté avec le

balise pour qu'elle soit différente dans la partie principale de votre page que dans une barre latérale.