Sélecteur de couleurs, boîte de dialogue

Article
08/21/2008

Mise à jour : novembre 2007

Cette boîte de dialogue permet d'assigner des attributs de style aux éléments HTML.

Pour accéder à cette boîte de dialogue

Dans Microsoft Visual Web Developer, en mode Design, sélectionnez un contrôle ou un élément HTML qui restitue la balise (par exemple un contrôle Table ou un bouton <input> HTML).
Ouvrez la boîte de dialogue Générateur de styles en exécutant l'une des actions suivantes :
- En mode Design, sélectionnez le contrôle ou l'élément, cliquez sur Format, puis cliquez sur Style.
- En mode Design, cliquez avec le bouton droit sur le contrôle ou l'élément et cliquez sur Style.
- Sélectionnez le contrôle ou l'élément, sélectionnez sa propriété Style dans la fenêtre Propriétés, puis cliquez sur le bouton de sélection (...).
- Si vous travaillez dans la fenêtre Styles du document, sélectionnez un Élément, une Classe ou un ID de l'élément, puis choisissez l'icône Générer un style.
- Si vous modifiez une feuille de style en cascade (CSS), placez le point d'insertion entre les accolades ({ }) d'un style CSS et, dans le menu Style, choisissez Générer un style.
La boîte de dialogue Générateur de styles s'ouvre.
Sélectionnez un des onglets de la boîte de dialogue Générateur de styles qui contient une liste déroulante Couleur et cliquez sur le bouton de sélection (...) situé à côté de la zone.

La boîte de dialogue Sélecteur de couleurs s'ouvre.

Tâches

Procédure pas à pas : création et modification d'un fichier CSS

Éléments d'interface

Palette Web
Lorsque vous sélectionnez un échantillon de couleur sur cet onglet, son code RVB hexadécimal apparaît dans le champ Couleur et la paire attribute:RGBcolor sélectionnée sera insérée dans votre définition de style CSS lorsque vous fermerez la boîte de dialogue Générateur de styles.

Par exemple, si vous modifiez un document HTML en mode Design, sélectionnez l'élément <BODY> dans la fenêtre Structure du document, puis, dans le menu Format, choisissez Générer un style. Sélectionnez Arrière-plan, puis cliquez sur le bouton de sélection (...) situé à côté du champ Couleur pour ouvrir la boîte de dialogue Sélecteur de couleurs. Sous l'onglet Palette Web, choisissez la couleur bleu clair et cliquez sur OK. Quand vous fermez la boîte de dialogue Générateur de styles, une paire attribute:RGBcolor semblable à la paire suivante est insérée entre les accolades ({ }) de votre style BODY :
```
BODY { BACKGROUND-COLOR: #99ffff; } 
```
Pour plus d'informations, consultez Palette Web, onglet de la boîte de dialogue Sélecteur de couleurs.
Couleurs nommées
Lorsque vous sélectionnez un échantillon de couleur sur cet onglet, son nom de couleur et son code RVB hexadécimal apparaissent dans le champ Couleur. Lorsque vous sélectionnez une couleur nommée dans Basic ou Couleurs supplémentaires, une paire attribute:colorname est insérée dans votre définition de style CSS.

