Créer des feuilles de style en cascade à l’aide d’IntelliSense

Vous pouvez utiliser IntelliSense pour simplifier le processus de saisie en mode Code lors de la création de feuilles de style en cascade (CSS) et de l’application des styles au contenu.

Conseil :
De nombreuses fonctionnalités et commandes du mode Code d’une page sont associées à des raccourcis clavier. Pour plus d’informations, voir Raccourcis clavier.

Pour utiliser un menu contextuel IntelliSense (menu contextuel automatique) dans une CSS

1. En mode Code, dans une page Web, ou dans un fichier .css interne, placez votre curseur à l’endroit où vous souhaitez créer ou appliquer une CSS.

2. Pour afficher un menu contextuel IntelliSense pour une CSS, effectuez l’une des opérations suivantes.

   • Type a "<style ", "{", ".", "#", a CSS property, or ";".

   • Dans la barre d’outils mode Code, cliquez sur Liste des membres.

   • Dans le menu Edition, pointez sur IntelliSense, puis cliquez sur Liste des membres.

     Conseil :
     Si un menu contextuel IntelliSense n’apparaît pas, il est possible que le curseur ne se trouve pas à un endroit valide du code pour insérer un élément, un identificateur, une propriété ou une valeur et que le code qui précède le curseur ne soit pas valide.

     Remarque :
     Pour que les menus contextuels d’IntelliSense apparaissent, vous devez préalablement sélectionner les diverses options de saisie semi-automatique des instructions affichées dans l’onglet IntelliSense de la boîte de dialogue Options de l’éditeur de pages (par défaut).

3. Dans le menu contextuel d’IntelliSense, pour repérer l’élément à insérer dans votre code, effectuez l’une des opérations suivantes :

   • Pour vous déplacer dans le menu contextuel d’un seul élément à la fois, appuyez sur la touche FLÈCHE BAS ou FLÈCHE HAUT.

   • Pour vous déplacer dans le menu contextuel d’un groupe d’éléments visibles à la fois, appuyez sur la touche PAGE SUIVANTE ou PAGE PRÉCÉDENTE.

   • Pour accéder directement à une section spécifique du menu contextuel, tapez la première lettre de l’élément que vous souhaitez atteindre dans la liste.

   • Pour faire défiler la liste, cliquez sur les flèches de la barre de défilement verticale.

     Conseil :
     Pour fermer la liste sans insérer aucun élément du menu contextuel, appuyez sur ÉCHAP ou cliquez à côté du menu contextuel.

4. Pour insérer dans votre code un élément sélectionné dans un menu contextuel, effectuez l’une des opérations suivantes.

   • Appuyez sur Tab ou sur Entrée.

   • Double-cliquez sur l’élément.

   • Dans la barre d’outils mode Code, cliquez sur Compléter le mot.

   • Dans le menu Edition, pointez sur IntelliSense, puis cliquez sur Compléter le mot.

Pour créer un nouvel ensemble de règles de style à l’aide d’IntelliSense

1. Effectuez l’une des opérations suivantes :

   • En mode Code, dans une feuille de style en cascade externe, placez le curseur dans la ligne vide en dehors de tout ensemble de règles de style existant.

   • En mode Code, dans une CSS interne d’une page Web, placez votre curseur dans la ligne vide comprise entre la balise de début de l’élément de style <style> et la balise de fin </style> mais en dehors e tout ensemble de règles de style existant.

2. Pour définir un sélecteur pour votre ensemble de règles, effectuez l’une des opérations suivantes :

   • Pour créer un sélecteur d’élément, tapez la première lettre de l’élément HTML que vous souhaitez utiliser, puis sélectionnez l’élément de votre choix dans le menu contextuel IntelliSense. Si vous souhaitez ajouter par la suite une pseudo-classe, un élément enfant ou un sélecteur similaire, tapez les caractères de séparation requis, puis sélectionnez le second élément ou la pseudo-classe de votre choix dans le menu contextuel IntelliSense.

   • Pour créer un sélecteur de classe, tapez un point, suivi du nom de la classe.

     Si vous modifiez une CSS interne dans une page Web, un menu contextuel IntelliSense répertoriant les sélecteurs de classe actuellement utilisés dans votre page Web apparaît.

   • Pour créer un sélecteur d’ID, tapez le symbole dièse (#), puis attribuez un nom à votre sélecteur d’ID.

     Si vous modifiez une CSS interne dans une page Web, un menu contextuel IntelliSense répertoriant les sélecteurs d’ID actuellement utilisés dans votre page Web apparaît.

3. Pour démarrer un bloc de déclaration pour votre ensemble de règles de style, tapez une accolade ouvrante ({).

4. Dans le menu contextuel IntelliSense des propriétés qui apparaît, sélectionnez la propriété que vous souhaitez ajouter à la règle actuelle.

5. Dans le menu contextuel IntelliSense des valeurs qui apparaît, sélectionnez la valeur ou la couleur que vous souhaitez utiliser ou, le cas échéant, sélectionnez Choisir au sommet de la liste pour spécifier une valeur personnalisée.

6. Pour ajouter une règle de propriété supplémentaire à l’ensemble de règles actuel, tapez un point-virgule (;), puis répétez les étapes 4 et 5.

Pour appliquer des styles à l’aide d’IntelliSense

1. En mode Code, dans votre page Web, placez votre curseur après le nom de l’élément dans la balise de début de l’élément auquel vous souhaitez appliquer le style, puis appuyez sur la barre d’espace.

2. Dans le menu contextuel IntelliSense, effectuez l’une des opérations suivantes :

   • Pour appliquer un sélecteur de classe, sélectionnez la classe.

   • Pour appliquer un sélecteur d’ID, sélectionnez un identificateur.

   • Pour créer et appliquer un style intraligne, sélectionnez le style.

3. Effectuez l’une des opérations suivantes :

   • Si vous appliquez un sélecteur de classe ou d’ID, sélectionnez le style de votre choix dans le menu contextuel IntelliSense.

   • Si vous appliquez un style intraligne, dans le menu contextuel IntelliSense, sélectionnez la propriété que vous souhaitez ajouter à la règle actuelle, puis dans le menu contextuel IntelliSense des valeurs, sélectionnez la valeur ou la couleur que vous souhaitez utiliser, ou, le cas échéant, sélectionnez Choisir au sommet de la liste pour spécifier une valeur personnalisée. Pour ajouter une règle de propriété supplémentaire à l’ensemble de règles actuel, tapez un point-virgule (;), puis répétez cette étape.

Voir aussi

Tâches

Définir des options IntelliSense pour CSS
Utiliser IntelliSense
Accéder à un lien hypertexte ou un signet (ancre HTML)

Concepts

Utilisation d'IntelliSense avec les feuilles de style en cascade
Référence des feuilles de style en cascade