Générer un style, boîte de dialogue

  • Article

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

  1. Ouvrez la feuille de style CSS dans l'éditeur.

  2. Placez le curseur entre les accolades de la règle de style à modifier.

  3. 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.

  4. 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.

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 liste

  • empty-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.

Voir aussi

Concepts

Vue d'ensemble de l'utilisation de CSS