Générer un style, boîte de dialogue
Mise à jour : novembre 2007
La boîte de dialogue Générer un style permet de modifier un style existant en une feuille de style CSS.
Pour modifier un style en une feuille de style CSS
Ouvrez la feuille de style CSS dans l'éditeur.
Placez le curseur entre les accolades de la règle de style à modifier.
Dans le menu Styles, sélectionnez Générer un style.
La boîte de dialogue Générer un style s'affiche.
Remarque : Le menu Styles apparaît lorsque vous ouvrez une feuille de style CSS externe pour la modifier. Dans le menu Styles, l'option Générer un style devient accessible lorsque vous placez le curseur entre les accolades suivant le sélecteur d'une règle de style.
Sélectionnez les options de style pour chaque Catégorie répertoriée, puis cliquez sur OK.
Le style sélectionné est modifié en feuille de style CSS.
Lorsque vous sélectionnez les options de style, la zone Aperçu affiche un aperçu de la règle de style. La zone Description affiche la définition CSS de la règle de style.
Procédure pas à pas : création et modification d'un fichier CSS
Procédure pas à pas : modification de base du code HTML dans Visual Web Developer
Police
font-family
Nom d'une police de texte Les noms de police qui contiennent des espaces doivent être placés entre guillemets, par exemple "Times New Roman". Vous pouvez spécifier plusieurs noms de police séparés par des virgules (,). Pour la dernière police de la liste, il est conseillé d'indiquer une police générique telle que "serif", "sans-serif" ou "monospace".font-size
Indique la taille de la police. La saisie d'une valeur permet de sélectionner les unités dans la liste. Il est conseillé d'utiliser des tailles relatives, telles que "small", "x-large" ou un pourcentage, afin que les utilisateurs puissent ajuster la taille de police dans le navigateur Web.font-weight
Graisse de la police, par exemple "normal", "bold" ou "400".font-style
Style ou inclinaison de la police, par exemple "normal" ou "italic". Avec l'option "oblique", la plupart des navigateurs Web affichent la police en italique.font-variant
Style de variante pour l'affichage de la police. Les valeurs sont les suivantes :normal La police s'affiche normalement.
small-caps La police s'affiche en petites majuscules.
inherit Le style de variante est hérité de l'élément parent.
text-transform
Une valeur qui définit la mise en majuscules du texte. Les valeurs sont les suivantes :capitalize La première lettre de chaque mot s'affiche en majuscule.
lowercase Toutes les lettres s'affichent en minuscule.
uppercase Toutes les lettres s'affichent en majuscule.
none La mise en majuscule n'est pas modifiée.
inherit Le style text-transform est hérité de l'élément parent.
color
Couleur de la police de texte.text-decoration
Une combinaison des attributs de texte suivants : underline, overline, line-through et blink. La sélection de none entraîne la désactivation de toutes les autres cases à cocher.
Bloc
line-height
L'espacement entre les lignes du texte. La spécification d'une valeur permet de sélectionner les unités dans la liste.vertical-align
Positionnement vertical du contenu d'un élément ou d'une cellule de tableau. Spécifier une valeur permet de sélectionner les unités dans la liste.text-align
Positionnement horizontal du texte ou d'une image.text-indent
Mise en retrait de la première ligne de texte d'un paragraphe. Si vous spécifiez une valeur, vous pouvez sélectionner les unités dans la liste.white-space
Rendu de l'espace blanc. Un espace blanc inclut les espaces, les onglets et les retours à la ligne. Les valeurs sont les suivantes :normal Réduit les espaces blancs consécutifs à un seul espace.
nowrap Supprime le retour à la ligne.
pre Conserve les espaces blancs.
pre-line Conserve les espaces blancs mais renvoie le texte à la ligne.
pre-wrap Conserve les espaces blancs sans renvoyer le texte à la ligne.
inherit Hérite le style d'espace blanc d'un élément parent.
word-spacing
Espacement entre les mots. La spécification d'une valeur permet de sélectionner les unités dans la liste.letter-spacing
Espacement entre les lettres d'un mot. La spécification d'une valeur permet de sélectionner les unités dans la liste.
Arrière-plan
background-color
Couleur d'arrière-plan d'un élément HTML.background-image
Image à utiliser pour l'arrière-plan d'une page Web. L'image doit avoir déjà été ajoutée au projet. Il est conseillé de définir une couleur d'arrière-plan au cas où le navigateur Web n'afficherait pas l'image.background-repeat
Façon dont une image d'arrière-plan est répétée. Les valeurs sont les suivantes :no-repeat L'image n'est pas répétée.
repeat L'image est répétée verticalement et horizontalement.
repeat-x L'image est répétée horizontalement.
repeat-y L'image est répétée verticalement.
inherit Le style background-repeat est hérité d'un élément parent.
background-attachment
Indique si l'image d'arrière-plan est fixe ou si elle défile avec le reste de la page Web. Les valeurs sont les suivantes :fixed L'image est fixe et ne défile pas.
scroll L'image défile avec le reste de la page Web.
inherit Le style background-attachment est hérité d'un élément parent.
(x) background-position
Position horizontale de l'image d'arrière-plan. La spécification d'une valeur permet de sélectionner les unités dans la liste.(y) background-position
Position verticale de l'image d'arrière-plan. La spécification d'une valeur permet de sélectionner les unités dans la liste.
Bordure
border-style
Style de trait (par exemple, solid ou dashed) des quatre bordures entourant un élément HTML.border-width
Largeur de trait des quatre bordures entourant un élément HTML. La spécification d'une valeur permet de sélectionner les unités dans la liste.border-color
Couleur des quatre bordures entourant un élément HTML.
Box
remplissage
Le remplissage d'un élément. Le remplissage définit la quantité d'espace blanc compris dans la bordure de l'élément, le cas échéant. Vous pouvez définir indépendamment le remplissage pour chaque côté (supérieur, droit, inférieur ou gauche). Spécifier la valeur de l'un des côtés permet de sélectionner les unités dans la liste. Pour que le remplissage soit identique pour tous les côtés, spécifiez une valeur dans top, puis activez la case à cocher Tous identiques.marge
Marges entourant un élément. Une marge définit la quantité d'espace blanc compris en-dehors de la bordure de l'élément, le cas échéant. Vous pouvez définir indépendamment la marge de chaque côté (supérieur, droit, inférieur ou gauche). Spécifier la valeur de l'une des marges permet de sélectionner les unités dans la liste. Pour que les marges soient identiques pour tous les côtés, spécifiez une valeur dans top, puis activez la case à cocher Tous identiques.Référence du modèle de boîte CSS
Affiche la signification de la terminologie CSS relative aux encadrés, par exemple, marge, bordure, remplissage et haut.
Position
position
Algorithme à utiliser pour insérer un élément dans une page Web. Les valeurs sont les suivantes :absolute La position de l'élément est spécifiée à l'aide des propriétés top, right, bottom et left. Ces propriétés sont relatives au bloc contenant.
fixed La position de l'élément est spécifiée à l'aide des propriétés top, right, bottom et left. Ces propriétés sont relatives à la fenêtre de navigateur. L'élément ne défile pas avec la page Web.
relative La position de l'élément est calculée d'après le flux normal, puis est décalée à l'aide des propriétés top, right, bottom et left. Le décalage est relatif à la position normale de l'élément.
static La position de l'élément est calculée d'après le flux normal. Les propriétés top, right, bottom et left sont ignorées. Il s'agit de l'option par défaut.
inherit L'élément hérite son algorithme de position d'un élément parent.
z-index
Niveau de pile d'un élément. Un élément avec un niveau de pile supérieur s'affiche en regard des éléments dont les niveaux de pile sont inférieurs.width
Largeur d'un élément. La spécification d'une valeur permet de sélectionner les unités dans la liste.height
Hauteur d'un élément. La spécification d'une valeur permet de sélectionner les unités dans la liste.top
Bord supérieur d'un élément. Si la propriété position a la valeur static, cette propriété est ignorée. La spécification d'une valeur permet de sélectionner les unités dans la liste.right
Bord droit d'un élément. Si la propriété position a la valeur static, cette propriété est ignorée. La spécification d'une valeur permet de sélectionner les unités dans la liste.bottom
Bord inférieur d'un élément. Si la propriété position a la valeur static, cette propriété est ignorée. La spécification d'une valeur permet de sélectionner les unités dans la liste.left
Bord gauche d'un élément. Si la propriété position a la valeur static, cette propriété est ignorée. La spécification d'une valeur permet de sélectionner les unités dans la liste.
Disposition
visibility
Indique si un élément est visible ou masqué. Les valeurs sont les suivantes :collapse Lorsqu'elle est utilisée avec des éléments de tableau, cette valeur masque une ligne ou une colonne. Pour tous les autres éléments, cette valeur correspond à la valeur hidden.
hidden Rend l'élément invisible.
visible Rend l'élément visible.
inherit L'élément hérite sa propriété de visibilité d'un élément parent.
display
Affichage d'un élément. Les valeurs sont les suivantes :block L'élément s'affiche au niveau du bloc avec des sauts de ligne avant et après.
inline L'élément s'affiche inline sans saut de ligne avant ni après.
inline-box L'élément s'affiche inline sous forme de zone, sans saut de ligne avant ni après.
inline-table L'élément s'affiche inline sous forme de tableau, sans saut de ligne avant ou après.
list-item L'élément s'affiche sous forme d'élément de liste.
none L'élément est masqué.
run-in L'élément s'affiche au niveau du bloc ou inline, selon le contexte.
table L'élément s'affiche sous forme de tableau de bloc avec un saut de ligne avant et après.
table-caption L'élément s'affiche sous forme de légende de tableau.
table-cell L'élément s'affiche sous forme de cellule de tableau.
table-column L'élément s'affiche sous forme de colonne de tableau.
table-column-group L'élément s'affiche sous forme de groupe de colonnes de tableau. Ce groupe peut contenir une ou plusieurs colonnes.
table-footer-group L'élément s'affiche sous forme de groupe de pieds de page de tableau. Ce groupe peut contenir un ou plusieurs pieds de page.
table-header-group L'élément s'affiche sous forme de groupe d'en-têtes de tableau. Ce groupe peut contenir un ou plusieurs en-têtes.
table-row L'élément s'affiche sous forme de ligne de tableau.
table-row-group L'élément s'affiche sous forme de groupe de lignes de tableau. Ce groupe peut contenir une ou plusieurs lignes.
inherit L'élément hérite sa propriété d'affichage d'un élément parent.
float
Indique si un élément flotte vers la gauche ou la droite, permettant au texte de l'entourer, ou s'il s'affiche inline. Cette propriété est généralement utilisée avec des images, mais elle s'applique également aux blocs de texte. Les valeurs sont les suivantes :left L'élément flotte vers la gauche, dans l'élément parent.
none L'élément s'affiche inline à son emplacement dans le texte.
right L'élément flotte vers la droite, dans l'élément parent.
inherit L'élément hérite sa propriété float d'un élément parent.
clear
Indique les côtés d'un élément qui interdisent les éléments flottants. Les valeurs sont les suivantes :both L'élément interdit les éléments flottants à sa gauche ou à sa droite.
left L'élément se déplace sous l'élément flottant qui se trouve à sa gauche.
none L'élément autorise les éléments flottants de tous les côtés.
right L'élément se déplace sous l'élément flottant qui se trouve à sa droite.
inherit L'élément hérite sa propriété clear d'un élément parent.
cursor
Indique le type de curseur à afficher. Les valeurs sont les suivantes :auto (valeur par défaut) Le navigateur définit le curseur.
crosshair Le curseur s'affiche sous forme de croix.
default Curseur par défaut (généralement une flèche).
e-resize Curseur utilisé pour redimensionner un élément vers la droite (est).
help Curseur qui indique que l'aide est disponible (généralement un point d'interrogation).
move Curseur qui indique qu'un objet peut être déplacé.
n-resize Curseur utilisé pour redimensionner un élément vers le haut (nord).
ne-resize Curseur utilisé pour redimensionner un élément vers l'angle supérieur droit (nord-est).
nw-resize Curseur utilisé pour redimensionner un élément vers l'angle supérieur gauche (nord-ouest).
pointer Le curseur s'affiche sous forme d'un pointeur (généralement une main).
progress Curseur qui indique que le programme est en progression.
s-resize Curseur utilisé pour redimensionner un élément vers le bas (sud).
se-resize Curseur utilisé pour redimensionner un élément vers l'angle inférieur droit (sud-est).
sw-resize Curseur utilisé pour redimensionner un élément vers l'angle inférieur gauche (sud-ouest).
text Curseur utilisé pour du texte.
w-resize Curseur utilisé pour redimensionner un élément vers la gauche (ouest).
wait Curseur qui indique que le programme est occupé (généralement un sablier).
inherit L'élément hérite sa propriété cursor d'un élément parent.
dépassement de capacité
Indique ce qui se passe lorsque le contenu d'un élément dépasse sa zone. Les valeurs sont les suivantes :auto Les barres de défilement s'affichent seulement si le contenu est découpé.
hidden Le contenu est découpé pour correspondre à l'élément et aucune barre de défilement ne s'affiche.
scroll Le contenu est découpé pour correspondre à l'élément et une barre de défilement s'affiche.
visible (valeur par défaut) Le contenu s'affiche même s'il se trouve en dehors de l'élément.
inherit L'élément hérite sa propriété overflow d'un élément parent.
clip
Dimensions rectangulaires d'un élément. Si l'élément est plus grand que la zone définie, il apparaît découpé pour correspondre à la zone. Pour spécifier les dimensions, utilisez les zones top, right, bottom et left.top
Bord supérieur du rectangle de découpage. La spécification d'une valeur permet de sélectionner les unités dans la liste.right
Bord droit du rectangle de découpage. La spécification d'une valeur permet de sélectionner les unités dans la liste.bottom
Bord inférieur du rectangle de découpage. La spécification d'une valeur permet de sélectionner les unités dans la liste.left
Bord gauche du rectangle de découpage. La spécification d'une valeur permet de sélectionner les unités dans la liste.
Liste
list-style-type
Style du marqueur de l'élément de liste (puce). Certains navigateurs ne prennent en charge que disc (un cercle plein).list-style-image
Fichier image à utiliser en tant que marqueur de l'élément de liste (puce). Le fichier image doit avoir déjà été ajouté au projet.list-style-position
Emplacement du marqueur de l'élément de liste. Les valeurs sont les suivantes :inside Place le marqueur à gauche du texte, mais renvoie le texte sous le marqueur.
outside (valeur par défaut) Place le marqueur à gauche du texte et met le texte en retrait au renvoi à la ligne.
inherit L'élément hérite sa propriété list-style-position d'un élément parent.
Table
table-layout
Indique la dimension des colonnes. Les valeurs sont les suivantes :auto (valeur par défaut) La largeur de colonne est définie par le contenu de la cellule.
fixed La largeur de colonne est définie par la largeur du tableau et la largeur définie pour chaque colonne.
inherit L'élément hérite sa propriété table-layout d'un élément parent.
border-collapse
Indique si les bordures séparant les cellules du tableau sont réduites à une seule bordure ou si chaque cellule dispose de sa propre bordure.border-spacing
Distance entre les bordures des cellules adjacentes. Cette propriété s'applique uniquement aux bordures séparées. La spécification d'une valeur permet de sélectionner les unités dans la listeempty-cells
Indique si les cellules vides sont visibles ou masquées.caption-side
Indique si la légende s'affiche en haut ou en bas du tableau.