Par exemple, si vous modifiez un document HTML en mode Design, sélectionnez l'élément <BODY> dans la fenêtre Structure du document, puis, dans le menu Format, choisissez Générer un style. Sélectionnez Arrière-plan, puis cliquez sur le bouton de sélection (...) situé à côté du champ Couleur pour ouvrir la boîte de dialogue Sélecteur de couleurs. Sous l'onglet Couleurs nommées, sélectionnez la couleur LightBlue (#add8e6) dans la rangée du bas. Lorsque vous fermez la boîte de dialogue Générateur de styles, la paire attribute:colorname suivante est insérée entre les accolades ({ }) de votre style BODY :
```
BODY { BACKGROUND-COLOR: lightblue; } 
```
Pour plus d'informations, consultez Couleurs nommées, onglet de la boîte de dialogue Sélecteur de couleurs.

Couleurs système
Lorsque vous sélectionnez une couleur, une catégorie de couleur système apparaît dans le champ Couleur et une paire attribute:category sera insérée dans votre définition de style CSS lorsque vous fermerez la boîte de dialogue Générateur de styles.

Par exemple, tandis que vous modifiez une feuille de style CSS, placez le curseur entre les accolades ({ }) d'un style CSS de l'élément <BODY> et choisissez Générer un style dans le menu Format. Sélectionnez Arrière-plan, puis cliquez sur le bouton de sélection (...) situé à côté du champ Couleur pour ouvrir la boîte de dialogue Sélecteur de couleurs. Sur son onglet Couleurs système, sélectionnez la catégorie de couleur Arrière-plan et choisissez OK. Quand vous fermez la boîte de dialogue Générateur de styles, la paire attribute:colorname suivante est insérée dans votre style BODY :

BODY { BACKGROUND-COLOR: background; }

Remarque :
Quand vous utilisez une couleur système, vous ne spécifiez pas la couleur à afficher. La couleur d'arrière-plan varie selon le système en fonction de la couleur de bureau choisie par l'utilisateur. En règle générale, vous ne devez utiliser les catégories Couleurs système que dans les projets Web conçus pour des groupes d'utilisateurs qui partagent des paramètres d'affichage courants et prévisibles.

Quand vous utilisez une couleur système, vous ne spécifiez pas la couleur à afficher. La couleur d'arrière-plan varie selon le système en fonction de la couleur de bureau choisie par l'utilisateur. En règle générale, vous ne devez utiliser les catégories Couleurs système que dans les projets Web conçus pour des groupes d'utilisateurs qui partagent des paramètres d'affichage courants et prévisibles.

Pour plus d'informations, consultez Couleurs système, onglet de la boîte de dialogue Sélecteur de couleurs.

Couleurs personnalisées
Pour créer une couleur personnalisée, faites glisser les curseurs des couleurs primaires rouge, vert et bleu jusqu'à ce que la teinte souhaitée apparaisse dans le champ Aperçu. Son code couleur RVB, affiché dans le champ Couleur, sera inséré dans votre définition de style CSS à la fermeture de la boîte de dialogue Générateur de styles. Les valeurs décimales affichées à la droite de chaque curseur vont de 0 (aucune couleur) à 255 (couleur maximale) ; la valeur par défaut pour chaque couleur est 255.

Remarque :
Une couleur personnalisée est affichée à l'aide des paramètres d'affichage en cours de votre écran. Elle peut paraître différente sur l'écran ou le navigateur Web d'un autre utilisateur. Vous pouvez, si vous le souhaitez, réserver l'utilisation de couleurs personnalisées à des projets Web destinés à des groupes d'utilisateurs qui partagent des paramètres d'affichage communs et prévisibles.

Une couleur personnalisée est affichée à l'aide des paramètres d'affichage en cours de votre écran. Elle peut paraître différente sur l'écran ou le navigateur Web d'un autre utilisateur. Vous pouvez, si vous le souhaitez, réserver l'utilisation de couleurs personnalisées à des projets Web destinés à des groupes d'utilisateurs qui partagent des paramètres d'affichage communs et prévisibles.

Par exemple, lorsque vous modifiez une feuille de style CSS, placez le curseur entre les accolades ( { } ) d'un style CSS correspondant à la classe de style INPUT.button, sélectionnez Arrière-plan dans la boîte de dialogue Générer un style, puis cliquez sur le bouton de sélection (...) situé à côté du champ Couleur pour ouvrir la boîte de dialogue Sélecteur de couleurs. Sous l'onglet Couleur personnalisée, conservez les valeurs par défaut (255) des curseurs Rouge et Vert et faites glisser le curseur Bleu vers la gauche jusqu'à atteindre la valeur 102. Quand vous fermez la boîte de dialogue Générateur de styles, la paire attribute:RGBcolor suivante est insérée entre les accolades ({ }) de votre style :

INPUT.button { background-color: #ffff66; }

Pour plus d'informations, consultez Couleur personnalisée, onglet de la boîte de dialogue Sélecteur de couleurs.

Couleur
Affiche le code RVB hexadécimal de la couleur sélectionnée.
OK
Ferme la boîte de dialogue Sélecteur de couleurs et ajoute la paire attribute:color sélectionnée au balisage CSS qui sera inséré lors de la fermeture de la boîte de dialogue Générateur de styles.